Improving Keyboard Navigation on Websites

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.

Do you want to REALLY test your accessibility? Press the tab button. ... Follow the focus indicator, which is that little dotted selection box that tells a keyboard user where they are in your interface. But if it disappears after 3 presses, you've got yourself a structural problem that no automated audit on Earth is going to catch, much less actually fix. Focus management is one of those invisible architecture decisions really separates actual usability from ones that barely passed a Lighthouse scan. What most teams get wrong is that focus management isn’t just adding "tabindex" to a bunch of stuff and calling it done. It’s about controlling the entire flow. → Where does focus land on page load? → What happens when a modal opens? → When that modal closes, does focus return to the trigger element—or does it reset to the top of the page? → Is there a skip link? (And does it actually work?) According to WCAG 2.4.3, focus order is a Level A criterion. The means it should be the absolute minimum baseline. Yet most products fail it, especially when there's dynamic content in frame. → Only 13.7% of the top million homepages have a skip-to-content link, but 10% of them are broken, targeting the wrong element or hidden from keyboard users entirely (via WebAIM). → Interactive elements like menus and dialog windows rank among the most problematic items reported by screen reader users. → Automated tools catch roughly 30–40% of WCAG failures. The real cost isn’t even just legal risk—it’s the 61 million U.S. adults living with a disability (via CDC). And also every power user, developer who prefers keyboard shortcuts, person with a temporary injury, user with a dead trackpad hitting a wall in your interface and bouncing. Well, here's the solution: ☑ Load focus on the skip link—not the logo or nav or wherever the browser feels like putting it. ☑ Follow DOM order—if your visual layout doesn’t match your source order, keyboard users navigate a different product than mouse users. ☑ Trap focus inside modals—don't just hope the browser’s native dialog element figures it out. ☑ Return focus to the trigger element on close. ☑ Keep your focus indicators visible. Focus management is the difference between an interface that flows and one that fractures. You won’t see it break in a Figma file. You won’t catch it in a screenshot review. You’ll only find it by unplugging your mouse and navigating your own product. When was the last time you did that? (You can be honest, this is a safe space.) #accessibility #uxdesign #designsystems #inclusivedesign ⸻ 👋🏼 I’m Dane—a designer creator + mentor. 🙃 Rated PG-13 for hard facts + adult language. ❤️ If you liked this, a 👍🏼 would be rad—& sharing it would be legendary. 💾 Save this for later if you found it helpful. ➕ Follow for more of my shenannies all up in yo' feed.

#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 👋

Stop designing for clicks - start designing for everyone!! As an accessibility advocate, nothing frustrates me more than interactive elements that only respond to mouse clicks. If it works on onclick but not on keypress, it doesn’t work. Period. This is a critical failure under WCAG 2.1.1 (Keyboard) and a massive barrier for many users. Here’s what every designer and developer needs to remember: Use semantic elements: A <button> or <a> comes with built‑in keyboard and focus handling. Don’t substitute them with <div> tags and custom JavaScript without recreating that functionality. Make it focusable: Ensure any interactive element can receive focus via the Tab key. Use tabindex="0" thoughtfully when creating custom buttons with <div role="button"...>, and never trap focus. Bind keyboard events: If you must attach custom events, listen for Enter and Space keys (when appropriate) as well as clicks. The action should be identical regardless of the input method. Test without a mouse: Navigate your site using only the keyboard. If you can’t activate something or lose track of focus, neither can your users. “Click here” isn’t enough. Accessibility is about inclusion, and inclusive design means everyone can interact with your content... with a mouse, a keyboard, a switch device, or a voice command. Let’s raise the bar and build experiences that work for all. For more info, check the Understand doc: https://lnkd.in/gqTRixrB #A11y #Keyboard #Accessibility #MouseClicks

Use Skip Links For Accessibility. What they are and why they matter for better accessibility and screen reader UX ↓ 🤔 Keyboard users struggle with long, complex pages. 🤔 It can take minutes to tab through to relevant content. ✅ “Skip links” help people bypass repetitive sections. ✅ They can be visible at all times (e.g. top of the page). ✅ But must be visible when a user hits “Tab” first time. 🤔 30.2% of screen reader users use skip links frequently. ✅ First, find main content areas that users navigate to. ✅ Use “Skip to main content” to hint where they jump to. ✅ Consider keyboard shortcuts to jump to critical areas. ✅ You still need HTML landmarks for accessible navigation. Many products have complex navigation, filters and language selectors that usually come before any useful content on the page. It’s manageable for people who can visually skim the page and navigate with a mouse. In fact, that’s why people often scroll down immediately after entering a page. But for people who rely on keyboard or use a screen reader, it’s a slow, repetitive and frustrating experience. With a keyboard alone, you need to tab through every individual link, one by one, before you get to the content of the page. And it’s especially disorienting for people who have poor vision. A simple way to fix it is to design “skip links”. They allow people to skip repetitive content and navigate directly to the content they want to interact with. To do that, we place a skip link as the first focusable element on the page, and make it visible on keyboard focus — when a user hits the “Tab” key for the first time. In fact, WCAG 2.1 (referenced by European Accessibility Act) requires a way to bypass repetitive content on a page. It can either be always visible, or become visible when it receives keyboard focus. “Skip links” achieve just that. They are very underrated, but very helpful — for everyone, but especially for people who rely on them every day to navigate complex pages faster. Skip Links in Design Systems: Axa: https://lnkd.in/eCp_Wi8b Gov.uk: https://lnkd.in/eFR94GS8 Red Hat: https://lnkd.in/enyADa_T Orange: https://lnkd.in/e895KaeK Scottish Government: https://lnkd.in/ekH78P5V Skyscanner: https://lnkd.in/eUhJ2Sb7 Useful resources: A Practical Guide To Skip Links, by Darren Lee https://lnkd.in/e-Weqsxs Web Accessibility Guide: Skip Links https://lnkd.in/e6tSPmPA How To Implement Skip Links ↳ https://lnkd.in/eK6a7UDZ ↳ https://lnkd.in/efcJJgm6 Keyboard-Only Navigation, by Marieke McCloskey https://lnkd.in/eXKtBsNU #ux #accessibility

I have a quick accessibility tip! It's really easy to test out keyboard accessibility with a keyboard! I've heard some people think it's a specialized skill, but it's pretty easy to start. Start with your cursor in the address bar and press the Tab key. If you’re on the browser version of LinkedIn you can try it here! Depending on your browser you might need to tab a couple of times before you get down to the actual page. What happens when you get on the page? You should be able to see where you are with a focus indicator. A focus indicator is an outline that goes around the element that has focus (the spot where you are on the page). The focus should go to each interactive element on the page. That means things like links, buttons, and navigation elements should get focus, but things like paragraphs and headings shouldn't. You’ll need to use the arrows instead of the Tab key to get to each option in things like groups of radio buttons. It's important to check things like cookie consent banners and chatbots that sit on top of the page. Can you get to them with a keyboard? Can you open and close them? They might be at the end of the focus order. That could be okay if they're not really covering other content, but frustrating if they are. You might need to go backward in the focus order (using Shift + Tab) to close them so you can interact with the page. If you have navigation dropdowns you should check to make sure you can get to all the stuff in them. And you should also check to make sure the Enter key lets you do things like open links and activate buttons. You can do this on any website, and it's a great thing to do on the website(s) you work on. Sometimes designers think this doesn't have anything to do with them, but it does! You can use your understanding of focus order (the order things get focus on the page) when you're creating something new. It will make things easier for devs and the people who will use what you design. Lots of people use a keyboard instead of a mouse - some because they need to (like they’re blind or have a repetitive stress injury) and some because they want to (power users or people with fancy gaming keyboards who want to use them all the time). Making sure your site works well with a keyboard will help more people be able to use it, which is what you want! Here are some resources to learn more about keyboard accessibility: - Keyboard Accessibility from WebAIM - https://lnkd.in/e4PPCVbv - Keyboard Compatibility from W3C - https://lnkd.in/ePEUBdXB - Keyboard accessible from Mozilla - https://lnkd.in/eTtb9d6g 

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

Tips for Making Your Website Accessible(a11y): Accessibility means everyone can use your product, regardless of their abilities. Focus on these essentials: ▪️ Use semantic HTML elements (<button>, <nav>, <main>) instead of divs for everything because screen readers rely on proper structure. ▪️ Add descriptive alt text to images that convey meaning, use empty alt (alt="") for decorative images. ▪️ Ensure all interactive elements work with keyboard only like Tab to navigate, Enter/Space to activate, Escape to close. ▪️ Never remove focus outlines without adding visible alternatives because users need to see where they are. ▪️ Maintain 4.5:1 contrast ratio for text and 3:1 for UI components and test with browser DevTools. ▪️ Link every form input with a visible <label> using the for attribute, no placeholder-only labels. ▪️ Don't rely on color alone to convey information also add icons, text, or patterns for clarity. ▪️ Use ARIA attributes only when semantic HTML isn't enough like aria-label for icon buttons, aria-live for dynamic updates. ▪️ Trap focus inside modals and return it to trigger element when closed because prevents navigation confusion. ▪️ Test with actual screen readers (NVDA, VoiceOver, TalkBack) and keyboard navigation because automated tools catch only 30-40% of issues. ▪️ Show clear error messages near form fields with explanations not just generic "invalid input." ▪️ Make touch targets minimum 44x44 pixels on mobile because it's easier for everyone to tap accurately. What accessibility feature has improved your app's usability the most?

Maybe you knew roving tabindex... but do you know `focusgroup`? Read the breakdown below to understand how it works 👇 Making a custom toolbar accessible is hard. You usually need JavaScript to manage the focus state. This means tracking which button is active when the user presses arrow keys. This struggle is now over. This new HTML attribute is a major step forward. Here is why it makes development easier: 1. It enables native arrow key navigation. - Users can use left and right arrows to move between buttons. - Users can use up and down arrows for vertical menus. 2. It removes the need for custom scripts. - You do not have to write complex event listeners anymore. - The browser handles the focus management for you. 3. It improves web accessibility by default. - Screen reader users get a much better experience. - Power users can navigate your interface faster. I built a simple custom menu to test it. The arrow keys move the focus naturally between the items. It is entirely built with plain HTML. Please note that this feature is still experimental. It is currently a proposal being tested in Chromium browsers. How do you currently handle keyboard navigation in your projects? Drop a comment below to share your method!