{"componentChunkName":"component---src-pages-components-search-accessibility-mdx","path":"/components/search/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Search","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/search/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"2f0798e7-d334-52b6-bc02-ef6c3ff62126","children":[],"parent":"26da431c-079a-5c55-9817-0afd6718fb78","internal":{"content":"---\ntitle: Search\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>Accessibility testing</AnchorLink>\n</AnchorLinks>\n\n## How it works\n\nThe search Carbon component contains a collection of items and objects that,\nas a whole, combine to create search functionality to content on the website.\nWAI ARIA labels are used on each button so users of assistive technologies\nunderstand the purpose of the button.\n\n## Accessibility considerations\n\n1. Provide a search function to help users find content.\n1. If a page includes more than one search landmark, each search field should have a unique label.\n1. If you change any of the default labels, be sure the new label is clear and concise.\n\n## Resources\n\n- [W3C WAI-ARIA Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/search.html) covers the usage of ARIA landmarks on a search widget.\n- [IBM Accessibility Checklist Checkpoint](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html):\n  - [1.3.1 Information and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/content-structure-separation-programmatic.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](http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html))\n  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.2.1](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestone/).\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\n</Row>\n\n### MacOS screen reader tests\n\n<Row>\n  <Column>\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 Search Custom Button component. VO announces, \"Search\n                edit text main.\"\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Tab to the X button. VO announces, \"Clear search input button.\"\n              </ListItem>\n              <ListItem>\n                Press the Enter key and the text box is cleared.\n              </ListItem>\n              <ListItem>Tab back to the text box.</ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Tab to the X button and then Tab back. VO announces the\n                previously entered text.\n              </ListItem>\n              <ListItem>\n                Press Tab twice. VO announces the Search button.\n              </ListItem>\n              <ListItem>\n                Press Tab again. VO announces the Filter 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            - JAWS 19.1810.64\n            <br />\n            - Firefox version 67\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 Search Custom Button component. JAWS announces, \"Main\n                region. Search edit type and text.\"\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. JAWS announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Tab to the X button. JAWS announces, \"Clear search input\n                button.\"\n              </ListItem>\n              <ListItem>\n                Press the Enter key and the text box is cleared and focus moves\n                back to the text field.\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. JAWS announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Tab to the X button and then Tab back. JAWS announces the\n                previously entered text.\n              </ListItem>\n              <ListItem>\n                Press Tab twice. JAWS announces the Search button.\n              </ListItem>\n              <ListItem>\n                Press Tab again. JAWS announces the Filter 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                Swipe Right to the Search Custom Button component. VO announces,\n                \"Search Search text field. Double tap to edit. Insertion point\n                at end.\"\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the X button. VO announces, \"Clear search input\n                button.\"\n              </ListItem>\n              <ListItem>Double tap and the text box is cleared.</ListItem>\n              <ListItem>\n                Swipe Left to go back to the text box. Note: There is an open\n                issue of iOS because focus moves to browser address bar.\n              </ListItem>\n              <ListItem>\n                Navigate back to the Search input and enter text in the text\n                field. VO announces each letter as its entered.\n              </ListItem>\n              <ListItem>\n                Swipe Right twice. VO announces the Search button.\n              </ListItem>\n              <ListItem>\n                Swipe Right again. VO announces the Filter button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","type":"Mdx","contentDigest":"fe63eebdefe29cf9e092985a7e579fea","counter":1564,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Search","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Search\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>Accessibility testing</AnchorLink>\n</AnchorLinks>\n\n## How it works\n\nThe search Carbon component contains a collection of items and objects that,\nas a whole, combine to create search functionality to content on the website.\nWAI ARIA labels are used on each button so users of assistive technologies\nunderstand the purpose of the button.\n\n## Accessibility considerations\n\n1. Provide a search function to help users find content.\n1. If a page includes more than one search landmark, each search field should have a unique label.\n1. If you change any of the default labels, be sure the new label is clear and concise.\n\n## Resources\n\n- [W3C WAI-ARIA Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/search.html) covers the usage of ARIA landmarks on a search widget.\n- [IBM Accessibility Checklist Checkpoint](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html):\n  - [1.3.1 Information and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html) (WCAG Success Criteria [1.3.1](http://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/content-structure-separation-programmatic.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](http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html))\n  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html) (WCAG Success Criteria [4.2.1](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value))\n\n## Accessibility testing\n\nAccessibility issues are tracked in the [Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/milestone/).\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\n</Row>\n\n### MacOS screen reader tests\n\n<Row>\n  <Column>\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 Search Custom Button component. VO announces, \"Search\n                edit text main.\"\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Tab to the X button. VO announces, \"Clear search input button.\"\n              </ListItem>\n              <ListItem>\n                Press the Enter key and the text box is cleared.\n              </ListItem>\n              <ListItem>Tab back to the text box.</ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Tab to the X button and then Tab back. VO announces the\n                previously entered text.\n              </ListItem>\n              <ListItem>\n                Press Tab twice. VO announces the Search button.\n              </ListItem>\n              <ListItem>\n                Press Tab again. VO announces the Filter 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            - JAWS 19.1810.64\n            <br />\n            - Firefox version 67\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 Search Custom Button component. JAWS announces, \"Main\n                region. Search edit type and text.\"\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. JAWS announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Tab to the X button. JAWS announces, \"Clear search input\n                button.\"\n              </ListItem>\n              <ListItem>\n                Press the Enter key and the text box is cleared and focus moves\n                back to the text field.\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. JAWS announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Tab to the X button and then Tab back. JAWS announces the\n                previously entered text.\n              </ListItem>\n              <ListItem>\n                Press Tab twice. JAWS announces the Search button.\n              </ListItem>\n              <ListItem>\n                Press Tab again. JAWS announces the Filter 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                Swipe Right to the Search Custom Button component. VO announces,\n                \"Search Search text field. Double tap to edit. Insertion point\n                at end.\"\n              </ListItem>\n              <ListItem>\n                Enter text in the text field. VO announces each letter as its\n                entered.\n              </ListItem>\n              <ListItem>\n                Swipe Right to the X button. VO announces, \"Clear search input\n                button.\"\n              </ListItem>\n              <ListItem>Double tap and the text box is cleared.</ListItem>\n              <ListItem>\n                Swipe Left to go back to the text box. Note: There is an open\n                issue of iOS because focus moves to browser address bar.\n              </ListItem>\n              <ListItem>\n                Navigate back to the Search input and enter text in the text\n                field. VO announces each letter as its entered.\n              </ListItem>\n              <ListItem>\n                Swipe Right twice. VO announces the Search button.\n              </ListItem>\n              <ListItem>\n                Swipe Right again. VO announces the Filter button.\n              </ListItem>\n            </OrderedList>\n          </StructuredListCell>\n        </StructuredListRow>\n      </StructuredListBody>\n    </StructuredListWrapper>\n  </Column>\n</Row>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/search/accessibility.mdx"}}}}