{"componentChunkName":"component---src-pages-components-tile-accessibility-mdx","path":"/components/tile/accessibility/","result":{"pageContext":{"frontmatter":{"title":"Tile","description":"Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/tile/accessibility.mdx","titleType":"prepend","MdxNode":{"id":"3c6c726b-fb6a-5cf4-9368-7425a714daf0","children":[],"parent":"1d66d62e-ef1c-58e8-8f99-259a51e0b4c3","internal":{"content":"---\ntitle: Tile\ndescription: Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.\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 tile React Carbon component has been tested against the latest\n[W3C Web 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 Accessibility considerations\n Resources\n Accessibility testing\n\n\n## Accessibility considerations\n\n1. Labels should be clear and concise.\n2. Users should be warned if selecting a tile will cause a change in context.\n3. Carbon components should be used to create the content that displays within each tile.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Checkbox Design Pattern](https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html) covers the usage of ARIA names, state and roles, as well as the expected keyboard intractions.\n- [W3C WAI-ARIA: Using aria-expanded to indicate the state of a collapsible element](https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element)\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 - [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\nAutomated, manual and screen reader accessibility verification test has been performed on the tile React Carbon component. [WCAG 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/) issues have been identified and the list of open accessibility violations is available in the Carbon Component GitHub repository.\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","type":"Mdx","contentDigest":"5282604172919e1ac78f5a6c15cfbf8e","counter":1590,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Tile","description":"Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Tile\ndescription: Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more.\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 tile React Carbon component has been tested against the latest\n[W3C Web 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 Accessibility considerations\n Resources\n Accessibility testing\n\n\n## Accessibility considerations\n\n1. Labels should be clear and concise.\n2. Users should be warned if selecting a tile will cause a change in context.\n3. Carbon components should be used to create the content that displays within each tile.\n\n## Resources\n\n- [W3C WAI-ARIA Authoring Practices Checkbox Design Pattern](https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html) covers the usage of ARIA names, state and roles, as well as the expected keyboard intractions.\n- [W3C WAI-ARIA: Using aria-expanded to indicate the state of a collapsible element](https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element)\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 - [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\nAutomated, manual and screen reader accessibility verification test has been performed on the tile React Carbon component. [WCAG 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/) issues have been identified and the list of open accessibility violations is available in the Carbon Component GitHub repository.\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","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/tile/accessibility.mdx"}}}}