Keyboard Navigation for Website Accessibility
Jonar Sabilano
Using a trackpad or a mouse simply isn’t an option for people with specific disabilities. That’s why keyboard navigation is one of the most critical digital accessibility tools. As the name implies, it enables people with blindness, low vision, and temporary or permanent mobility disabilities to navigate their computer using just a keyboard. However, many websites aren’t keyboard accessible or conducive to this type of navigation. Keyboard accessibility requires careful consideration and web development planning, and this blog can help.
First, we expound on why it’s so essential to improve keyboard accessibility.
Why is web accessibility with a keyboard so important?
The internet is too often built to meet the needs of a standard user in optimal physical health, working in an ideal environment. However, millions require accessibility modifications to use the internet as intended, whether they have a disability, temporary condition, or simply tiredness and strain.
Think about your older relatives. Many seniors use computers to check their email and get the news. As people age, however, arthritis and dexterity issues become more common, making it almost impossible for them to interact with the internet as they once did. This decreased engagement can cause them to avoid new technology or not get the most out of their digital devices.
After a long day of working on the computer, many people’s trackpad accuracy can diminish as their hand movements and control over the cursor become more challenging. This could seem like a minor issue, but it’s disruptive to productivity and incredibly frustrating. People with dexterity and mobility issues have this problem daily, as they may lack the fine motor skills necessary to use a trackpad or a traditional mouse.
Keyboard accessibility features create a more straightforward and navigable digital experience so more people can keep using the technology they have come to rely on.
What is a keyboard-accessible website?
The W3C specifications describe accessible keyboard web design and development. In short, they must allow users to move between links, buttons, and other digital controls using their keyboard without requiring mouse use.
For a website to be genuinely and fully keyboard-compatible, links, buttons, and forms should be ingrained into native HTML controls by default. These inclusive design practices should also follow a logical order on the page, allowing users to scan and jump to different content in keyboard focus.
What is keyboard focus?
Keyboard focus uses visual indicators to show users where they are as they navigate a website using the keyboard. When selected or hovered over, the “focus” highlights and outlines page elements, showing the user exactly where they are within a webpage. The focus function is supported by most browsers so that people can use a mouse to navigate the web seamlessly.
What are the keyboard accessibility guidelines in WCAG 2.1?
A lack of keyboard accessibility is not just a minor inconvenience. It could determine whether someone can use your website at all. That’s why keyboard navigation and accessibility are built into the Web Content Accessibility Guidelines (WCAG) 2.1 criteria. The guidelines should always be top-of-mind when developing your best practices for keyboard accessibility.
WCAG 2.1 & 2.2 Level A (the most basic foundational level of accessibility) requires that all content be navigable via keyboard without specific keystroke timing, such as requiring the user to input particular keystrokes quickly.
This requirement benefits people who are blind or have low vision and cannot view where the content or a cursor would be on a screen. It’s also difficult for people with hand tremors and other physical disabilities to navigate steadily using a mouse. For these users, keyboard navigation is the best alternative.
What are some aria shortcuts for keyboard accessibility?
The aria-key attribute in ARIA identifies accessible keyboard shortcuts that activate or focus on an element for assistive technologies (AT). It’s a set of markup attributes that can be added to HTML to help assistive technologies (AT) understand the elements of a web page. This information allows ATs like screen readers and speech recognition systems to understand the page better and enable users to interact with its elements.
How do I manually check my website’s keyboard accessibility?
To ensure keyboard accessibility for your website and various apps, we advise that you manually check your visitors’ user experience by going through it without using a keyboard. The W3C recommends that you navigate forward through the page using the Tab key and backward using Shift+Tab. Use the arrow keys to navigate different elements, such as drop-down menus.
You’ll need to check that your website users can fully access your website’s content by looking for the following:
1. The ability to use the Tab key to get to every element of your website.
2. The ability to navigate drop-down lists using the arrow keys without an unexpected action occurring.
3. Avoid the “keyboard trap” by ensuring users can press Tab to exit elements they may accidentally enter.
4. The tab order goes left to right, like the logical reading order.
5. The focus of each element is visible to the user when they Tab through.
6. Every action can be performed using only a keyboard, and no website element is accessible only through a cursor.
7. The user clearly understands that images are links to other web pages and can be opened using only the keyboard.
Ready to put your site through keyboard accessibility testing?
1. User testing is the most prominent and easy first step, and you can do it. Your website should be easy to navigate and laid out so that every user can find what they need, no matter how they access it.
2. You can also user test by checking how well you can navigate your website using the keyboard. Try getting to specific content and see how difficult or easy it is to find. If you find this process frustrating, your users may as well, and you should make some changes to your website.
3. If you’re ready to make your website keyboard accessible and generally more accessible to everyone, request a free UserWay demo today!
Making your website keyboard accessible
If you’d like to improve your keyboard and screen reader accessibility, UserWay’s accessibility solution can help! Our accessibility scanner will suggest intelligent modifications to the parts of your website that might not be compatible with keyboard navigation accessibility. It will alert you immediately if it finds something that doesn’t comply with guidelines or will likely create problems.
FAQ
What are some good keyboard shortcuts for accessibility?
The most important keys for navigating a website using only your keyboard are Tab, Shift+Tab, Space, Enter, and the arrow keys up, down left, and right. It’s also good to note that keyboard shortcuts vary based on the brand and type of device visitors use, such as desktop or mobile. Microsoft devices have different shortcuts than Apple devices, so both brands have separate guides for using their products with a keyboard navigator.
Check out Microsoft’s guide to keyboard shortcuts for Windows machines and Apple’s guide to keyboard navigation for Mac devices.
Users can also customize keystrokes to set up their navigation techniques to be intuitive and comfortable for their needs and work styles.
How do I know that I have full keyboard navigation accessibility?
Once again, you can check your website’s keyboard accessibility by navigating through its buttons, links, forms, and pages using only the keyboard and no cursor. That’s the user testing we referred to earlier, and it’s an excellent way to get an overall sense of what’s happening for your keyboard users.
As always, remember that websites are there to serve the general public and should always consider a variety of users. When you’re not sure what your website offers for accessibility or if you need comprehensive, professional, and certified accessibility assessment and remediation suggestions, contact UserWay for a full manual accessibility audit.
Share