{"componentChunkName":"component---src-pages-components-button-accessibility-mdx","path":"/components/button/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Button","description":"Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/button/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"650048ba-e0c9-5101-acaa-1d3b1c642cb0","children":[],"parent":"54576e69-1893-5c27-bb6b-a8a87169be6f","internal":{"content":"---\ntitle: Button\ndescription: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```\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\nThe Carbon button components are used to trigger an action or event, such as submitting a form, opening a modal, canceling an action, or performing an add or delete operation. The button uses `tabindex=\"0\"` to ensure it is in the tab order. When the button has focus, `Space` key as well as `Enter` key activates the button. A button identified as disabled has `aria-disabled` set to true and is ignored in the tab order. By default, the button's accessible name is computed from any text content inside the button element.\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. The button can be activated using both the `Space` or `Enter` key.\n1. The button should have text or label that accurately describes the action of the button.\n1. If a description of the button's function is present, the button element should have an `aria-describedby` set to the ID of the element containing the description.\n1. After the button is activated ensure the focus is set correctly based on the type of action the button performs. See [W3C WAI-ARIA Authoring Practices Button Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#button) for a list of examples.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Button Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#button) 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  - [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  - [3.2.2 On Input](https://www.ibm.com/able/guidelines/ci162/on_input.html) (WCAG Success Criteria [3.2.2](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/consistent-behavior-unpredictable-change.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 (DAP) version 1.8.0.0 - IBM\n            Accessibility WCAG 2.1 Sept. 2019 Ruleset\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>DAP test:</strong>\n            <br />- No 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                Tab to the first button, VO announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button\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                Tab to the first button, VO announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button\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 67\n            <br />\n            - JAWS 19.1810.64\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the first button, JAWS announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - Chrome Version 73.0.3683.68 (Official Build) (64-bit)\n            <br />\n            - JAWS Version 19.1810.64\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the first button, JAWS announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - Chrome Version 73.0.3683.68 (Official Build) (64-bit)\n            <br />\n            - NVDA Version 2018.4.1\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>NVDA test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the first button, NVDA announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\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                Tab to the first button, VO announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### Android 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            - Android version 9 with Talkback\n            <br />\n            - Chrome version 72.0.3683.68 (Official Build) (64-bit)\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>Talkback test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the first button, Talkback announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","type":"Mdx","contentDigest":"15166e9f17b5aaa73e9746b9a7901128","counter":1449,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Button","description":"Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Button\ndescription: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```\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\nThe Carbon button components are used to trigger an action or event, such as submitting a form, opening a modal, canceling an action, or performing an add or delete operation. The button uses `tabindex=\"0\"` to ensure it is in the tab order. When the button has focus, `Space` key as well as `Enter` key activates the button. A button identified as disabled has `aria-disabled` set to true and is ignored in the tab order. By default, the button's accessible name is computed from any text content inside the button element.\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. The button can be activated using both the `Space` or `Enter` key.\n1. The button should have text or label that accurately describes the action of the button.\n1. If a description of the button's function is present, the button element should have an `aria-describedby` set to the ID of the element containing the description.\n1. After the button is activated ensure the focus is set correctly based on the type of action the button performs. See [W3C WAI-ARIA Authoring Practices Button Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#button) for a list of examples.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Button Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#button) 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  - [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  - [3.2.2 On Input](https://www.ibm.com/able/guidelines/ci162/on_input.html) (WCAG Success Criteria [3.2.2](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/consistent-behavior-unpredictable-change.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 (DAP) version 1.8.0.0 - IBM\n            Accessibility WCAG 2.1 Sept. 2019 Ruleset\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>DAP test:</strong>\n            <br />- No 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                Tab to the first button, VO announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button\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                Tab to the first button, VO announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button\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 67\n            <br />\n            - JAWS 19.1810.64\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the first button, JAWS announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - Chrome Version 73.0.3683.68 (Official Build) (64-bit)\n            <br />\n            - JAWS Version 19.1810.64\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>JAWS test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the first button, JAWS announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n        <StructuredListRow>\n          <StructuredListCell>\n            - Microsoft Windows 10\n            <br />\n            - Chrome Version 73.0.3683.68 (Official Build) (64-bit)\n            <br />\n            - NVDA Version 2018.4.1\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>NVDA test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the first button, NVDA announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\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                Tab to the first button, VO announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n\n### Android 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            - Android version 9 with Talkback\n            <br />\n            - Chrome version 72.0.3683.68 (Official Build) (64-bit)\n            <br />- Carbon React version 7.7.1\n          </StructuredListCell>\n          <StructuredListCell>\n            <strong>Talkback test:</strong>\n            <OrderedList>\n              <ListItem>\n                Tab to the first button, Talkback announces, \"The button label\"\n              </ListItem>\n              <ListItem>\n                Clicking the Enter or Space key activates the button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/button/accessibility.mdx"}}}}