One of my vices — eating at my desk — recently caught up with me. A year’s worth of baguette crumbs lodged under my touchpad rendered my mouse inoperable. And there I was, stuck with no idea how to operate my computer solely with the keyboard.
A fast-approaching deadline led me to Google keyboard shortcuts that provided me with a perfect solution. Tab, Shift, Enter, and Spacebar soon became my best friends. I was unstoppable as I moved forward, backward, and every which way between open browser tabs.
While I was able to overcome my predicament, that can’t be said for millions of Americans who find their web experience hinges on your website’s being accessible with keyboard navigation.
So, what is accessible keyboard navigation, and how can you make your site keyboard navigation accessible? Dig in to find out.
Table of Contents
- What is Accessible Keyboard Navigation?
- How Does Keyboard Navigation Work?
- How I Design a Website That Allows for Keyboard Navigation
What is Accessible Keyboard Navigation?
Accessible keyboard navigation is the ability to use only the keyboard instead of using the mouse to navigate around your computer or the internet. With this method, you use keyboard keys such as Tab, Shift + Tab, Enter, and the Spacebar to move between the elements of a website.
Accessible keyboard navigation makes websites more accessible to users with physical limitations who may have physical and cognitive impairments and may lack the dexterity to use a keyboard or mouse when using a computer.
.png)
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
How Does Keyboard Navigation Work?
I love keyboard navigation because it lets me bypass the need for a mouse. Limiting my hand movement to the keyword improves my workflow and helps me work faster.
Typically, keyboard navigation uses a few select keys to help users navigate the interactive elements of an accessible website.
Keyboard focus, a visual indicator highlighting a selected web element, is the MVP of keyboard navigation. It creates an unmistakable border on the active element so you can track your progress on the website.
The keys include:
- Tab — Moves the focus forward through links, buttons, and form fields.
- Shift + Tab — Moves the focus backward and navigates a website in reverse order.
- Enter — It activates the current focus element, like clicking a mouse.
- Spacebar — Checks and unchecks boxes.
- Arrow keys — Moves within the drop-down menu and radio buttons.
- Esc key — Closes modal windows.
How I Design a Website That Allows for Keyboard Navigation
Here’s my process of designing a keyboard-accessible website optimized for keyboard navigation to ensure a seamless browsing experience for people with physical impairments.
Menus and Dropdowns
First, I use semantic HTML elements to structure the website and ensure a clear hierarchy for seamless accessibility for keyboard users and screen readers.
I use <nav> to denote navigation elements, <ul> for lists, and <li> for individual items. For dropdowns, I use <a> or <button> to trigger the menus.
Then, I add ARIA Roles to assign the attributes. To enable keyboard navigation, I define the role of the Tab, Arrow, Enter, Space, and Escape keys. I also use a visible focus indicator to define the elements.
In Real Life
The Bureau of Internet Accessibility website has great keyboard accessibility. I like the clear hierarchy and how easily I can open and navigate the drop-down menus. Each keyboard command works as it should.
Modals and Popups
I give each modal a unique ID and then wrap the modal content in <div> while using “dialog” or “alertdialog” for critical alerts.
I use ARIA attributes such as “aria-labelledby” and “aria-describedby” to associate the modals with their titles and link to the modal’s main content.
Then, I ensure the focus moves to the focusable element when a modal opens and loops through the focusable elements so users can’t Tab out of the modals. Lastly, I map the Escape key to close the modal and ensure the focus returns to the primary element after closing a modal.
In Real Life
I like the accessible modals on the Bureau of Internet Accessibility website. The site uses a clear gray background to highlight the focus item. For example, you can open the dropdown menus with the down arrow key, but you can’t Tap out of the modal menu.
Forms
I use the semantic HTML elements <form>, <label>, <input>, <textarea>, and <button> to create the forms and give each field a visible focus state. I use <fieldset> to group related fields and <legend> to give each group field a descriptive heading.
I use Aria Roles to link error messages to the input fields, make them visible, ensure they’re accessible to screen readers, and provide text explanations for fields with errors.
In Real Life
The Bureau of Internet Accessibility website uses keyboard-accessible forms. I like that they’re easy to navigate with the Tab and Shift + Tab keys. Field errors are highlighted in bright red, but there’s no text explanation.
Logical Tab Order
Since the tab order is sequential, I arranged the HTML elements in the most logical order — with the most critical elements at the top. I then use “tabindex” to control the focus order. For instance, tabindex=”0” makes the elements focusable in the order they appear on the document and uses a positive value such as tabindex=“1” to create a custom order.
In Real World
Again, the Bureau of Internet Accessibility does a great job creating logical tab order. I like their About Us logical order because it keeps the most important element at the top and highlights the active element using a high-contrast design.
Skip-to-Content Option
I add an anchor link at the top of the HTML document in the main content area. I use an ID attribute to identify where the skip link leads. I then use CSS elements to style the skip link while ensuring it’s only visible when focused. I also ensure the skip link is the first focusable element on the page.
In Real Life
A skip-to-content option improves the user experience when using the Bureau of Internet Accessibility website. I like that the link uses a high-contrast design, and you can skip to content using the Tab or Enter keys.
Give Your Visitors a Seamless Web Experience
Since discovering keyboard navigation, my mouse probably feels left out, but my workflow has improved considerably. My hand movements have reduced considerably, which I find refreshing. Optimizing your website for keyboard navigation creates a seamless web experience for all users.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
