CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Keyboard Accessibility</title> <link rel="shortcut icon" href="/media/favicon.ico"> <link rel="home" href="/"> <link rel="search" href="/search/"> <link rel="alternate" href="https://webaim.org/blog/feed" type="application/rss+xml" title="WebAIM Blog"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y41PF8WV9X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y41PF8WV9X'); </script> <link href="/styles/main.css" rel="stylesheet" type="text/css"> <link href="/styles/print.css" rel="stylesheet" type="text/css" media="print"> <script src="/media/scripts/jquery.js"></script> <script src="/media/scripts/main.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kameron:400,700' rel='stylesheet' type='text/css'> <link href="/styles/documents.css?ver=2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">  </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/articles.jpg)"> <header> <div id="skiptocontent"><a href="#maincontent">skip to main content</a></div> <h2><a href="/"><img src="/media/logo.png" width="315" height="83" alt="WebAIM - Web Accessibility In Mind"></a></h2> <nav> <h2 class="hidden">Main Navigation</h2> <ul> <li><a href="/services/">Services</a></li> <li class="current"><a href="/articles/">Articles</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/projects/">Projects</a></li> <li><a href="/community/">Community</a></li> </ul> </nav> <div id="search"> <form method="get" role="search" action="/search/" id="sitesearch"> <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p> </form> <p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p> <p class="training"><a href="/services/training">WebAIM Training</a></p> </div> </header> </div> <main id="maincontainer" class="clearfix"> <article id="maincontent"> <h1>Keyboard Accessibility</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/articles/">Articles</a> > Keyboard Accessibility</p> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li class="currentpage"><span class="hidden">Current page: </span>Page 1: Keyboard Accessibility <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#problems">Potential Problems</a></li> <li><a href="#testing">Keyboard Testing</a></li> </ol> </li> <li>Page 2: <a href="tabindex">Tabindex</a></li> <li>Page 3: <a href="accesskey">Accesskey</a></li> </ol> </nav> <div class="callout"> <div class="title">WebAIM Accessibility Testing Services</div> <p>The experts at WebAIM can audit your web site and provide a detailed report to help you remediate accessibility and WCAG compliance issues.</p> <p class="calloutlink"><a href="/services/evaluation">Learn more about WebAIM Evaluation Services</a> </div> <div class="section" id="intro"> <h2>Introduction</h2> <div class="important"> <div class="title">Important</div> <p>Ensure that all content can be accessed with the keyboard alone.</p> </div> <p>Keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities rely on a keyboard. Some people have tremors which don't allow for fine muscle control. Others have little or no use of their hands, or no hands at all. In addition to traditional keyboards, some users may use modified keyboards or other hardware that mimics the functionality of a keyboard. Blind users also typically use a keyboard for navigation. Users without disabilities may use a keyboard for navigation because of preference or efficiency.</p> </div> <div class="section" id="problems"> <h2>Potential Problems</h2> <p>There are many ways that a webpage can introduce difficulties for users who rely on a keyboard for navigation. Below are a few of the most common issues.</p> <div class="section" id="focus"> <h3>Focus indicators</h3> <p>A keyboard user typically uses the <span class="keycap">Tab</span> key to navigate through interactive elements on a web page—links, buttons, fields for inputting text, etc. When an item is tabbed to, it has keyboard "focus" and can be activated or manipulated with the keyboard. A sighted keyboard user must be provided with a <strong>visual</strong> indicator of the element that currently has keyboard focus. Focus indicators are provided automatically by web browsers. While their appearance varies based on the browser, the focus indicator is typically shown as a border or highlight (called an outline) around the focused element. These outlines can be hidden by applying <code>outline:0</code> or <code>outline:none</code> CSS to focusable elements.</p> <div class="important"> <div class="title">Important</div> <p><a href="/blog/plague-of-outline-0/">Avoid <code>outline:0</code> or <code>outline:none</code></a> or other styles that remove or limit visibility of keyboard focus indicators.</p> </div> <p>In addition to the default outline, you can use CSS to make the focus indicator more visually apparent and keyboard-friendly by ensuring the focus indicator is highly visible with sufficient contrast, and by adding a background color or other visual focus style to links and other interactive controls. The outline can be styled to match your site design but should be readily detected when navigating with the <span class="keycap">Tab</span> key.</p> </div> <div class="section" id="navigation"> <h3>Navigation order</h3> <p>As a keyboard user navigates through the page, the order in which interactive items receive keyboard focus is important. The default keyboard navigation order must be logical and intuitive. This generally means that it follows the visual flow of the page—left to right, top to bottom. For most pages this means header first, then main navigation, then page navigation (if present), and finally the footer. This navigation order (and also the reading order for screen readers) is determined by the web page's source code. For best results:</p> <ul> <li>Structure your underlying source code so that the reading/navigation order is correct.</li> <li>Then, if necessary, use CSS to control the visual presentation of the elements on your page.</li> <li>Do not use <code>tabindex</code> values of 1 or greater to change the default keyboard navigation order.</li> </ul> </div> <div class="section"> <h3>Items that should not receive keyboard focus</h3> <p>Links, buttons, and form controls are natively accessible to keyboard users, so should be used for interactivity whenever possible. Page elements that are not interactive to mouse or touch users should not be made keyboard focusable (such as by using <code>tabindex</code>). Making non-interactive elements keyboard navigable will cause confusion.</p> <div class="note"> <div class="title">Note</div> <p>Note: An <code><a></code> element is only keyboard accessible or presented to screen reader users as a link when it has a non-empty <code>href</code> attribute. <code><a></code> (without an <code>href</code> attribute) or <code><a href=""></code> (no <code>href</code> attribute value) should not be used for links.</p> </div> </div> </div> <div class="section"> <h3>Inaccessible custom widgets</h3> <p>If a native HTML element is not sufficient, then a custom-made control or widget might be necessary. All custom controls must still be accessible to keyboard users. You may need to use <code>tabindex="0"</code> to ensure an element can receive keyboard focus. <a href="/techniques/aria/">ARIA</a> may also be necessary to ensure that the control or widget is presented correctly to screen reader users. The <a href="https://www.w3.org/TR/wai-aria-practices-1.1/">ARIA Authoring Practices</a> outlines necessary keyboard interactions and ARIA coding necessary for many types of custom widgets. To be made highly accessible the following must occur:</p> <ul> <li>The interaction is presented in an intuitive and predictable way</li> <li>JavaScript event handlers work with a keyboard and a mouse. </li> <li>The interaction uses standardized keystrokes. </li> </ul> </div> <div class="section"> <h3>Lengthy navigation</h3> <p>Sighted mouse users are able to visually scan a web page and directly click on any item. Keyboard users must press the <span class="keycap">Tab</span> key or other navigation keys to navigate through the interactive elements that precede the item the user wants to activate. Tabbing through lengthy navigation may be particularly demanding for users with motor disabilities.</p> <p>Long lists of links or other navigable items may pose a burden for keyboard-only users. The following best practices can facilitate efficient keyboard navigation:</p> <ul> <li>Provide a <a href="/techniques/skipnav/">"skip to main content"</a> link on the page.</li> <li>Use a <a href="/techniques/semanticstructure/#headings">proper heading structure</a>.</li> <li>Provide <a href="/techniques/semanticstructure/#regions">regions or ARIA landmarks</a> (<code><main></code>, <code><nav></code>, etc.)</li> </ul> </div> </div> <div class="section" id="testing"> <h2>Keyboard Testing</h2> <p>Testing with a keyboard is an essential part of any accessibility evaluation.</p> <p>The following table includes many of the most common online interactions, the standard keystrokes for the interaction, and additional information on things to consider during testing.</p> <table> <tr> <th scope="col">Interaction </th> <th scope="col">Keystrokes</th> <th scope="col">Notes</th> </tr> <tr> <td>Navigate to interactive elements</td> <td><ul> <li><span class="keycap">Tab</span> - navigate forward</li> <li><span class="keycap">Shift</span> + <span class="keycap">Tab</span> - navigate backward</li> </ul> </td> <td> <ul> <li>Keyboard focus indicators must be present.</li> <li>Navigation order should be logical and intuitive.</li> </ul> </td> </tr> <tr> <td>Link</td> <td><ul> <li><span class="keycap">Enter</span> - activate the link</li> </ul></td> <td></td> </tr> <tr> <td>Button</td> <td><ul> <li><span class="keycap">Enter</span> or <span class="keycap">Spacebar</span> - activate the button</li> </ul></td> <td>Ensure elements with ARIA <code>role="button"</code> can be activated with both key commands.</td> </tr> <tr> <td>Checkbox</td> <td><ul> <li><span class="keycap">Spacebar</span> - check/uncheck a checkbox</li> </ul></td> <td>Users can typically select zero, one, or multiple options from group of checkboxes. </td> </tr> <tr> <td>Radio buttons</td> <td><ul> <li><span class="keycap">Spacebar</span> - select the focused option (if not selected)</li> <li><span class="keycap">↑</span>/<span class="keycap">↓</span> or <span class="keycap">←</span>/<span class="keycap">→</span> - navigate between options</li> <li><span class="keycap">Tab</span> - leave the group of radio buttons</li> </ul></td> <td>Users can select only one option from a group of radio buttons.</td> </tr> <tr> <td>Select (dropdown) menu</td> <td> <ul> <li><span class="keycap">↑</span>/<span class="keycap">↓</span> - navigate between options</li> <li><span class="keycap">Spacebar</span> - expand</li> <li><span class="keycap">Enter</span>/<span class="keycap">Esc</span> - select option and collapse</li> </ul> </td> <td>You can also filter or jump to options in the menu as you type letters.</td> </tr> <tr> <td>Autocomplete</td> <td> <ul> <li>Type to begin filtering</li> <li><span class="keycap">↑</span>/<span class="keycap">↓</span> - navigate to an option</li> <li><span class="keycap">Enter</span> - select an option</li> </ul> </td> <td></td> </tr> <tr> <td>Dialog</td> <td><ul> <li><span class="keycap">Esc</span> - close</li> </ul></td> <td> <ul> <li>Modal dialogs should maintain keyboard focus.</li> <li>Non-modal dialogs should close automatically when they lose focus.</li> <li>When a dialog closes, focus should usually return to the element that opened the dialog.</li> </ul> </td> </tr> <tr> <td>Slider</td> <td> <ul> <li><span class="keycap">↑</span>/<span class="keycap">↓</span> or <span class="keycap">←</span>/<span class="keycap">→</span> - increase or decrease slider value</li> <li><span class="keycap">Home</span>/<span class="keycap">End</span> - beginning or end</li> </ul> </td> <td> <ul> <li>For double-headed sliders (to set a range), <span class="keycap">Tab</span>/<span class="keycap">Shift</span> + <span class="keycap">Tab</span> should toggle between each end.</li> <li>In some sliders <span class="keycap">PageUp</span>/<span class="keycap">PageDown</span> can move by a larger increment (e.g., by 10%).</li> </ul> </td> </tr> <tr> <td>Menu bar</td> <td> <ul> <li><span class="keycap">↑</span>/<span class="keycap">↓</span> - previous/next menu option</li> <li><span class="keycap">Enter</span> - expand the menu (optional) and select an option.</li> <li><span class="keycap">←</span>/<span class="keycap">→</span> - expand/collapse submenu</li> </ul> </td> <td> <ul> <li>A menu bar dynamically changes content within an application. Links that utilize <span class="keycap">Tab</span>/<span class="keycap">Enter</span> are NOT menu bars.</li> </ul> </td> </tr> <tr> <td>Tab panel</td> <td> <ul> <li><span class="keycap">Tab</span> - once to navigate into the group of tabs and once to navigate out of the group of tabs</li> <li><span class="keycap">↑</span>/<span class="keycap">↓</span> or <span class="keycap">←</span>/<span class="keycap">→</span> - choose and activate previous/next tab.</li> </ul> </td> <td> <ul> <li>This is for 'application' tabs that dynamically change content within the tab panel. If a menu looks like a group of tabs, but is actually a group of links to different pages, <span class="keycap">Tab</span> and <span class="keycap">Enter</span> are more appropriate.</li> </ul> </td> </tr> <tr> <td>'Tree' menu</td> <td> <ul> <li><span class="keycap">↑</span>/<span class="keycap">↓</span> - navigate previous/next menu option</li> <li><span class="keycap">←</span>/<span class="keycap">→</span> - expand/collapse submenu, move up/down one level.</li> </ul> </td> <td></td> </tr> <tr> <td>Scroll </td> <td> <ul> <li><span class="keycap">↑</span>/<span class="keycap">↓</span> - scroll vertically</li> <li><span class="keycap">←</span>/<span class="keycap">→</span> - scroll horizontally</li> <li><span class="keycap">Spacebar</span>/<span class="keycap">Shift</span> + <span class="keycap">Spacebar</span> - scroll by page</li> </ul> </td> <td> <p>The space bar will, by default, scroll the page, but only if an interactive control that allows space bar input is not focused. Horizontal scrolling within the page should be minimized.</p> </td> </tr> </table> <div class="note"> <div class="title">Note</div> <p>The <a href="https://www.w3.org/TR/wai-aria-practices-1.1/">ARIA authoring practices document</a> provides additional information for these and other common interactions. Be sure to test keyboard accessibility on mobile devices—users with disabilities often utilize an external keyboard with phones and tablets.</p> </div> </div> <div id="nextpage"><a href="tabindex">Next</a></div> </article>  <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2022-09-26">Sep 26, 2022</time></div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/articles/motor/">Motor Disabilities</a></li> <li><a href="/techniques/javascript/">Accessible JavaScript</a></li> <li><a href="/techniques/aria/">Accessibility of Rich Internet Applications</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2024 WebAIM</h2> <p id="contact">Institute for Disability Research, Policy, and Practice<br> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li><li><a href="/blog/25-tips/">25 Accessibility Tips to Celebrate 25 Years</a></li><li><a href="/blog/celebrating-webaims-25th-anniversary/">Celebrating WebAIM's 25th Anniversary</a></li><li><a href="/blog/introducing-ncademi/">Introducing NCADEMI: The National Center on Accessible Digital Educational Materials & Instruction聽</a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright & Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>