{"id":1080,"date":"2025-04-18T13:00:00","date_gmt":"2025-04-18T13:00:00","guid":{"rendered":"http:\/\/www.diveintoaccessibility.com\/?p=1080"},"modified":"2025-04-30T10:20:52","modified_gmt":"2025-04-30T10:20:52","slug":"what-does-it-really-mean-for-a-site-to-be-keyboard-navigable","status":"publish","type":"post","link":"http:\/\/www.diveintoaccessibility.com\/index.php\/2025\/04\/18\/what-does-it-really-mean-for-a-site-to-be-keyboard-navigable\/","title":{"rendered":"What Does It Really Mean For A Site To Be Keyboard Navigable"},"content":{"rendered":"<p>              <title>What Does It Really Mean For A Site To Be Keyboard Navigable<\/title><\/p>\n<article>\n<header>\n<h1>What Does It Really Mean For A Site To Be Keyboard Navigable<\/h1>\n<address>Eleanor Hecks<\/address>\n<p>                  2025-04-18T13:00:00+00:00<br \/>\n                  2025-04-30T09:33:23+00:00<br \/>\n                <\/header>\n<p>Efficient navigation is vital for a functional website, but not everyone uses the internet the same way. While most visitors either scroll on mobile or click through with a mouse, many people only use their keyboards. Up to <a href=\"https:\/\/www.ama-assn.org\/delivering-care\/public-health\/what-doctors-wish-patients-knew-about-carpal-tunnel-syndrome\">10 million American adults<\/a> have carpal tunnel syndrome, which may cause pain when holding a mouse, and vision problems can make it difficult to follow a cursor. Consequently, you should keep your site <strong>keyboard navigable<\/strong> to achieve universal appeal and accessibility.<\/p>\n<h2 id=\"understanding-keyboard-navigation\">Understanding Keyboard Navigation<\/h2>\n<p>Keyboard navigation allows users to engage with your website solely through keyboard input. That includes using shortcuts and selecting elements with the <kbd>Tab<\/kbd> and <kbd>Enter<\/kbd> keys.<\/p>\n<p>There are <a href=\"https:\/\/www.geeksforgeeks.org\/computer-shortcut-keys\/\">more than 500 keyboard shortcuts<\/a> among operating systems and specific apps your audience may use. Standard ones for web navigation include <kbd>Ctrl<\/kbd> + <kbd>F<\/kbd> to find words or resources, <kbd>Shift<\/kbd> + <kbd>Arrow<\/kbd> to select text, and <kbd>Ctrl<\/kbd> + <kbd>Tab<\/kbd> to move between browser tabs. While these are largely the responsibilities of the software companies behind the specific browser or OS, you should still consider them.<\/p>\n<p><strong>Single-button navigation<\/strong> is another vital piece of keyboard navigability. Users may move between clickable items with the <kbd>Tab<\/kbd> and <kbd>Shift<\/kbd> keys, use the <kbd>Arrow<\/kbd> keys to scroll, press <kbd>Enter<\/kbd> or <kbd>Space<\/kbd> to \u201cclick\u201d a link, and exit pop-ups with <kbd>Esc<\/kbd>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/1-washington-post-homepage.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"417\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/1-washington-post-homepage.png\" alt=\"The Washington Post homepage\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/1-washington-post-homepage.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/www.washingtonpost.com\/\">Washington Post homepage<\/a> goes further. Pressing <kbd>Tab<\/kbd> highlights clickable elements as it should, but the first button press brings up a link to the site\u2019s accessibility statement first. Users can navigate past this, but including it highlights how the design understands how <strong>keyboard navigability is a matter of accessibility<\/strong>.<\/p>\n<p>You should understand how people may use these controls so you can build a site that facilitates them. These navigation options are generally standard, so any deviation or lack of functionality will stand out. Ensuring keyboard navigability, especially in terms of enabling these specific shortcuts and controls, will help you meet such expectations and avoid turning users away.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img\" src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\" alt=\"Feature Panel\" width=\"257\" height=\"355\" \/><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"why-keyboard-navigation-matters-in-web-design\">Why Keyboard Navigation Matters In Web Design<\/h2>\n<p>Keyboard navigability is crucial for a few reasons. Most notably, it makes your site more accessible. In the U.S. alone, <a href=\"https:\/\/www.cdc.gov\/media\/releases\/2024\/s0716-Adult-disability.html\">over one in four people<\/a> have a disability, and many such conditions affect technology use. For instance, motor impairments make it challenging for someone to use a standard mouse, and users with vision problems typically require keyboard and screen reader use.<\/p>\n<p>Beyond accounting for various usage needs, enabling a wider range of control methods makes a site convenient. Using a keyboard rather than a mouse is faster when it works as it should and may feel more comfortable. Considering how workers spend <a href=\"https:\/\/winfosoft.com\/about-us\/blogs-insights\/benefits-of-implementing-erp-system\/\">nearly a third of their workweek<\/a> looking for information, any obstacles to efficiency can be highly disruptive.<\/p>\n<p>Falling short in these areas may lead to legal complications. Regulations like the <strong>Americans with Disabilities Act<\/strong> necessitate tech accessibility. While the ADA <a href=\"https:\/\/www.congress.gov\/crs-product\/LSB10845\">has no binding rules<\/a> for what constitutes an accessible website, it specifically mentions keyboard navigation in its nonbinding guidance. Failing to support such functionality does not necessarily mean you\u2019ll face legal penalties, but courts can use these standards to inform their decision on whether your site is reasonably accessible.<\/p>\n<p>In 2023, Kitchenaid <a href=\"https:\/\/topclassactions.com\/disability-class-action-lawsuit\/whirlpool-class-action-alleges-kitchenaid-website-not-accessible-to-visually-impaired-blind-visitors\/\">faced a class-action lawsuit<\/a> for failing to meet such standards. Plaintiffs alleged that the company\u2019s site didn\u2019t support alt text or keyboard navigation, making it inaccessible to users with visual impairments. While the case ultimately settled out of court, it\u2019s a reminder of the <strong>potential legal and financial repercussions of overlooking inclusivity<\/strong>.<\/p>\n<p>Outside the law, an inaccessible site presents <strong>ethical concerns<\/strong>, as it shows preferential treatment for those who can use a mouse, even if that\u2019s unintentional. Even without legal action, public recognition of this bias may lead to a drop in visitors and a tainted public image.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"elements-of-a-keyboard-navigable-site\">Elements Of A Keyboard-Navigable Site<\/h2>\n<p>Thankfully, ensuring <strong>keyboard navigability<\/strong> is a straightforward user experience design practice. Because navigation is standard across OSes and browsers, keyboard-accessible sites employ a few consistent elements.<\/p>\n<h3 id=\"focus-indicators\">Focus Indicators<\/h3>\n<p>Web Accessibility In Mind states that sites <a href=\"https:\/\/webaim.org\/techniques\/keyboard\/\">must provide a visual indicator<\/a> of elements currently in focus when users press <kbd>Tab<\/kbd>. Focus indicators are typically a simple box around the highlighted icon.<\/p>\n<p>These are standard in CSS, but some designers hide them, so avoid using <code>outline:0<\/code> or <code>outline:none<\/code> to limit their visibility. You can also increase the contrast or change the indicator\u2019s color in CSS.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/3-cnn-homepage.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"412\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/3-cnn-homepage.png\" alt=\"CNN Breaking News homepage\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/3-cnn-homepage.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/www.cnn.com\/\">CNN Breaking News homepage<\/a> is a good example of <strong>a strong focus indicator<\/strong>. Pressing <kbd>Tab<\/kbd> immediately brings up the box, which is bold enough to see easily and even uses a white border when necessary to stand out against black or dark-colored site elements.<\/p>\n<h3 id=\"logical-tab-order\">Logical Tab Order<\/h3>\n<p>The order in which the focus indicator moves between elements also matters. Generally speaking, pressing the <kbd>Tab<\/kbd> key should move it from left to right and top to bottom &mdash; the same way people read in English.<\/p>\n<p>A few errors can stand in the way. Disabled buttons <a href=\"https:\/\/designerly.com\/disabled-buttons\/\">disrupt keyboard navigation flow<\/a> by skipping an element with no explanation or highlighting it without making it clickable. Similarly, an interface where icons don\u2019t fall in a predictable left-to-right, top-to-bottom order will make logical tab movement difficult.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/4-sutton-maddock-vehicle-rental-site.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"415\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/4-sutton-maddock-vehicle-rental-site.png\" alt=\"Sutton Maddock Vehicle Rental homepage\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/4-sutton-maddock-vehicle-rental-site.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/www.suttonmaddock.co.uk\/\">Sutton Maddock Vehicle Rental<\/a> site is a good example of what not to do. When you press <kbd>Tab<\/kbd>, the focus indicator jumps from \u201cContact\u201d to the Facebook link before going backward to the Twitter link. It starts at the right and moves left when it goes to the next line &mdash; the opposite order of what feels natural.<\/p>\n<h3 id=\"skip-navigation-links\">Skip Navigation Links<\/h3>\n<p>Skip links are also essential. These interactive elements let keyboard users jump to specific content without repeated keystrokes. Remember, these skips must be one of the first areas highlighted when you press <kbd>Tab<\/kbd> so they work as intended.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/5-hsbc-group-homepage.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"418\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/5-hsbc-group-homepage.png\" alt=\"HSBC Group homepage\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/5-hsbc-group-homepage.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/www.hsbc.com\/\">HSBC Group homepage<\/a> has a few skip navigation links. Pressing <kbd>Tab<\/kbd> pulls up three options, letting users quickly jump to whichever part of the site interests them.<\/p>\n<h3 id=\"keyboard-accessible-interactive-elements\">Keyboard-Accessible Interactive Elements<\/h3>\n<p>Finally, all interactive elements on a keyboard-navigable site should be accessible via <strong>keystrokes<\/strong>. Anything people can click on or drag with a cursor should also support navigation and interaction. Enabling this is as simple as letting users select all items with the <kbd>Tab<\/kbd> or <kbd>Arrow<\/kbd> keys and press them with <kbd>Space<\/kbd> or <kbd>Enter<\/kbd>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/6-arizona-state-university-keyboard-accessibility.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"414\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/6-arizona-state-university-keyboard-accessibility.png\" alt=\"Arizona State University page on keyboard accessibility\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/what-mean-site-be-keyboard-navigable\/6-arizona-state-university-keyboard-accessibility.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Appropriately, this <a href=\"https:\/\/accessibility.asu.edu\/articles\/keyboard\">Arizona State University page on keyboard accessibility<\/a> showcases this concept well. All drop-down menus are possible to open by navigating to them via <kbd>Tab<\/kbd> and pressing <kbd>Enter<\/kbd>, so users don\u2019t need a mouse to interact with them.<\/p>\n<h2 id=\"how-to-test-for-keyboard-navigability\">How to Test for Keyboard Navigability<\/h2>\n<p>After designing a keyboard-accessible UX, you should test it to ensure that it works properly. The easiest way to do this is to explore the site solely with your keyboard. The chart below outlines the criteria to look for when determining whether your site is legitimately keyboard navigable.<\/p>\n<table class=\"tablesaw break-out\">\n<thead>\n<tr>\n<th><\/th>\n<th>Keyboard Navigable<\/th>\n<th>Not Keyboard Navigable<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Clickable Elements<\/strong><\/td>\n<td>All elements are reachable through the keyboard and open when you press <kbd>Enter<\/kbd>.<\/td>\n<td>Only some elements are possible to reach through the keyboard. Some links may be broken or not open when you press <kbd>Enter<\/kbd>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Focus Indicators<\/strong><\/td>\n<td>Pressing <kbd>Tab<\/kbd>, <kbd>Space<\/kbd>, or <kbd>Enter<\/kbd> brings up a focus indicator that is easy to see in all browsers.<\/td>\n<td>Focus indicators may not appear when pressing all buttons. The box may be hard to see or only appear in some browsers.<\/td>\n<\/tr>\n<tr>\n<td><strong>Skip Navigation Links<\/strong><\/td>\n<td>Pressing <kbd>Tab<\/kbd> for the first time pulls up at least one skip link to take users to much-visited content or menus. Continuing to press <kbd>Tab<\/kbd> moves the focus indicator past these links to highlight elements on the page as normal.<\/td>\n<td>No skip links appear when pressing <kbd>Tab<\/kbd> for the first time. Alternatively, they appear after moving through all other elements. Skip links may not be functional.<\/td>\n<\/tr>\n<tr>\n<td><strong>Screen Reader Support<\/strong><\/td>\n<td>Screen readers can read each element when highlighted with the focus indicator.<\/td>\n<td>Some elements may not encourage any action from screen readers when highlighted.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The <strong>Web Content Accessibility Guidelines<\/strong> <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/keyboard.html\">outline two test rules<\/a> to verify keyboard navigability:<\/p>\n<ol>\n<li>The first ensures all interactive elements are accessible via the <kbd>Tab<\/kbd> key,<\/li>\n<li>The second checks for keyboard scroll functionality.<\/li>\n<\/ol>\n<p>Employ both standards to review your UX before making a site live.<\/p>\n<p>Typical issues include the inability to highlight elements with the <kbd>Tab<\/kbd> key or things that don\u2019t fall in a natural order. You can discover both problems by trying to access everything with your keyboard. However, you may prefer to conduct a navigability audit through a third party. Many private companies offer these services, but you can also <a href=\"https:\/\/www.boia.org\/\">use the Bureau of Internet Accessibility<\/a> for a basic WCAG audit.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"make-your-site-keyboard-navigable-today\">Make Your Site Keyboard Navigable Today<\/h2>\n<p>Keyboard navigability ensures you cater to all needs and preferences for an inclusive, accessible website design. While it\u2019s straightforward to implement, it\u2019s also easy to miss, so remember these principles when designing your UX and testing your site.<\/p>\n<p>WCAG provides several techniques you can employ to meet keyboard accessibility standards and enhance your users\u2019 experience:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/general\/G90\">Technique G90<\/a>, for keyboard-triggered event handlers<\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/general\/G202\">Technique G202<\/a>, for general keyboard functionality<\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/html\/H91\">Technique H91<\/a>, for forming controls and links in HTML<\/li>\n<\/ul>\n<p>Follow these guidelines and use WCAG\u2019s test rules to create an accessible site. Remember to re-check it every time you add elements or change your UX.<\/p>\n<p>Additionally, consider the following recommended reads to learn more about keyboards and their role in accessibility:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2022\/11\/guide-keyboard-accessibility-html-css-part1\/\">A Guide To Keyboard Accessibility: HTML And CSS (Part 1)<\/a>,\u201d Cristian D\u00edaz<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2022\/11\/guide-keyboard-accessibility-javascript-part2\/\">A Guide To Keyboard Accessibility: JavaScript (Part 2)<\/a>,\u201d Cristian D\u00edaz<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2020\/05\/complete-guide-mechanical-keyboards\/\">A Complete Guide To Mechanical Keyboards<\/a>,\u201d Ben Frain<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2019\/07\/ux-improvements-keyboard-accessibility\/\">UX Improvements For Keyboard Accessibility<\/a>,\u201d Vitaly Friedman<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/web-with-just-a-keyboard\/\">I Used The Web For A Day With Just A Keyboard<\/a>,\u201d Chris Ashton<\/li>\n<\/ul>\n<p>User-friendliness is an industry best practice that demonstrates your commitment to inclusivity for all. Even users without disabilities will appreciate intuitive, efficient keyboard navigation.<\/p>\n<div class=\"signature\">\n  <img src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>What Does It Really Mean For A Site To Be Keyboard Navigable What Does It Really Mean For A Site To Be Keyboard Navigable Eleanor [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/1080"}],"collection":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/comments?post=1080"}],"version-history":[{"count":1,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/1080\/revisions"}],"predecessor-version":[{"id":1081,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/1080\/revisions\/1081"}],"wp:attachment":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media?parent=1080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/categories?post=1080"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/tags?post=1080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}