{"componentChunkName":"component---src-pages-components-select-accessibility-mdx","path":"/components/select/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Select","description":"Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/select/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"848615de-ebdb-5668-8100-de19842b2330","children":[],"parent":"36ac2ae4-779f-5122-9e7f-b2a6aeebf353","internal":{"content":"---\ntitle: Select\ndescription: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.\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 select Carbon component is a form input field, where a user is submitting data and chooses a single option from a list of options. The label element is used to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the `for` attribute. The value of the `for` attribute must be the same as the value of the `id` attribute of the form control. Also note that the `id` attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the Web page.\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. Avoid very long option names to facilitate understandability and perceivability.\n2. Do not use the same word or phrase at the beginning of a set of options.\n3. Use a unique id for each option.\n4. If the select field is required include the [aria-required property](https://www.w3.org/TR/WCAG20-TECHS/ARIA2.html) and indicate that it is a required field and use the validation message for input errors.\n\n## Resources\n\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](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))\n - [3.2.2 On Input](https://www.ibm.com/able/guidelines/ci162/on_input.html) (WCAG Success Criteria [3.2.2](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-programmatic))\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/WAI/WCAG21/Understanding/error-identification))\n - [3.3.2 Labels or Instructions](https://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html) (WCAG Success Criteria [3.3.2](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#minimize-error-cues))\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 Control-Option-Right arrow to the \"Select\" text. VO announces\n the label and that it is a text element.\n \n \n Control-Option-Right arrow to the \"Optional helper text\". VO\n announces the label and that it is a text element.\n \n \n Control-Option-Right arrow to the select box. VO announces the\n label, \"Choose an Option\" and that it is a select pop-up button.\n \n \n Press the Space key. VO announces that you are on a dimmed menu\n item.\n \n \n Navigate up and down the menu using the arrow keys. VO announces\n each menu item.\n \n Press the Space key to make a selection.\n \n Tab away from the select box and then back. VO announces the\n selected option.\n \n \n Press Space to open the menu and then press Esc to close the\n 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 - JAWS 18\n
\n - Firefox version 68\n
- Carbon React version 7.7.1\n \n \n JAWS test:\n \n \n Press Alt-Down arrow . JAWS announces the text, \"Select,\n optional helper text\".\n \n \n Tab to the select box. JAWS announces the main region, the\n select combo box and and that the arrow keys should be used to\n make a selection.\n \n \n Use the Up and Down arrow keys to navigate through the list.\n JAWS announces each option.\n \n \n Tab away from the select box and then back. JAWS announces the\n selected option.\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, VO announces \"Select main landmark\".\n \n \n Swipe right, VO announces \"Optional helper text\".\n \n \n Swipe right to navigate to the select box. VO announces \"Select.\n Choose an option pop-up button, double tap to activate the\n picker.\"\n \n \n Double tap to open the menu, VO does not announce anything.\n (Note: There is an open issue for VoiceOver on iOS.)\n \n \n \n \n \n \n \n
\n","type":"Mdx","contentDigest":"2ee1f464baf644ab7e717ff026ca803d","counter":1569,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Select","description":"Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Select\ndescription: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.\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 select Carbon component is a form input field, where a user is submitting data and chooses a single option from a list of options. The label element is used to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the `for` attribute. The value of the `for` attribute must be the same as the value of the `id` attribute of the form control. Also note that the `id` attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the Web page.\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. Avoid very long option names to facilitate understandability and perceivability.\n2. Do not use the same word or phrase at the beginning of a set of options.\n3. Use a unique id for each option.\n4. If the select field is required include the [aria-required property](https://www.w3.org/TR/WCAG20-TECHS/ARIA2.html) and indicate that it is a required field and use the validation message for input errors.\n\n## Resources\n\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](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))\n - [3.2.2 On Input](https://www.ibm.com/able/guidelines/ci162/on_input.html) (WCAG Success Criteria [3.2.2](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-programmatic))\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/WAI/WCAG21/Understanding/error-identification))\n - [3.3.2 Labels or Instructions](https://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html) (WCAG Success Criteria [3.3.2](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#minimize-error-cues))\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 Control-Option-Right arrow to the \"Select\" text. VO announces\n the label and that it is a text element.\n \n \n Control-Option-Right arrow to the \"Optional helper text\". VO\n announces the label and that it is a text element.\n \n \n Control-Option-Right arrow to the select box. VO announces the\n label, \"Choose an Option\" and that it is a select pop-up button.\n \n \n Press the Space key. VO announces that you are on a dimmed menu\n item.\n \n \n Navigate up and down the menu using the arrow keys. VO announces\n each menu item.\n \n Press the Space key to make a selection.\n \n Tab away from the select box and then back. VO announces the\n selected option.\n \n \n Press Space to open the menu and then press Esc to close the\n 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 - JAWS 18\n
\n - Firefox version 68\n
- Carbon React version 7.7.1\n \n \n JAWS test:\n \n \n Press Alt-Down arrow . JAWS announces the text, \"Select,\n optional helper text\".\n \n \n Tab to the select box. JAWS announces the main region, the\n select combo box and and that the arrow keys should be used to\n make a selection.\n \n \n Use the Up and Down arrow keys to navigate through the list.\n JAWS announces each option.\n \n \n Tab away from the select box and then back. JAWS announces the\n selected option.\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, VO announces \"Select main landmark\".\n \n \n Swipe right, VO announces \"Optional helper text\".\n \n \n Swipe right to navigate to the select box. VO announces \"Select.\n Choose an option pop-up button, double tap to activate the\n picker.\"\n \n \n Double tap to open the menu, VO does not announce anything.\n (Note: There is an open issue for VoiceOver on iOS.)\n \n \n \n \n \n \n \n
\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/select/accessibility.mdx"}}}}