{"componentChunkName":"component---src-pages-components-notification-accessibility-mdx","path":"/components/notification/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/notification/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"13674a5c-e803-5beb-a7b6-fa1e756fc7e1","children":[],"parent":"5826cf9b-7fd5-55eb-8553-d71063f8b4d1","internal":{"content":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\nimport {\n  StructuredListWrapper,\n  StructuredListHead,\n  StructuredListBody,\n  StructuredListRow,\n  StructuredListInput,\n  StructuredListCell,\n  OrderedList,\n  ListItem,\n} from 'carbon-components-react';\n\n<AnchorLinks>\n  <AnchorLink>How it works</AnchorLink>\n  <AnchorLink>Accessibility considerations</AnchorLink>\n  <AnchorLink>Resources</AnchorLink>\n  <AnchorLink>Accessibility testing</AnchorLink>\n</AnchorLinks>\n\n## How it works\n\nNotification Carbon components are messages that communicate information to a user. The WAI-ARIA `role=\"alert\"` is equivalent to `aria-live=\"assertive\"`. It is used to display a message to the user in a way that attracts the user's attention without receiving focus to communicate the message without interrupting the users current task. If the notification does not contain an urgent message, consider changing it to `aria-live=\"polite\"` so the notification is queued until whatever task the user is currently working on is complete.\n\nThe close button contains an ARIA label of `aria-label=\"close\"`, and the icon has `aria-hidden=\"true\"` so it is ignored by assistive technologies. The `Tab` key is used to move focus to the close button within the notification and the `Space` key or `Enter` key activate the button to close the notification.\n\n## Accessibility considerations\n\n1. Avoid using a toast notification for critical alerts or long messages because they are timed and will disappear automatically making it difficult for people with various disabilities to get the entire message. An alert that disappears too quickly can lead to failure of the optional [WCAG 2.0 success criterion 2.2.3 (AAA)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html).\n2. Provide a means to turn off nonessential alerts to enhance usability for people with visual and cognitive disabilities. Additional information is available in [WCAG 2.0 success criterion 2.2.4 (AAA)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html). Note: Providing this functionality is optional.\n\n3. Ensure the use of color and hidden icons are not used as the only means of conveying the importance of the notification.\n\n## Resources\n\n**Helpful resources for creating customized accessible implementations**\n\n- [W3C W3C WAI-ARIA Authoring Practices Alert Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#alert) covers the usage of ARIA names, state and roles.\n- [W3C W3C Web Accessibility Tutorial - User Notifications](https://www.w3.org/WAI/tutorials/forms/notifications/) provides a tutorial on notification accessibility.\n- [IBM Accessibility Checklist Checkpoint](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html):\n  - [3.3.1 Error Identification](https://www.ibm.com/able/guidelines/ci162/error_id.html) (WCAG Success Criteria [3.3.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html))\n  - [3.3.2 Labels and Instructions](https://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html) (WCAG Success Criteria [3.3.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html))\n  - [3.3.3 Error Suggestion](https://www.ibm.com/able/guidelines/ci162/error_suggestion.html) (WCAG Success Criteria [3.3.3](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-suggestions.html))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestones).\n\n### Automated test\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>\n            Automated test environment\n          </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Chrome version 77.0.3865.90\n            <br />\n            - Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG\n            2.1 Sept. 2019 Ruleset\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>DAP Test</strong>\n            <br />- Violations\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### macOS screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Chrome version 77.0.3865.90\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver(VO) test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press Control-Option-Shift keys to enter the Web content.\n              </ListItem>\n              <ListItem>\n                Press the Tab key. VO announces the notification text and the\n                close button.\n              </ListItem>\n              <ListItem>\n                Press the Space key or Enter key to close the notification.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Safari version 13.0.2\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver(VO) test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press Control-Option-Shift keys to enter the Web content.\n              </ListItem>\n              <ListItem>\n                Press the Tab key. VO announces the notification text and the\n                close button.\n              </ListItem>\n              <ListItem>\n                Press the Space key or Enter key to close the notification.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### Windows screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment</StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - Firefox version 68\n            <br />\n            - JAWS version 18\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press H, JAWS announce the notification title.\n              </ListItem>\n              <ListItem>\n                Press Alt-Down Arrow, JAWS announces each line of the\n                notification text.\n              </ListItem>\n              <ListItem>\n                Press the Tab, JAWS announces the close button.\n              </ListItem>\n              <ListItem>\n                Press the Space key or Enter key to close the notification.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### iOS screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListRow head>\n        <StructuredListCell head>Environment </StructuredListCell>\n        <StructuredListCell head>Results</StructuredListCell>\n      </StructuredListRow>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - iOS version 13.1.3 with VoiceOver\n            <br />\n            - Safari version 13.1.3\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver test:</strong>\n            <OrderedList>\n              <ListItem>\n                Swipe right to the notification and to read the notification\n                text.\n              </ListItem>\n              <ListItem>\n                Swipe right to the X icon. VO announces the close button.\n              </ListItem>\n              <ListItem>Double tap to close the notification.</ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","type":"Mdx","contentDigest":"8af9f8e9c7bc99a0a5e601783a401117","counter":1540,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\nimport {\n  StructuredListWrapper,\n  StructuredListHead,\n  StructuredListBody,\n  StructuredListRow,\n  StructuredListInput,\n  StructuredListCell,\n  OrderedList,\n  ListItem,\n} from 'carbon-components-react';\n\n<AnchorLinks>\n  <AnchorLink>How it works</AnchorLink>\n  <AnchorLink>Accessibility considerations</AnchorLink>\n  <AnchorLink>Resources</AnchorLink>\n  <AnchorLink>Accessibility testing</AnchorLink>\n</AnchorLinks>\n\n## How it works\n\nNotification Carbon components are messages that communicate information to a user. The WAI-ARIA `role=\"alert\"` is equivalent to `aria-live=\"assertive\"`. It is used to display a message to the user in a way that attracts the user's attention without receiving focus to communicate the message without interrupting the users current task. If the notification does not contain an urgent message, consider changing it to `aria-live=\"polite\"` so the notification is queued until whatever task the user is currently working on is complete.\n\nThe close button contains an ARIA label of `aria-label=\"close\"`, and the icon has `aria-hidden=\"true\"` so it is ignored by assistive technologies. The `Tab` key is used to move focus to the close button within the notification and the `Space` key or `Enter` key activate the button to close the notification.\n\n## Accessibility considerations\n\n1. Avoid using a toast notification for critical alerts or long messages because they are timed and will disappear automatically making it difficult for people with various disabilities to get the entire message. An alert that disappears too quickly can lead to failure of the optional [WCAG 2.0 success criterion 2.2.3 (AAA)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html).\n2. Provide a means to turn off nonessential alerts to enhance usability for people with visual and cognitive disabilities. Additional information is available in [WCAG 2.0 success criterion 2.2.4 (AAA)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html). Note: Providing this functionality is optional.\n\n3. Ensure the use of color and hidden icons are not used as the only means of conveying the importance of the notification.\n\n## Resources\n\n**Helpful resources for creating customized accessible implementations**\n\n- [W3C W3C WAI-ARIA Authoring Practices Alert Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#alert) covers the usage of ARIA names, state and roles.\n- [W3C W3C Web Accessibility Tutorial - User Notifications](https://www.w3.org/WAI/tutorials/forms/notifications/) provides a tutorial on notification accessibility.\n- [IBM Accessibility Checklist Checkpoint](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html):\n  - [3.3.1 Error Identification](https://www.ibm.com/able/guidelines/ci162/error_id.html) (WCAG Success Criteria [3.3.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html))\n  - [3.3.2 Labels and Instructions](https://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html) (WCAG Success Criteria [3.3.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html))\n  - [3.3.3 Error Suggestion](https://www.ibm.com/able/guidelines/ci162/error_suggestion.html) (WCAG Success Criteria [3.3.3](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-suggestions.html))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestones).\n\n### Automated test\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>\n            Automated test environment\n          </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Chrome version 77.0.3865.90\n            <br />\n            - Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG\n            2.1 Sept. 2019 Ruleset\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>DAP Test</strong>\n            <br />- Violations\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### macOS screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment </StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Chrome version 77.0.3865.90\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver(VO) test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press Control-Option-Shift keys to enter the Web content.\n              </ListItem>\n              <ListItem>\n                Press the Tab key. VO announces the notification text and the\n                close button.\n              </ListItem>\n              <ListItem>\n                Press the Space key or Enter key to close the notification.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - macOS Mojave version 10.14.6 with VoiceOver\n            <br />\n            - Safari version 13.0.2\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver(VO) test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press Control-Option-Shift keys to enter the Web content.\n              </ListItem>\n              <ListItem>\n                Press the Tab key. VO announces the notification text and the\n                close button.\n              </ListItem>\n              <ListItem>\n                Press the Space key or Enter key to close the notification.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### Windows screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListHead>\n        <StructuredListRow head>\n          <StructuredListCell head>Environment</StructuredListCell>\n          <StructuredListCell head>Results</StructuredListCell>\n        </StructuredListRow>\n      </StructuredListHead>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - Firefox version 68\n            <br />\n            - JAWS version 18\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Press H, JAWS announce the notification title.\n              </ListItem>\n              <ListItem>\n                Press Alt-Down Arrow, JAWS announces each line of the\n                notification text.\n              </ListItem>\n              <ListItem>\n                Press the Tab, JAWS announces the close button.\n              </ListItem>\n              <ListItem>\n                Press the Space key or Enter key to close the notification.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### iOS screen reader tests\n\n<Row>\n  <Column noGutterSm>\n    <StructuredListWrapper>\n      <StructuredListRow head>\n        <StructuredListCell head>Environment </StructuredListCell>\n        <StructuredListCell head>Results</StructuredListCell>\n      </StructuredListRow>\n      <StructuredListBody>\n        <StructuredListRow>\n          <StructuredListCell>\n            - iOS version 13.1.3 with VoiceOver\n            <br />\n            - Safari version 13.1.3\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>VoiceOver test:</strong>\n            <OrderedList>\n              <ListItem>\n                Swipe right to the notification and to read the notification\n                text.\n              </ListItem>\n              <ListItem>\n                Swipe right to the X icon. VO announces the close button.\n              </ListItem>\n              <ListItem>Double tap to close the notification.</ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/notification/accessibility.mdx"}}}}