Keyboard Navigation Standards

Keyboard accessibility is one of the most fundamental accessibility requirements - and one of the easiest to test yourself. If someone can do it with a mouse, they need to be able to do it with a keyboard. This affects millions of people who rely on keyboard navigation - people with motor disabilities, screen reader users, people using switch devices, and even power users who prefer keyboard shortcuts. Start simple: disconnect your mouse and try navigating your most important user flows with just your keyboard. If you get stuck, your users will too. #Accessibility If you prefer your content as text, read on: WCAG 2.1.1: Keyboard Accessibility What is it? If someone can do it with a mouse, they must be able to do it with a keyboard. Who It Affects This isn't niche. People who rely on keyboard-only navigation include those: • with motor disabilities • using switch devices or other assistive tech • with repetitive strain injuries • who use screen readers • power users who prefer keyboard shortcuts Common Failures • Custom dropdowns that only open on hover • Modal dialogs that mishandle keyboard focus • Clickable divs with no keyboard access • Carousels with no keyboard controls • Form fields you can't tab through • Interactive maps that require dragging How to Fix It • Use semantic HTML (button, a, input) • Test everything with the keyboard • Manage focus in modals and dynamic content • Provide keyboard alternatives for drag/hover interactions • Don't remove keyboard focus styles with CSS How to Test • Disconnect your mouse (or don't touch your trackpad) • Use Tab to move forward, Shift+Tab to move back • Use Enter or Space to activate buttons, Enter for links • Try to complete every task on the page If you get stuck, your users will too. Why This Matters Keyboard accessibility isn't a nice-to-have. It's a fundamental requirement that affects millions of people. And it's one of the easiest things to test yourself. Start with your most important user flows. Test them with only a keyboard. Fix what's broken. Read the full breakdown: https://bit.ly/48KHUun Test it with AAArdvark's Visual Mode: a20y.com

Many people use only their keyboard to interact with the web. Some use it out of necessity, others prefer it for efficiency. For example, screen readers are controlled using a keyboard. In other cases, a person might use the keyboard instead of a mouse because of a hand injury, while someone else might enjoy zipping through a page or app with keyboard shortcuts. Keyboard navigation often means using TAB, Enter and arrow keys, plus other keyboard shortcuts depending on the element, app or your settings. Often times people (including screen reader users) are using a standard keyboard. Sometimes, a person might use an alternative keyboard or hardware that simulates a keyboard. No matter the reason or device, keyboard accessibility is one of the most important aspects of digital accessibility! I often recommend it as a team's starting or focus point because it usually impacts the largest amount of users and presents the most critical barriers. Here are some top keyboard accessibility tips: 1. If you can click it, you can trigger it with keyboard If an element is interactive (you can click on it to make something happen like a link, button or input field), you need to be able to trigger it with just a keyboard, too. Think about how easy it is to fill in a form when you can hit tab to get to each field. For some users, this is the only way they can interact with your web content. 2. You can always see where you are This is called the focus. As a person tabs through a page or app, they should always be able to see where they are. Like all elements, the focus should also have good colour contrast. 3. When you tab, the order of elements makes sense You would get confused if the text, images, links and headings on a page were all jumbled up! If keyboard is the only way for a user to navigate through a page or app, the order they move in should be logical. 4. Standard keyboard behaviours are used over custom ones Lots of elements have keyboard navigation built into them. Many of them may even have keyboard behaviours you didn't know about (did you know links and buttons are triggered by different keyboard strokes? Same is true for checkboxes and radio buttons). Instead of throwing a bunch of tabindexes into your code, use native HTML elements to get keyboard navigation for free. The best part about keyboard accessibility: Anyone can test it! Pull up your webpage or app, and use your standard keyboard to navigate and interact with your content. How many of these tips have been included?

Tip for Instructional Designers: Design Learning Activities to Be Fully Operable by Keyboard. When creating digital content, quizzes, or interactive components, ensure that users can navigate and operate all functionality using only the keyboard. Many learners rely entirely on the keyboard due to motor disabilities or because they use assistive technologies like screen readers. If an activity can’t be completed without a mouse, it’s not accessible and needs revision. How to Test Basic Navigation: Tab: Move forward through interactive elements (links, buttons, form fields). Shift + Tab: Move backward through interactive elements. Enter: Activate a link or button. Spacebar: Activate a button or toggle a checkbox. How to Test Form Controls: Checkbox: Press the Spacebar to check or uncheck. Radio Buttons: Use Arrow keys (Up/Down or Left/Right) to move between options. Press Spacebar to select an option. Select Menus (Dropdowns): Use Arrow keys to navigate options. Press Spacebar to open the menu. Use Enter or Esc to select an option and close the menu. Dialogs and Modals: Press Esc to close the dialog. Focus should be trapped inside the modal while it’s open. When closed, focus should return to the element that triggered the modal. Important Notes: Always ensure that a visible focus indicator (like an outline or highlight) shows which element is currently active. Make sure all interactive elements are operable with the keyboard alone. If a learner can’t complete the task using just the keyboard, the activity needs to be revised to meet accessibility requirements. Learn more in the comments.

#WebAccessibility A very common issue with keyboard accessibility that I encounter on too many websites… The problem? Imaging you have a navbar with a couple of links that opens some submenus with more links, or you have multiple lists of items where each item is a clickable button/link/card. (see video below) Now let’s say the user wants to go to a link & click on it, but he is using only his keyboard. The default behaviour is that each tab key press will move the focus one item at a time, in a linear fashion (according to their order in the page). The focus usually starts at the first focusable item on the page, & goes from there. So the user will have to tab through each link/button in each submenu even though he might not need any links from them. This is clearly a very bad & frustrating user experience!! (Try doing it yourself a couple of times & you'll see) The solution? There’s a very cool technique called Roving Tab Index that directly addresses this problem. Here's how it works: When a complex component like a dropdown menu or a data table gains focus, initially the first item (link or cell) becomes focused, having a tabindex of "0". All other items are given a tabindex of "-1", making them unreachable by using the tab key. As the user navigates within the component via arrow keys, the tabindex values are programmatically updated. The previously focused item receives a tabindex of "-1", and the new focused item gets a tabindex of "0". This effectively breaks the linear tabbing flow inside the component, allowing the user to jump in and out of the complex component seamlessly. For example, in the case of a submenu in a navbar, once the focus is inside the submenu, the user can use the arrow keys to move between the links, but when he presses the tab key, the focus immediately jumps out of the submenu and goes to the next link (or submenu) in the navbar. By using the Roving Tab Index technique, you make keyboard navigation within complex components straightforward and efficient, vastly improving the user interface's accessibility and usability. You can implement it yourself or you can use some npm library that does that for you. I’ve created a simple implementation & posted it on CodePen if you want to play around with it or see how the code could look, I’ll leave its link in the first comment below. 👇 & that’s all folks. If you found this useful, leave a 👍 & Until next time 👋

What if I told you that keyboard accessibility - one of the oldest WCAG rules - is still one of the most broken? Here’s the data: → In the 2025 WebAIM Million Report, nearly 95% of home pages have detectable WCAG 2 failures, even though keyboard operability is mandatory since WCAG 2.0 back in 1999: https://lnkd.in/e_uehJ3b → According to accessibility surveys, 25% of screen reader users listed "lack of keyboard accessibility" among their top three web frustrations: https://lnkd.in/eAVY3vMY → The WCAG guideline for no keyboard traps (SC 2.1.2) states clearly that keyboard users must always be able to move focus away from any component, yet trapping still happens too often: https://lnkd.in/ehTD6cin And here’s my personal truth: even as someone who works in accessibility daily, I often feel frustrated checking keyboard accessibility. The check is complex, as one need to remember special key combinations for each case, to remember about both the visual part of the focus and also the right tab order, the problem might be also with a searching engine - sometimes the code works in Chrome but not in Firefox... If me, as a tester, feel lost and exhausted many times, what must real users feel? So I built a guide - real, practical, and people-first. Here is a link to a full article that I wrote for a11yblog.com : https://lnkd.in/exk7Tijk Core rules: · Links = Tab + Enter · Buttons = Tab + both Space & Enter · Checkbox = Tab + Space · Radio buttons = Tab to group, arrows to move, Space to select · Selects = Tab, arrows to navigate, Enter or Space to open/select · Modals = trapped focus + Esc to exit Next time you build or test a site, put your mouse aside for 5 minutes. Just use Tab (and arrow keys). Can you still do what you need to? #WebAccessibility #A11y #InclusiveDesign #KeyboardAccessibility #UX #AccessibilityMatters #DigitalInclusion