{"componentChunkName":"component---src-pages-components-accordion-accessibility-mdx","path":"/components/accordion/accessibility/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Accordion","description":"The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/accordion/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"9f169c4b-9a84-590d-b61c-26a9a6a0604e","children":[],"parent":"719deb55-84df-5438-b6b4-9db6f738b13f","internal":{"content":"---\ntitle: Accordion\ndescription: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.\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\nThe accordion React Carbon component has been tested against the latest [W3C\nWeb Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success\ncriteria](https://www.w3.org/TR/WCAG21/) and violations have been identified\nas high priority issues. This document will be updated when these\naccessibility issues are resolved.\n\n\n\n\n How it works\n Accessibility considerations\n Resources\n Accessibility testing\n\n\n## How it works\n\nThe accordion Carbon component provides a vertically stacked layout for web content, commonly used to reduce scrolling. The accordion header is a button that is used to expand and collapse each accordion panel. Buttons are used so that the accordions are tab-able by keyboard users and accessible to screen readers. Tab key and Shift-Tab keys are used to navigate through each accordion header and all focusable elements in the accordion should be included in the page Tab sequence. The Enter or Space key expand and collapse each accordion panel.\n\nWAI-ARIA roles and states are used to ensure the component is accessible to people using assistive technologies. The accordion component is assigned the ARIA `role=\"presentation\"` because it is used to layout web content. When an accordion panel is collapsed the content is hidden so the ARIA state, `aria-expanded=\"false\"` advises users of assistive technologies that the accordion panel is not visible. When the accordion header is expanded the ARIA state changes to `aria-expanded=\"true\"` and the accordion panel content is displayed. Each accordion header contains an ARIA label, and the header buttons have a aria-control property set that points to the unique id of the panel it controls. When focus is on the Accordion header there is a prominent style change to the border as well as background of the accordion header.\n\n## Accessibility considerations\n\nThis component has been validated to meet the [WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) 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. Each accordion header must have a unique title (implemented via the label for the button) that clearly describes the accordion panel content. This is particularly helpful for users of assistive technologies so they have the necessary information to efficiently navigate the content without having to expand every section.\n1. Carbon components should be used to create the content that displays within each accordion panel.\n1. Avoid keyboard traps when adding components to the accordion panel. For example, the user expands an accordion, but is unable to tab to the next focusable element.\n1. Although the accordion component passes accessibility testing, content authors need to ensure the content that is added to the accordion is accessible. For example, if you add an image to the accordion header or panel you need to include alternative text to pass accessibility testing.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Accordion Design Pattern](https://www.w3.org/TR/wai-aria-practices/#accordion) 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.1.2 No Keyboard Trap](https://www.ibm.com/able/guidelines/ci162/no_keyboard_trap.html) (WCAG Success Criteria [2.1.2](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap))\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\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.2 with VoiceOver\n
\n - Chrome version 71.0.3578.98 (Official Build) (64-bit)\n
\n - Dynamic Assessment Plugin (DAP) version 1.8.0.0\n
- Carbon 10 - React and vanilla\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.2 with VoiceOver\n
\n - Chrome version 71.0.3578.98 (Official Build) (64-bit)\n
- Carbon 10 - React and vanilla\n \n \n VoiceOver(VO) Test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers. VO\n announces, expand/collapse, title, collapsed, button, the\n button's state (expanded or collapsed), list, 1 item. You are\n currently on a button...\n \n \n Press Control-Option-Space (or Space) to expand or collapse the\n accordion panel. VO announces expand/collapse title, the\n button's state (expanded or collapsed).\n \n \n With the second or third accordion header expanded, Press\n Control-Option-Right Arrow. VO announces, the accordion panel\n content and the line number in the list. 4. Press\n Control-Option-Left Arrow - VO announces reads the accordion\n header again.\n \n \n \n \n \n \n - macOS Mojave version 10.14.2 with VoiceOver\n
\n - Safari version 12.0.2\n
- Carbon 10 - React and vanilla\n \n \n VoiceOver(VO) test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers. VO\n announces, expand/collapse, title, collapsed, button, the\n button's state (expanded or collapsed), group.\n \n \n Press Control-Option-Space (or Space) to expand or collapse the\n accordion panel. VO announces expand/collapse title, the\n button's state (expanded or collapsed).\n \n \n With the second or third accordion header expanded, Press\n Control-Option-Right Arrow. VO announces, the accordion panel\n content and the line number in the list. Your are currently on a\n text area.\n \n \n Press Control-Option-Left Arrow - VO announces reads the\n accordion header again.\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 - JAWS 19.1903.47\n
\n - Firefox version 67\n
- Carbon React version 7.7.1\n \n \n JAWS test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers.\n JAWS announces, title, and expand/collapse status.\n \n \n Press the Enter or Space key on the title. JAWS announces expand\n or collapsed.\n \n \n Navigate the text using the Up and Down Arrow keys, when JAWS\n read the headers and associated text if expanded in a linear\n order.\n \n \n Please note that sometimes it takes a second for the text to\n update after a title is expanded. When pressing the down arrow\n key immediately after JAWS announces \"expanded\", JAWS jumps past\n the text and reads the next title.\n \n \n \n \n \n \n - Microsoft Windows 10\n
\n - JAWS 19.1903.47\n
\n - Chrome version 71.0.3578.98 (Official Build) (64-bit)\n
- Carbon React version 7.7.1\n \n \n JAWS test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers.\n JAWS announces, title, and expand/collapse status.\n \n \n Press the Enter or Space key on the title. JAWS announces expand\n or collapsed.\n \n \n Navigate the text using the Up and Down Arrow keys, when JAWS\n read the headers and associated text if expanded in a linear\n order.\n \n \n Please note that sometimes it takes a second for the text to\n update after a title is expanded. When pressing the down arrow\n key immediately after JAWS announces \"expanded\", JAWS jumps past\n the text and reads the next title.\n \n \n \n \n \n \n - Microsoft Windows 10\n
\n - NVDA version 2018.4.1\n
\n - Chrome version 72.0.3626.96 (Official Build) (64-bit)\n
- Carbon React version 7.7.1\n \n \n NVDA test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers.\n NVDA announces, title, and expand/collapse status.\n \n \n Press the Enter or Space key on the title. NVDA announces expand\n or collapsed.\n \n \n Navigate the text using the Up and Down Arrow keys, when JAWS\n read the headers and associated text if expanded in a linear\n order.\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 To navigate the accordion, swipe left or right, or use the Left\n or Right Arrow keys when quick nav mode is on. On each header,\n VoiceOver announces the header, and expanded/collapsed status.\n \n \n To expand or collapse the accordion, doubletap on the header, or\n press Control+Option+Space. VoiceOver announces, exapnaded or\n collapses.\n \n \n In some cases, VoiceOver also reads out the entire header, it\n seems to happen randomly, possibly have to do with the speed of\n the phone.\n \n \n Navigate the text by swiping left or right, or by pressing the\n Left or Right Arrow keys when quick navigation mode is on. After\n each title, when moving to the left or right, VoiceOver will\n read the text if it is expanded.\n \n \n \n \n \n \n \n\n\n### Android screen reader tests\n\n\n \n \n \n \n Environment \n Results\n \n \n \n \n \n - Android version 9 with Talkback\n
\n - Chrome version 72.0.3626.96 (Official Build) (64-bit)\n
- Carbon React version 7.7.1\n \n \n Talkback test:\n \n \n To navigate the accordion, swipe left or right, or use the\n Alt+Left or Right Arrow keys. On each header, TalkBack announces\n the header, and expanded/collapsed status.\n \n \n To expand or collapse the accordion, doubletap on the header, or\n press Alt+Enter. Talkback announces expanded or collapses.\n \n \n Navigate the text by swiping left or right, or by pressing the\n Left or Right Arrow keys. After each title, when moving to the\n left or right, Talkback will read the text if it is expanded.\n \n \n \n \n \n \n \n\n","type":"Mdx","contentDigest":"54a62304873a9473e7c5f5c593805b05","counter":1519,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Accordion","description":"The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Accordion\ndescription: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.\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\nThe accordion React Carbon component has been tested against the latest [W3C\nWeb Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success\ncriteria](https://www.w3.org/TR/WCAG21/) and violations have been identified\nas high priority issues. This document will be updated when these\naccessibility issues are resolved.\n\n\n\n\n How it works\n Accessibility considerations\n Resources\n Accessibility testing\n\n\n## How it works\n\nThe accordion Carbon component provides a vertically stacked layout for web content, commonly used to reduce scrolling. The accordion header is a button that is used to expand and collapse each accordion panel. Buttons are used so that the accordions are tab-able by keyboard users and accessible to screen readers. Tab key and Shift-Tab keys are used to navigate through each accordion header and all focusable elements in the accordion should be included in the page Tab sequence. The Enter or Space key expand and collapse each accordion panel.\n\nWAI-ARIA roles and states are used to ensure the component is accessible to people using assistive technologies. The accordion component is assigned the ARIA `role=\"presentation\"` because it is used to layout web content. When an accordion panel is collapsed the content is hidden so the ARIA state, `aria-expanded=\"false\"` advises users of assistive technologies that the accordion panel is not visible. When the accordion header is expanded the ARIA state changes to `aria-expanded=\"true\"` and the accordion panel content is displayed. Each accordion header contains an ARIA label, and the header buttons have a aria-control property set that points to the unique id of the panel it controls. When focus is on the Accordion header there is a prominent style change to the border as well as background of the accordion header.\n\n## Accessibility considerations\n\nThis component has been validated to meet the [WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) 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. Each accordion header must have a unique title (implemented via the label for the button) that clearly describes the accordion panel content. This is particularly helpful for users of assistive technologies so they have the necessary information to efficiently navigate the content without having to expand every section.\n1. Carbon components should be used to create the content that displays within each accordion panel.\n1. Avoid keyboard traps when adding components to the accordion panel. For example, the user expands an accordion, but is unable to tab to the next focusable element.\n1. Although the accordion component passes accessibility testing, content authors need to ensure the content that is added to the accordion is accessible. For example, if you add an image to the accordion header or panel you need to include alternative text to pass accessibility testing.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Accordion Design Pattern](https://www.w3.org/TR/wai-aria-practices/#accordion) 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.1.2 No Keyboard Trap](https://www.ibm.com/able/guidelines/ci162/no_keyboard_trap.html) (WCAG Success Criteria [2.1.2](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap))\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\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.2 with VoiceOver\n
\n - Chrome version 71.0.3578.98 (Official Build) (64-bit)\n
\n - Dynamic Assessment Plugin (DAP) version 1.8.0.0\n
- Carbon 10 - React and vanilla\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.2 with VoiceOver\n
\n - Chrome version 71.0.3578.98 (Official Build) (64-bit)\n
- Carbon 10 - React and vanilla\n \n \n VoiceOver(VO) Test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers. VO\n announces, expand/collapse, title, collapsed, button, the\n button's state (expanded or collapsed), list, 1 item. You are\n currently on a button...\n \n \n Press Control-Option-Space (or Space) to expand or collapse the\n accordion panel. VO announces expand/collapse title, the\n button's state (expanded or collapsed).\n \n \n With the second or third accordion header expanded, Press\n Control-Option-Right Arrow. VO announces, the accordion panel\n content and the line number in the list. 4. Press\n Control-Option-Left Arrow - VO announces reads the accordion\n header again.\n \n \n \n \n \n \n - macOS Mojave version 10.14.2 with VoiceOver\n
\n - Safari version 12.0.2\n
- Carbon 10 - React and vanilla\n \n \n VoiceOver(VO) test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers. VO\n announces, expand/collapse, title, collapsed, button, the\n button's state (expanded or collapsed), group.\n \n \n Press Control-Option-Space (or Space) to expand or collapse the\n accordion panel. VO announces expand/collapse title, the\n button's state (expanded or collapsed).\n \n \n With the second or third accordion header expanded, Press\n Control-Option-Right Arrow. VO announces, the accordion panel\n content and the line number in the list. Your are currently on a\n text area.\n \n \n Press Control-Option-Left Arrow - VO announces reads the\n accordion header again.\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 - JAWS 19.1903.47\n
\n - Firefox version 67\n
- Carbon React version 7.7.1\n \n \n JAWS test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers.\n JAWS announces, title, and expand/collapse status.\n \n \n Press the Enter or Space key on the title. JAWS announces expand\n or collapsed.\n \n \n Navigate the text using the Up and Down Arrow keys, when JAWS\n read the headers and associated text if expanded in a linear\n order.\n \n \n Please note that sometimes it takes a second for the text to\n update after a title is expanded. When pressing the down arrow\n key immediately after JAWS announces \"expanded\", JAWS jumps past\n the text and reads the next title.\n \n \n \n \n \n \n - Microsoft Windows 10\n
\n - JAWS 19.1903.47\n
\n - Chrome version 71.0.3578.98 (Official Build) (64-bit)\n
- Carbon React version 7.7.1\n \n \n JAWS test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers.\n JAWS announces, title, and expand/collapse status.\n \n \n Press the Enter or Space key on the title. JAWS announces expand\n or collapsed.\n \n \n Navigate the text using the Up and Down Arrow keys, when JAWS\n read the headers and associated text if expanded in a linear\n order.\n \n \n Please note that sometimes it takes a second for the text to\n update after a title is expanded. When pressing the down arrow\n key immediately after JAWS announces \"expanded\", JAWS jumps past\n the text and reads the next title.\n \n \n \n \n \n \n - Microsoft Windows 10\n
\n - NVDA version 2018.4.1\n
\n - Chrome version 72.0.3626.96 (Official Build) (64-bit)\n
- Carbon React version 7.7.1\n \n \n NVDA test:\n \n \n The Tab key and Shift-Tab navigate between accordion headers.\n NVDA announces, title, and expand/collapse status.\n \n \n Press the Enter or Space key on the title. NVDA announces expand\n or collapsed.\n \n \n Navigate the text using the Up and Down Arrow keys, when JAWS\n read the headers and associated text if expanded in a linear\n order.\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 To navigate the accordion, swipe left or right, or use the Left\n or Right Arrow keys when quick nav mode is on. On each header,\n VoiceOver announces the header, and expanded/collapsed status.\n \n \n To expand or collapse the accordion, doubletap on the header, or\n press Control+Option+Space. VoiceOver announces, exapnaded or\n collapses.\n \n \n In some cases, VoiceOver also reads out the entire header, it\n seems to happen randomly, possibly have to do with the speed of\n the phone.\n \n \n Navigate the text by swiping left or right, or by pressing the\n Left or Right Arrow keys when quick navigation mode is on. After\n each title, when moving to the left or right, VoiceOver will\n read the text if it is expanded.\n \n \n \n \n \n \n \n\n\n### Android screen reader tests\n\n\n \n \n \n \n Environment \n Results\n \n \n \n \n \n - Android version 9 with Talkback\n
\n - Chrome version 72.0.3626.96 (Official Build) (64-bit)\n
- Carbon React version 7.7.1\n \n \n Talkback test:\n \n \n To navigate the accordion, swipe left or right, or use the\n Alt+Left or Right Arrow keys. On each header, TalkBack announces\n the header, and expanded/collapsed status.\n \n \n To expand or collapse the accordion, doubletap on the header, or\n press Alt+Enter. Talkback announces expanded or collapses.\n \n \n Navigate the text by swiping left or right, or by pressing the\n Left or Right Arrow keys. After each title, when moving to the\n left or right, Talkback will read the text if it is expanded.\n \n \n \n \n \n \n \n\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/components/accordion/accessibility.mdx"}}}}