diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx
index a09d459f8..213500870 100644
--- a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx
+++ b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/accessibility-content/accessibility-content.component.tsx
@@ -1,99 +1,26 @@
 'use client';
 
 import { DocumentRenderer } from '@keystatic/core/renderer';
-import { Grid, GridItem, Select } from '@westpac/ui';
-import { useId, useState } from 'react';
 
 import { Container } from '@/app/design-system/components';
 import { Colors } from '@/components/component-blocks/colors/colors.component';
+import { AccessibilityDemo } from '@/components/component-blocks/components/accessibility-demo';
 import { ShortCode } from '@/components/component-blocks/components/short-code';
 import { foundationBlocksComponents } from '@/components/component-blocks/foundation-blocks';
 import { Section } from '@/components/content-blocks/section';
-import { Link, Text } from '@/components/content-blocks/typography';
-import { Code, Heading } from '@/components/document-renderer';
-import { VisionFilter, VisionFilterProps } from '@/components/vision-filter';
+import { Heading } from '@/components/document-renderer';
 
 import { DOCUMENT_RENDERERS } from '../document-renderer';
 
 import { AccessibilityContentProps } from '.';
 
-const FILTERS = [
-  { text: 'No filter', value: '' },
-  { text: 'Achromatomaly', value: 'achromatomaly' },
-  { text: 'Achromatopsia', value: 'achromatopsia' },
-  { text: 'Deuteranomaly', value: 'deuteranomaly' },
-  { text: 'Deuteranopia', value: 'deuteranopia' },
-  { text: 'Protanomaly', value: 'protanomaly' },
-  { text: 'Protanopia', value: 'protanopia' },
-  { text: 'Tritanomaly', value: 'tritanomaly' },
-  { text: 'Tritanopia', value: 'tritanopia' },
-  { text: 'Low contrast', value: 'low-contrast' },
-] as const;
-
 export function AccessibilityContent({
   accessibilitySections,
   accessibilityDemo,
   shortCodes,
 }: AccessibilityContentProps) {
-  const [filter, setFilter] = useState<VisionFilterProps['value']>();
-  const id = useId();
-
   return (
     <>
-      {accessibilityDemo && (
-        <Section className="border-t-0">
-          <Container className="pt-7">
-            <Heading level={2} className="mb-4 sm:mb-7">
-              Colour impairment demonstration
-            </Heading>
-            <Grid>
-              <GridItem span={{ initial: 12, xsl: 11, sm: 8, md: 7, lg: 9 }}>
-                <Text>
-                  All components are designed and tested to ensure colour contrast ratios comply with the WCAG 2.1 AA
-                  specification. Select a filter from the list below to see how this component would appear to someone
-                  with a:{' '}
-                  <Link href="/design-system/accessibility/colour-vision-impairment">colour vision impairment</Link>.
-                </Text>
-              </GridItem>
-            </Grid>
-            <div className="flex items-center bg-light p-4">
-              <label htmlFor={id} className="mr-[1rem] whitespace-nowrap">
-                Select filter
-              </label>
-              <Select
-                id={id}
-                value={filter}
-                width={10}
-                onChange={(event: any) => setFilter(event.target.value as VisionFilterProps['value'])}
-              >
-                {FILTERS.map(filter => (
-                  <option key={filter.text} value={filter.value}>
-                    {filter.text}
-                  </option>
-                ))}
-              </Select>
-            </div>
-            <VisionFilter value={filter}>
-              <DocumentRenderer
-                document={accessibilityDemo}
-                renderers={{
-                  ...DOCUMENT_RENDERERS,
-                  block: {
-                    ...DOCUMENT_RENDERERS.block,
-                    code: props => <Code className="my-4" enableLiveCode={false} {...props} />,
-                  },
-                }}
-                componentBlocks={{
-                  ...foundationBlocksComponents,
-                  shortCode: props => {
-                    return <ShortCode shortCodes={shortCodes} {...props} />;
-                  },
-                }}
-              />
-            </VisionFilter>
-          </Container>
-        </Section>
-      )}
       {accessibilitySections?.map(({ title, content }) => {
         const id = title.toLowerCase().split(' ').join('-');
         return (
@@ -106,8 +33,13 @@ export function AccessibilityContent({
                 componentBlocks={{
                   ...foundationBlocksComponents,
                   colors: props => <Colors palette={props.palette} />,
+                  accessibilityDemo: () => <AccessibilityDemo content={accessibilityDemo || []} />,
                   shortCode: props => {
-                    return <ShortCode shortCodes={shortCodes} {...props} />;
+                    return (
+                      <div className="mb-4">
+                        <ShortCode shortCodes={shortCodes} {...props} />
+                      </div>
+                    );
                   },
                 }}
               />
diff --git a/apps/site/src/app/design-system/[brand]/[...component]/page.tsx b/apps/site/src/app/design-system/[brand]/[...component]/page.tsx
index dd658d954..033c0a2b1 100644
--- a/apps/site/src/app/design-system/[brand]/[...component]/page.tsx
+++ b/apps/site/src/app/design-system/[brand]/[...component]/page.tsx
@@ -72,6 +72,7 @@ export default async function ComponentPage({
                 return shortCode.entry.content().then(content => {
                   return resolve({
                     ...shortCode.entry,
+                    slug: shortCode.slug,
                     content,
                   });
                 });
diff --git a/apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.component.tsx b/apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.component.tsx
new file mode 100644
index 000000000..0d69dcdd5
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.component.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { DocumentRenderer } from '@keystatic/core/renderer';
+import { Select } from '@westpac/ui';
+import { useId, useState } from 'react';
+
+import { DOCUMENT_RENDERERS } from '@/app/articles/[article]/components/document-renderer';
+import { Code } from '@/components/code';
+import { VisionFilter, VisionFilterProps } from '@/components/vision-filter';
+
+import { type AccessibilityDemoProps } from './accessibility-demo.types';
+
+const FILTERS = [
+  { text: 'No filter', value: '' },
+  { text: 'Achromatomaly', value: 'achromatomaly' },
+  { text: 'Achromatopsia', value: 'achromatopsia' },
+  { text: 'Deuteranomaly', value: 'deuteranomaly' },
+  { text: 'Deuteranopia', value: 'deuteranopia' },
+  { text: 'Protanomaly', value: 'protanomaly' },
+  { text: 'Protanopia', value: 'protanopia' },
+  { text: 'Tritanomaly', value: 'tritanomaly' },
+  { text: 'Tritanopia', value: 'tritanopia' },
+  { text: 'Low contrast', value: 'low-contrast' },
+] as const;
+
+export const AccessibilityDemo = ({ content }: AccessibilityDemoProps) => {
+  const [filter, setFilter] = useState<VisionFilterProps['value']>();
+  const id = useId();
+
+  return (
+    <>
+      <div className="flex items-center bg-light p-4">
+        <label htmlFor={id} className="mr-[1rem] whitespace-nowrap">
+          Select filter
+        </label>
+        <Select
+          id={id}
+          value={filter}
+          width={10}
+          onChange={(event: any) => setFilter(event.target.value as VisionFilterProps['value'])}
+        >
+          {FILTERS.map(filter => (
+            <option key={filter.text} value={filter.value}>
+              {filter.text}
+            </option>
+          ))}
+        </Select>
+      </div>
+      <VisionFilter value={filter}>
+        <DocumentRenderer
+          document={content}
+          renderers={{
+            ...DOCUMENT_RENDERERS,
+            block: {
+              ...DOCUMENT_RENDERERS.block,
+              code: props => <Code {...props} live showCode={false} className="my-4" enableLiveCode={false} />,
+            },
+          }}
+        />
+      </VisionFilter>
+    </>
+  );
+};
diff --git a/apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.preview.tsx b/apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.preview.tsx
new file mode 100644
index 000000000..637f3a52c
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.preview.tsx
@@ -0,0 +1,24 @@
+import { component, fields } from '@keystatic/core';
+
+import { AccessibilityDemo } from '.';
+
+// Apparently the document field is not possible be implemented on a component.
+export const accessibilityDemo = component({
+  label: 'Accessibility Demo',
+  preview: ({ fields }) => {
+    return <h1>Accessibility Demo</h1>;
+    // return <AccessibilityDemo content={content.value} />;
+  },
+  schema: {
+    // content: fields.document({
+    //   label: 'Content',
+    //   componentBlocks: {},
+    //   formatting: {
+    //     blockTypes: {
+    //       blockquote: true,
+    //       code: true,
+    //     },
+    //   },
+    // }),
+  },
+});
diff --git a/apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.types.ts b/apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.types.ts
new file mode 100644
index 000000000..a51f9fb1a
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/accessibility-demo/accessibility-demo.types.ts
@@ -0,0 +1,5 @@
+import { DocumentElement } from '@keystatic/core';
+
+export type AccessibilityDemoProps = {
+  content: DocumentElement[];
+};
diff --git a/apps/site/src/components/component-blocks/components/accessibility-demo/index.ts b/apps/site/src/components/component-blocks/components/accessibility-demo/index.ts
new file mode 100644
index 000000000..13a35dd69
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/accessibility-demo/index.ts
@@ -0,0 +1,2 @@
+export * from './accessibility-demo.component';
+export * from './accessibility-demo.types';
diff --git a/apps/site/src/components/component-blocks/components/short-code/short-code.component.tsx b/apps/site/src/components/component-blocks/components/short-code/short-code.component.tsx
index ec251a6c1..3f49c5784 100644
--- a/apps/site/src/components/component-blocks/components/short-code/short-code.component.tsx
+++ b/apps/site/src/components/component-blocks/components/short-code/short-code.component.tsx
@@ -8,7 +8,7 @@ import { foundationBlocksComponents } from '../../foundation-blocks';
 import { type ShortCodeProps } from './short-code.types';
 
 export const ShortCode = ({ name, shortCodes }: ShortCodeProps) => {
-  const shortCode = useMemo(() => shortCodes.find(shortCode => shortCode.name === name), [name, shortCodes]);
+  const shortCode = useMemo(() => shortCodes.find(shortCode => shortCode.slug === name), [name, shortCodes]);
 
   return shortCode?.content ? (
     <DocumentRenderer
diff --git a/apps/site/src/components/component-blocks/foundation-blocks.tsx b/apps/site/src/components/component-blocks/foundation-blocks.tsx
index d1454d946..3f72fc996 100644
--- a/apps/site/src/components/component-blocks/foundation-blocks.tsx
+++ b/apps/site/src/components/component-blocks/foundation-blocks.tsx
@@ -2,6 +2,8 @@ import { Image } from '@/components/document-renderer';
 
 import { Colors } from './colors/colors.component';
 import { colors } from './colors/colors.preview';
+import { AccessibilityDemo } from './components/accessibility-demo';
+import { accessibilityDemo } from './components/accessibility-demo/accessibility-demo.preview';
 import { designSystemBodyImage } from './components/design-system-body-image';
 import { LinkList } from './components/link-list';
 import { linkList } from './components/link-list/link-list.preview';
@@ -27,6 +29,7 @@ export const foundationBlocks = {
   designSystemBodyImage,
   linkList,
   shortCode,
+  accessibilityDemo,
 };
 
 export const foundationBlocksComponents = {
diff --git a/apps/site/src/content/design-system/components/accordion/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/accordion/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/accordion/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/alert/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/alert/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/alert/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/alert/index.yaml b/apps/site/src/content/design-system/components/alert/index.yaml
index e30b2e326..84d80d50b 100644
--- a/apps/site/src/content/design-system/components/alert/index.yaml
+++ b/apps/site/src/content/design-system/components/alert/index.yaml
@@ -4,6 +4,7 @@ description: >-
   flexible, consistent message system for common user interactions.
 namedExport:
   discriminant: false
+excludeFromNavbar: false
 design:
   - title:
       name: Alert boxes
@@ -26,6 +27,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/design-system/components/badge/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/badge/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/badge/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/badge/index.yaml b/apps/site/src/content/design-system/components/badge/index.yaml
index b9954475b..2b258b974 100644
--- a/apps/site/src/content/design-system/components/badge/index.yaml
+++ b/apps/site/src/content/design-system/components/badge/index.yaml
@@ -24,6 +24,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/design-system/components/button/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/button/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/button/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/button/index.yaml b/apps/site/src/content/design-system/components/button/index.yaml
index 63a298d35..dc2264688 100644
--- a/apps/site/src/content/design-system/components/button/index.yaml
+++ b/apps/site/src/content/design-system/components/button/index.yaml
@@ -31,6 +31,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/design-system/components/compacta/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/compacta/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/compacta/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/compacta/index.yaml b/apps/site/src/content/design-system/components/compacta/index.yaml
index a75690507..7a970b4aa 100644
--- a/apps/site/src/content/design-system/components/compacta/index.yaml
+++ b/apps/site/src/content/design-system/components/compacta/index.yaml
@@ -22,6 +22,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility notes
       slug: accessibility-notes
diff --git a/apps/site/src/content/design-system/components/date-picker/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/date-picker/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/date-picker/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/date-picker/index.yaml b/apps/site/src/content/design-system/components/date-picker/index.yaml
index 4d496bcc1..7ca64418a 100644
--- a/apps/site/src/content/design-system/components/date-picker/index.yaml
+++ b/apps/site/src/content/design-system/components/date-picker/index.yaml
@@ -30,6 +30,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/design-system/components/input-group/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/input-group/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/input-group/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/input-group/index.yaml b/apps/site/src/content/design-system/components/input-group/index.yaml
index 71dee869b..d219a9cad 100644
--- a/apps/site/src/content/design-system/components/input-group/index.yaml
+++ b/apps/site/src/content/design-system/components/input-group/index.yaml
@@ -32,6 +32,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/design-system/components/link/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/link/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/link/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/link/index.yaml b/apps/site/src/content/design-system/components/link/index.yaml
index 707e6fc21..163856b2d 100644
--- a/apps/site/src/content/design-system/components/link/index.yaml
+++ b/apps/site/src/content/design-system/components/link/index.yaml
@@ -24,6 +24,9 @@ design:
       slug: visual-design
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/design-system/components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/progress-indicator/index.yaml b/apps/site/src/content/design-system/components/progress-indicator/index.yaml
index 643a6f3ac..dbdd79669 100644
--- a/apps/site/src/content/design-system/components/progress-indicator/index.yaml
+++ b/apps/site/src/content/design-system/components/progress-indicator/index.yaml
@@ -20,6 +20,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/design-system/components/progress-rope/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/progress-rope/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/progress-rope/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/progress-rope/index.yaml b/apps/site/src/content/design-system/components/progress-rope/index.yaml
index 861dbd354..899e26d33 100644
--- a/apps/site/src/content/design-system/components/progress-rope/index.yaml
+++ b/apps/site/src/content/design-system/components/progress-rope/index.yaml
@@ -26,6 +26,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/design-system/components/radio-group/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/radio-group/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/radio-group/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/radio-group/index.yaml b/apps/site/src/content/design-system/components/radio-group/index.yaml
index e53cb4e77..00b39114d 100644
--- a/apps/site/src/content/design-system/components/radio-group/index.yaml
+++ b/apps/site/src/content/design-system/components/radio-group/index.yaml
@@ -34,6 +34,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/design-system/components/table/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/table/accessibility/colour-impairment-demonstration/content.mdoc
new file mode 100644
index 000000000..8cbe95006
--- /dev/null
+++ b/apps/site/src/content/design-system/components/table/accessibility/colour-impairment-demonstration/content.mdoc
@@ -0,0 +1,3 @@
+{% shortCode name="accessibility-colour-impairment" /%}
+
+{% accessibilityDemo /%}
diff --git a/apps/site/src/content/design-system/components/table/index.yaml b/apps/site/src/content/design-system/components/table/index.yaml
index c1f750998..da087515b 100644
--- a/apps/site/src/content/design-system/components/table/index.yaml
+++ b/apps/site/src/content/design-system/components/table/index.yaml
@@ -39,6 +39,9 @@ design:
       slug: dos-and-donts
     noTitle: false
 accessibility:
+  - title:
+      name: Colour impairment demonstration
+      slug: colour-impairment-demonstration
   - title:
       name: Accessibility features
       slug: accessibility-features
diff --git a/apps/site/src/content/short-codes/accessibility-colour-impairment.yaml b/apps/site/src/content/short-codes/accessibility-colour-impairment.yaml
new file mode 100644
index 000000000..0ea0ff334
--- /dev/null
+++ b/apps/site/src/content/short-codes/accessibility-colour-impairment.yaml
@@ -0,0 +1 @@
+name: Accessibility colour impairment
diff --git a/apps/site/src/content/short-codes/accessibility-colour-impairment/content.mdoc b/apps/site/src/content/short-codes/accessibility-colour-impairment/content.mdoc
new file mode 100644
index 000000000..e6b674343
--- /dev/null
+++ b/apps/site/src/content/short-codes/accessibility-colour-impairment/content.mdoc
@@ -0,0 +1 @@
+All components are designed and tested to ensure colour contrast ratios comply with the WCAG 2.1 AA specification. Select a filter from the list below to see how this component would appear to someone with a:&nbsp;[colour vision impairment](/design-system/accessibility/colour-vision-impairment).
diff --git a/apps/site/src/types/short-code.types.ts b/apps/site/src/types/short-code.types.ts
index 8bd7c35b7..4004d5531 100644
--- a/apps/site/src/types/short-code.types.ts
+++ b/apps/site/src/types/short-code.types.ts
@@ -3,4 +3,5 @@ import { DocumentElement } from '@keystatic/core';
 export type ShortCode = {
   content: DocumentElement[];
   name: string;
+  slug: string;
 };
diff --git a/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx b/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx
index e3231ab24..ef639c379 100644
--- a/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx
+++ b/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx
@@ -5,12 +5,12 @@ import { useBreadcrumbs } from 'react-aria';
 
 import { type BreadcrumbProps } from './breadcrumb.types.js';
 
-export function Breadcrumb({ className, children, ...props }: BreadcrumbProps) {
+export function Breadcrumb({ className, children, 'aria-label': ariaLabel = 'Breadcrumb', ...props }: BreadcrumbProps) {
   const { navProps } = useBreadcrumbs(props);
   const childCount = Children.count(children);
 
   return (
-    <nav className={className} {...navProps}>
+    <nav className={className} aria-label={ariaLabel} {...navProps}>
       <ol className="m-0 flex list-none p-0">
         {Children.map(
           children,
diff --git a/packages/ui/src/components/button/button.component.tsx b/packages/ui/src/components/button/button.component.tsx
index b2e510f1e..4d89125f0 100644
--- a/packages/ui/src/components/button/button.component.tsx
+++ b/packages/ui/src/components/button/button.component.tsx
@@ -38,9 +38,9 @@ function BaseButton(
 
   return (
     <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)}>
-      {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} color={iconColor} />}
+      {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} color={iconColor} aria-hidden />}
       <span className={styles.text()}>{children}</span>
-      {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} color={iconColor} />}
+      {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} color={iconColor} aria-hidden />}
     </Tag>
   );
 }
diff --git a/packages/ui/src/components/button/button.spec.tsx b/packages/ui/src/components/button/button.spec.tsx
index 9787ec1d0..91f33b810 100644
--- a/packages/ui/src/components/button/button.spec.tsx
+++ b/packages/ui/src/components/button/button.spec.tsx
@@ -23,12 +23,12 @@ describe('Button', () => {
 
   it('renders an iconBefore when passed', () => {
     render(<Button iconBefore={ArrowRightIcon} />);
-    expect(screen.getByRole('img', { name: 'Arrow Right' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
   });
 
   it('renders an iconAfter when passed', () => {
     render(<Button iconAfter={ArrowLeftIcon} />);
-    expect(screen.getByRole('img', { name: 'Arrow Left' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
   });
 
   it('renders as an a tag', () => {
diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx
index a2ccb9bc1..ac46eec05 100644
--- a/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx
+++ b/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 
@@ -42,6 +42,7 @@ export function CheckboxGroup({
   const firstNewCheckboxRef = useRef<HTMLDivElement>(null);
   const revealAmount = checkboxes && checkboxes.length - showAmount;
   const styles = checkboxStyles({ orientation, isFocusVisible });
+  const panelId = useId();
   const childrenToRender = useMemo(() => {
     const newChildren = checkboxes.map((checkbox, index) => (
       <CheckboxGroupCheckbox key={index} ref={index === showAmount ? firstNewCheckboxRef : null} {...checkbox} />
@@ -63,7 +64,7 @@ export function CheckboxGroup({
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
-      <div className={styles.itemWrapper()}>
+      <div className={styles.itemWrapper()} id={panelId}>
         <CheckboxGroupContext.Provider value={{ ...state, orientation, size }}>
           {childrenToRender}
         </CheckboxGroupContext.Provider>
@@ -73,6 +74,8 @@ export function CheckboxGroup({
             className={styles.revealButton()}
             look="link"
             iconAfter={() => <ExpandMoreIcon size="small" color="link" />}
+            aria-controls={panelId}
+            aria-expanded={!hiddenOptions}
             {...focusProps}
           >
             <p className={styles.buttonText()}>{`Show ${revealAmount} more ${
diff --git a/packages/ui/src/components/collapsible/collapsible.spec.tsx b/packages/ui/src/components/collapsible/collapsible.spec.tsx
index ba42f6bf4..ef50f3a4a 100644
--- a/packages/ui/src/components/collapsible/collapsible.spec.tsx
+++ b/packages/ui/src/components/collapsible/collapsible.spec.tsx
@@ -23,7 +23,7 @@ describe('Collapsible', () => {
     const { getByText, getByRole } = render(<Collapsible text="test button">Test Text</Collapsible>);
     expect(screen.queryByText('Test Text')).not.toBeInTheDocument();
     await act(() => {
-      user.click(getByRole('button', { name: 'test button Expand More' }));
+      user.click(getByRole('button', { name: 'test button' }));
     });
     await waitFor(() => expect(getByText('Test Text')).toBeInTheDocument());
   });
@@ -37,7 +37,7 @@ describe('Collapsible', () => {
       </Collapsible>,
     );
     await act(() => {
-      user.click(getByRole('button', { name: 'test button Expand More' }));
+      user.click(getByRole('button', { name: 'test button' }));
     });
     await waitFor(() => expect(onClick).toBeCalled());
   });
diff --git a/packages/ui/src/components/pagination/pagination.component.tsx b/packages/ui/src/components/pagination/pagination.component.tsx
index 163ca3b8c..b3edddbdb 100644
--- a/packages/ui/src/components/pagination/pagination.component.tsx
+++ b/packages/ui/src/components/pagination/pagination.component.tsx
@@ -111,7 +111,7 @@ export function Pagination({
   }, [current, onChange, linkComponent, pages, infinite]);
 
   return (
-    <Tag className={styles.base({ className })} role={role} {...props}>
+    <Tag className={styles.base({ className })} role={role} aria-label="Page number" {...props}>
       <ul className={styles.ul({})}>
         <li>
           <PaginationItem {...paginationBackProps}>{backLabel}</PaginationItem>
diff --git a/packages/ui/src/components/progress-bar/progress-bar.component.tsx b/packages/ui/src/components/progress-bar/progress-bar.component.tsx
index 482a46a7e..82d536737 100644
--- a/packages/ui/src/components/progress-bar/progress-bar.component.tsx
+++ b/packages/ui/src/components/progress-bar/progress-bar.component.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useProgressBar } from 'react-aria';
+import { mergeProps, useProgressBar } from 'react-aria';
 
 import { styles as progressBarStyles } from './progress-bar.styles.js';
 import { type ProgressBarProps } from './progress-bar.types.js';
@@ -19,7 +19,11 @@ export function ProgressBar({ className, look = 'default', value = 0, noLabel =
   const styles = progressBarStyles({ look });
 
   return (
-    <div {...progressBarProps} className={styles.base({ className })}>
+    <div
+      aria-live="polite"
+      className={styles.base({ className })}
+      {...mergeProps(progressBarProps, { 'aria-valuetext': `${barValue} complete` })}
+    >
       <div style={{ width: barValue }} className={styles.innerBar()}>
         <span className={styles.label({ class: `${noLabel || look === 'skinny' ? 'hidden' : ''}` })} {...labelProps}>
           {barValue}
diff --git a/packages/ui/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.tsx b/packages/ui/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.tsx
index 0a5eee841..845d01b40 100644
--- a/packages/ui/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.tsx
+++ b/packages/ui/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.tsx
@@ -21,6 +21,7 @@ export function ProgressRopeGroupStep({
   firstItem,
   opened,
   onToggle,
+  tag: Tag,
 }: ProgressRopeGroupStepProps) {
   const id = useId();
   const stepsContainerID = `progress-rope-group-steps-container-${id}`;
@@ -35,13 +36,13 @@ export function ProgressRopeGroupStep({
 
   const visuallyHiddenMessage = useMemo(() => {
     if (steps.slice(-1)[0].index < (furthestVisitedStep || 0)) {
-      return 'completed';
+      return ', completed';
     }
-    if (current) {
-      return 'in progress';
+    if (current || visited) {
+      return ', in progress';
     }
-    return 'not started';
-  }, [steps, furthestVisitedStep]);
+    return ', not started';
+  }, [steps, furthestVisitedStep, current, visited]);
 
   const { isFocusVisible, focusProps } = useFocusRing();
 
@@ -60,7 +61,7 @@ export function ProgressRopeGroupStep({
 
   const styles = progressRopeGroupStyles({ firstItem, state, isFocusVisible });
   return (
-    <>
+    <Tag>
       <button
         aria-expanded={opened}
         className={styles.circleWrapper({})}
@@ -70,7 +71,7 @@ export function ProgressRopeGroupStep({
       >
         <Circle className={styles.circle()} aria-hidden="true" />
         {children}
-        <VisuallyHidden>, {visuallyHiddenMessage}</VisuallyHidden>
+        <VisuallyHidden>{visuallyHiddenMessage}</VisuallyHidden>
       </button>
       <LazyMotion features={loadAnimations}>
         <AnimatePresence initial={false}>
@@ -110,6 +111,6 @@ export function ProgressRopeGroupStep({
           )}
         </AnimatePresence>
       </LazyMotion>
-    </>
+    </Tag>
   );
 }
diff --git a/packages/ui/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.ts b/packages/ui/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.ts
index f0e5258c6..616955c0f 100644
--- a/packages/ui/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.ts
+++ b/packages/ui/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.ts
@@ -36,4 +36,8 @@ export type ProgressRopeGroupStepProps = {
    * Steps to render
    */
   steps: (ProgressRopeStepItem & { index: number })[];
+  /**
+   * Tag for the heading wrapper
+   */
+  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 };
diff --git a/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.component.tsx b/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.component.tsx
index 66edc2ac0..c008c0a0c 100644
--- a/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.component.tsx
+++ b/packages/ui/src/components/progress-rope/components/progress-rope-step/progress-rope-step.component.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 
-import { Circle } from '../../../index.js';
+import { Circle, VisuallyHidden } from '../../../index.js';
 
 import { styles as progressRopeStyles } from './progress-rope-step.styles.js';
 import { type ProgressRopeStepProps } from './progress-rope-step.types.js';
@@ -57,15 +57,26 @@ export function ProgressRopeStep({
     isFocusVisible,
   });
 
+  const stateText = useMemo(() => {
+    if (current) {
+      return ', in progress';
+    }
+    if (visited || (!current && furthest)) {
+      return ', complete';
+    }
+    return ', not started';
+  }, [current, visited]);
+
   return (
     <Tag
       className={styles.base({})}
-      aria-current={current}
+      aria-current={current ? 'step' : false}
       disabled={state === 'non-visited'}
       {...mergeProps(props, focusProps)}
     >
       <Circle className={styles.circle()} aria-hidden="true" />
       {children}
+      <VisuallyHidden>{stateText}</VisuallyHidden>
     </Tag>
   );
 }
diff --git a/packages/ui/src/components/progress-rope/progress-rope.component.tsx b/packages/ui/src/components/progress-rope/progress-rope.component.tsx
index 2ceed62e4..01263b0ed 100644
--- a/packages/ui/src/components/progress-rope/progress-rope.component.tsx
+++ b/packages/ui/src/components/progress-rope/progress-rope.component.tsx
@@ -16,12 +16,13 @@ const verifyByCurrentIndexWhichGroupIsOpened = (currentIndex: number, mappedData
 };
 
 export function ProgressRope({
-  'aria-label': ariaLabel = 'Form steps',
+  'aria-label': ariaLabel = 'In this form',
   role = 'navigation',
   className,
   tag: Tag = 'nav',
   current = 0,
   data,
+  headingTag = 'h3',
   ...props
 }: ProgressRopeProps) {
   const [furthestVisitedStep, setFurthestVisitedStep] = useState<number>(current);
@@ -84,6 +85,7 @@ export function ProgressRope({
                   steps={item.steps}
                   opened={openedGroupStepIndex === index}
                   onToggle={() => setOpenedGroupStepIndex(state => (state === index ? null : index))}
+                  tag={headingTag}
                 >
                   {item.text}
                 </ProgressRopeGroupStep>
diff --git a/packages/ui/src/components/progress-rope/progress-rope.types.ts b/packages/ui/src/components/progress-rope/progress-rope.types.ts
index b3c4b5341..0f8390878 100644
--- a/packages/ui/src/components/progress-rope/progress-rope.types.ts
+++ b/packages/ui/src/components/progress-rope/progress-rope.types.ts
@@ -31,6 +31,11 @@ export type ProgressRopeProps = {
         type: 'group';
       }
   )[];
+  /**
+   * The semantic tag for the group step headings
+   * @default h3
+   */
+  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /**
    * Tag to render
    * @default nav
diff --git a/packages/ui/src/components/radio-group/radio-group.component.tsx b/packages/ui/src/components/radio-group/radio-group.component.tsx
index e35a1e9cf..b7628e7b9 100644
--- a/packages/ui/src/components/radio-group/radio-group.component.tsx
+++ b/packages/ui/src/components/radio-group/radio-group.component.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
@@ -47,6 +47,7 @@ export function RadioGroup({
   const firstNewRadioRef = useRef<HTMLDivElement>(null);
   const revealAmount = radios && radios.length - showAmount;
   const styles = radioGroupStyles({ orientation, isFocusVisible });
+  const panelId = useId();
   const childrenToRender = useMemo(() => {
     const newChildren = radios.map((radio, index) => (
       <RadioGroupRadio key={index} ref={index === showAmount ? firstNewRadioRef : null} {...radio} />
@@ -68,7 +69,7 @@ export function RadioGroup({
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
-      <div className={styles.radioWrapper()}>
+      <div className={styles.radioWrapper()} id={panelId}>
         <RadioGroupContext.Provider value={{ ...state, orientation, size }}>
           {childrenToRender}
         </RadioGroupContext.Provider>
@@ -78,6 +79,8 @@ export function RadioGroup({
             className={styles.revealButton()}
             look="link"
             iconAfter={() => <ExpandMoreIcon size="small" color="link" />}
+            aria-controls={panelId}
+            aria-expanded={!hiddenOptions}
             {...focusProps}
           >
             <p className={styles.buttonText()}>{`Show ${revealAmount} more ${
diff --git a/packages/ui/src/components/table/table.component.tsx b/packages/ui/src/components/table/table.component.tsx
index 4138fc6da..9148aab0f 100644
--- a/packages/ui/src/components/table/table.component.tsx
+++ b/packages/ui/src/components/table/table.component.tsx
@@ -15,9 +15,11 @@ export function Table({ bordered = false, striped = false, children, className,
 
   return (
     <TableContext.Provider value={{ bordered, striped }}>
-      <table className={styles.base({ className })} {...props}>
-        {children}
-      </table>
+      <div className={styles.wrapper()}>
+        <table className={styles.base({ className })} {...props}>
+          {children}
+        </table>
+      </div>
     </TableContext.Provider>
   );
 }
diff --git a/packages/ui/src/components/table/table.styles.ts b/packages/ui/src/components/table/table.styles.ts
index 82eccd198..2aa770060 100644
--- a/packages/ui/src/components/table/table.styles.ts
+++ b/packages/ui/src/components/table/table.styles.ts
@@ -4,6 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'mb-4 w-full',
+      wrapper: 'max-xsl:mb-[1.125rem] max-xsl:w-full max-xsl:overflow-x-auto max-xsl:overflow-y-hidden',
     },
     variants: {},
   },