{"componentChunkName":"component---src-pages-guidelines-accessibility-keyboard-mdx","path":"/guidelines/accessibility/keyboard/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"label":"IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.","title":"Accessibility","description":"IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.","tabs":["Overview","Color","Keyboard","Developers"]},"relativePagePath":"/guidelines/accessibility/keyboard.mdx","titleType":"prepend","MdxNode":{"id":"0d5f5e4e-ea37-5091-a715-c1b005592312","children":[],"parent":"247ef337-55bc-5670-8d14-af86c1c91f3b","internal":{"content":"---\nlabel: IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.\ntitle: Accessibility\ndescription: IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.\ntabs: ['Overview', 'Color', 'Keyboard', 'Developers']\n---\n\n## Keyboard accessibility\n\nKeyboard accessibility is helpful for users who rely on or prefer using a keyboard. Make sure to provide keyboard functionality to all interactive content. Common keyboard interactions include using the `tab` key to select different interactive elements on a page and using the `enter` key or the `spacebar` to activate an in-focus element.\n\n[IBM Checkpoint 2.1.1 Keyboard](https://www.ibm.com/able/guidelines/ci162/keyboard.html)\n\n### Focus indicators\n\nThe `tab` key navigates through all interactive elements on a page in the order they appear in the HTML document. A default visual indicator is provided by the web browser in use. The display is a border around the focused element. When an element is in focus, it can be further activated using the keyboard.\n\n[IBM Checkpoint 2.4.7 Focus Visible](https://www.ibm.com/able/guidelines/ci162/focus_visible.html)\n\n### Navigation order\n\nThe order in which interactive elements receive focus should be logical and predictable. Create the tab flow hierarchy by using the source code to arrange the keyboard navigation. A common flow might begin with the header, followed by the main navigation, then content navigation (from left to right, top to bottom), and end with the footer. Try to give all your users the same experience.\n\nUse natively-accessible elements in navigation to activate links, buttons, and form controls with a keyboard. Reinforce semantic HTML to convey intent and meaning instead of solely defining the look and feel of an element. Enhance with ARIA (Accessible Rich Internet Application) labels when necessary.\n\n[IBM Checkpoint 2.4.3 Focus Order](https://www.ibm.com/able/guidelines/ci162/focus_order.html)\n\n### Landmarks\n\nCommunicate to screen-reader users the different areas of the screen and what they do with landmarks and by using appropriate HTML5 labels. Screen reader users can then quickly jump to any area they want.\n\n[IBM Checkpoint 1.3.1 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html)\n","type":"Mdx","contentDigest":"1cabd0b6cc0add87c864e8ec7223f755","counter":1277,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Accessibility","label":"IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.","description":"IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.","tabs":["Overview","Color","Keyboard","Developers"]},"exports":{},"rawBody":"---\nlabel: IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.\ntitle: Accessibility\ndescription: IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.\ntabs: ['Overview', 'Color', 'Keyboard', 'Developers']\n---\n\n## Keyboard accessibility\n\nKeyboard accessibility is helpful for users who rely on or prefer using a keyboard. Make sure to provide keyboard functionality to all interactive content. Common keyboard interactions include using the `tab` key to select different interactive elements on a page and using the `enter` key or the `spacebar` to activate an in-focus element.\n\n[IBM Checkpoint 2.1.1 Keyboard](https://www.ibm.com/able/guidelines/ci162/keyboard.html)\n\n### Focus indicators\n\nThe `tab` key navigates through all interactive elements on a page in the order they appear in the HTML document. A default visual indicator is provided by the web browser in use. The display is a border around the focused element. When an element is in focus, it can be further activated using the keyboard.\n\n[IBM Checkpoint 2.4.7 Focus Visible](https://www.ibm.com/able/guidelines/ci162/focus_visible.html)\n\n### Navigation order\n\nThe order in which interactive elements receive focus should be logical and predictable. Create the tab flow hierarchy by using the source code to arrange the keyboard navigation. A common flow might begin with the header, followed by the main navigation, then content navigation (from left to right, top to bottom), and end with the footer. Try to give all your users the same experience.\n\nUse natively-accessible elements in navigation to activate links, buttons, and form controls with a keyboard. Reinforce semantic HTML to convey intent and meaning instead of solely defining the look and feel of an element. Enhance with ARIA (Accessible Rich Internet Application) labels when necessary.\n\n[IBM Checkpoint 2.4.3 Focus Order](https://www.ibm.com/able/guidelines/ci162/focus_order.html)\n\n### Landmarks\n\nCommunicate to screen-reader users the different areas of the screen and what they do with landmarks and by using appropriate HTML5 labels. Screen reader users can then quickly jump to any area they want.\n\n[IBM Checkpoint 1.3.1 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html)\n","fileAbsolutePath":"/tmp/35443907/src/pages/guidelines/accessibility/keyboard.mdx"}}}}