{"componentChunkName":"component---src-pages-components-overflow-menu-accessibility-mdx","path":"/components/overflow-menu/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Overflow menu","description":"Overflow menus are used when additional options are available to the user and there is a space constraint.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/overflow-menu/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"1ed0355f-cbb7-50d6-b1ba-8eb28d78fdaa","children":[],"parent":"97dca544-dd64-5046-b10e-cb679e8f9496","internal":{"content":"---\ntitle: Overflow menu\ndescription: Overflow menus are used when additional options are available to the user and there is a space constraint.\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\n How it works\n Accessibility considerations\n Resources\n Accessibility testing\n\n\n## How it works\n\nThe Carbon overflow menu component is used when there is limited space to provide a pop-up list of actions that are available to the user. The overflow menu button uses `tabindex=\"0\"` to ensure it is in the tab order for keyboard only users.\n\nWhen the button has focus, Space key as well as the Enter key activates the pop-up menu. WAI-ARIA roles and states are used to ensure the component is accessible to people using assistive technologies. The pop-up menu has the ARIA role of `role=\"menu\"`, a label of `aria-label=\"Menu\"` and includes `aria-haspopup=\"true\"` to let the user know it is a pop-up menu.\n\nWhen the menu button is collapsed the pop-up menu is hidden so the ARIA state is set to `aria-expanded=\"false\"` to advise users of assistive technologies that the pop-up menu is not visible. When the pop-up menu is expanded the ARIA state changes to `aria-expanded=\"true\"` and the menu is displayed.\n\nEach menu option contains an ARIA role of `role=\"menuitem\"` and unique ARIA labels for each option. When focus is on each option there is a prominent style change to the border to ensure the focus is clearly displayed.\n\n## Accessibility considerations\n\nThis component has been validated to meet the [WCAG 2.1 AA](https://www.w3.org/TR/WCAG21/) and [Section 508](http://www.section508.gov/) accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.\n\n1. Labels should be clear and concise.\n1. If a colored button is used in the menu, be sure color is not the only way the information is conveyed.\n1. If a menu item is disabled it should not be in the tab order.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Dialog Menu Button Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton) covers the usage of ARIA names, state and roles, as well as the expected keyboard interactions.\n- [IBM Accessibility Checklist Checkpoint:](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html)\n - [1.3.1 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))\n - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/guidelines/ci162/meaningful_sequence.html) (WCAG Success Criteria [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence))\n - [2.1.1 Keyboard](https://www.ibm.com/able/guidelines/ci162/keyboard.html) (WCAG Success Criteria [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard))\n - [2.4.3 Focus Order](https://www.ibm.com/able/guidelines/ci162/focus_order.html) (WCAG Success Criteria [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order))\n - [2.4.6 Headings and Labels](https://www.ibm.com/able/guidelines/ci162/headings_and_labels.html) (WCAG Success Criteria [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels))\n - [2.4.7 Focus Visible](https://www.ibm.com/able/guidelines/ci162/focus_visible.html) (WCAG Success Criteria [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible))\n - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.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\n \n \n \n \n \n Automated test environment\n \n Results\n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Chrome version 77.0.3865.90\n
\n - Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM\n Accessibility WCAG 2.1 Sept. 2019 Ruleset\n
- Carbon React version 7.7.1\n \n \n DAP test:\n
- No violations\n \n \n \n \n \n
\n\n### macOS screen reader tests\n\n\n \n \n \n \n Environment \n Results\n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Chrome version 77.0.3865.90\n
- Carbon React version 7.7.1\n \n \n VoiceOver(VO) test:\n \n \n Tab to the Overflow Menu. VO announces the menu label and pop-up\n button.\n \n \n The Enter or Space key opens the menu. VO announces the menu\n item label the number and the total number of options.\n \n \n The Up and Down Arrow keys navigate through the list of options\n and VO announces each menu item label.\n \n \n The Escape key closes the menu. (Note: Space and Enter key also\n close the menu.)\n \n \n \n \n \n \n \n
\n\n### Windows screen reader tests\n\n\n \n \n \n \n Environment\n Results\n \n \n \n \n \n - Microsoft Windows 10\n
\n - Firefox version 68\n
\n - JAWS 18\n
- Carbon React version 7.7.1\n \n \n JAWS test:\n \n \n Tab to the Overflow Menu. JAWS announces the menu label and\n pop-up button, as well as press Space to expand.\n \n \n The Space key opens the menu briefly and then it disappears. The\n Enter key opens the menu and JAWS announces the menu item label\n \n \n The Up and Down Arrow keys navigate through the list of options\n and JAWS announces each menu item label.\n \n \n The Escape key closes the menu. (Note: Space and Enter key also\n close the menu.)\n \n \n \n \n \n \n \n
\n\n### iOS screen reader tests\n\n\n \n \n \n Environment \n Results\n \n \n \n \n - iOS version 13.1.3 with VoiceOver\n
\n - Safari version 13.1.3\n
- Carbon React version 7.7.1\n \n \n VoiceOver test:\n \n \n Swipe right to the Overflow Menu. VO announces the main\n landmark, menu label, and that the pop-up button is collapsed.\n \n \n Double tap to open the menu. VO announces the menu item label.\n \n \n Swipe right or left to navigate through the list of options and\n VO announces each menu item label.\n \n \n Double tap closes the menu. (Note: Space and Enter key also\n close the menu.)\n \n \n \n \n \n \n \n
\n","type":"Mdx","contentDigest":"b43d4aa5df827649ce3f8cb1dd4c167d","counter":1514,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Overflow menu","description":"Overflow menus are used when additional options are available to the user and there is a space constraint.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Overflow menu\ndescription: Overflow menus are used when additional options are available to the user and there is a space constraint.\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\n How it works\n Accessibility considerations\n Resources\n Accessibility testing\n\n\n## How it works\n\nThe Carbon overflow menu component is used when there is limited space to provide a pop-up list of actions that are available to the user. The overflow menu button uses `tabindex=\"0\"` to ensure it is in the tab order for keyboard only users.\n\nWhen the button has focus, Space key as well as the Enter key activates the pop-up menu. WAI-ARIA roles and states are used to ensure the component is accessible to people using assistive technologies. The pop-up menu has the ARIA role of `role=\"menu\"`, a label of `aria-label=\"Menu\"` and includes `aria-haspopup=\"true\"` to let the user know it is a pop-up menu.\n\nWhen the menu button is collapsed the pop-up menu is hidden so the ARIA state is set to `aria-expanded=\"false\"` to advise users of assistive technologies that the pop-up menu is not visible. When the pop-up menu is expanded the ARIA state changes to `aria-expanded=\"true\"` and the menu is displayed.\n\nEach menu option contains an ARIA role of `role=\"menuitem\"` and unique ARIA labels for each option. When focus is on each option there is a prominent style change to the border to ensure the focus is clearly displayed.\n\n## Accessibility considerations\n\nThis component has been validated to meet the [WCAG 2.1 AA](https://www.w3.org/TR/WCAG21/) and [Section 508](http://www.section508.gov/) accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.\n\n1. Labels should be clear and concise.\n1. If a colored button is used in the menu, be sure color is not the only way the information is conveyed.\n1. If a menu item is disabled it should not be in the tab order.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Dialog Menu Button Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton) covers the usage of ARIA names, state and roles, as well as the expected keyboard interactions.\n- [IBM Accessibility Checklist Checkpoint:](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html)\n - [1.3.1 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))\n - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/guidelines/ci162/meaningful_sequence.html) (WCAG Success Criteria [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence))\n - [2.1.1 Keyboard](https://www.ibm.com/able/guidelines/ci162/keyboard.html) (WCAG Success Criteria [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard))\n - [2.4.3 Focus Order](https://www.ibm.com/able/guidelines/ci162/focus_order.html) (WCAG Success Criteria [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order))\n - [2.4.6 Headings and Labels](https://www.ibm.com/able/guidelines/ci162/headings_and_labels.html) (WCAG Success Criteria [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels))\n - [2.4.7 Focus Visible](https://www.ibm.com/able/guidelines/ci162/focus_visible.html) (WCAG Success Criteria [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible))\n - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.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\n \n \n \n \n \n Automated test environment\n \n Results\n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Chrome version 77.0.3865.90\n
\n - Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM\n Accessibility WCAG 2.1 Sept. 2019 Ruleset\n
- Carbon React version 7.7.1\n \n \n DAP test:\n
- No violations\n \n \n \n \n \n
\n\n### macOS screen reader tests\n\n\n \n \n \n \n Environment \n Results\n \n \n \n \n \n - macOS Mojave version 10.14.6 with VoiceOver\n
\n - Chrome version 77.0.3865.90\n
- Carbon React version 7.7.1\n \n \n VoiceOver(VO) test:\n \n \n Tab to the Overflow Menu. VO announces the menu label and pop-up\n button.\n \n \n The Enter or Space key opens the menu. VO announces the menu\n item label the number and the total number of options.\n \n \n The Up and Down Arrow keys navigate through the list of options\n and VO announces each menu item label.\n \n \n The Escape key closes the menu. (Note: Space and Enter key also\n close the menu.)\n \n \n \n \n \n \n \n
\n\n### Windows screen reader tests\n\n\n \n \n \n \n Environment\n Results\n \n \n \n \n \n - Microsoft Windows 10\n
\n - Firefox version 68\n
\n - JAWS 18\n
- Carbon React version 7.7.1\n \n \n JAWS test:\n \n \n Tab to the Overflow Menu. JAWS announces the menu label and\n pop-up button, as well as press Space to expand.\n \n \n The Space key opens the menu briefly and then it disappears. The\n Enter key opens the menu and JAWS announces the menu item label\n \n \n The Up and Down Arrow keys navigate through the list of options\n and JAWS announces each menu item label.\n \n \n The Escape key closes the menu. (Note: Space and Enter key also\n close the menu.)\n \n \n \n \n \n \n \n
\n\n### iOS screen reader tests\n\n\n \n \n \n Environment \n Results\n \n \n \n \n - iOS version 13.1.3 with VoiceOver\n
\n - Safari version 13.1.3\n
- Carbon React version 7.7.1\n \n \n VoiceOver test:\n \n \n Swipe right to the Overflow Menu. VO announces the main\n landmark, menu label, and that the pop-up button is collapsed.\n \n \n Double tap to open the menu. VO announces the menu item label.\n \n \n Swipe right or left to navigate through the list of options and\n VO announces each menu item label.\n \n \n Double tap closes the menu. (Note: Space and Enter key also\n close the menu.)\n \n \n \n \n \n \n \n
\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/overflow-menu/accessibility.mdx"}}}}