Have you heard the term “keyboard navigation” and wondered just exactly how that works? Keyboard accessibility and keyboard navigation are concepts that are not that difficult to understand, at least for people with some computer experience. Keyboard navigation allows people to use their computer even if they have difficulty using a trackpad or mouse. However, a lot of the time, websites are not conducive to this type of navigation. Keyboard accessibility requires careful consideration and planning in web development.

Keyboard Accessible Navigation

There should be another way besides for a standard mouse for people to navigate websites. The internet is too often built for the needs of a standard user in optimal physical health, working in an ideal environment. However, millions of people require accessibility modifications to use the internet the way it was intended, whether they have a disability, temporary condition, or simply tiredness and strain. This is why keyboard navigation (among other necessary accommodations) is such a big deal. 

For example, think about your older relatives. It’s common for many senior people to use computers these days, from checking email to getting the news. As people age, however, arthritis and dexterity issues become more common, and can make it almost impossible for them to interact with the internet as they once did. This is problematic, as it could 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 can become more challenging to control. 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 every day, as they may lack the fine motor skills necessary to use a trackpad or a traditional mouse.

Keyboard accessibility functions can help create a more straightforward and navigable digital experience, and ensure that more people can keep using the technology they have come to rely on.


 

What is a Keyboard-Compatible Website?

The W3C specifications describe a keyboard accessible website: it must allow users to move between links, buttons, and other digital controls using their keyboard, without requiring any mouse use.

For a website to be truly and fully keyboard-compatible, links, buttons, and forms should be ingrained into native HTML controls by default. These should also follow a logical order on the page to allow users to scan and jump to different content in keyboard focus on the webpage.

What is Keyboard Focus?

Keyboard focus works as a part of keyboard accessibility by indicating to users where they are as they navigate through a website using the keyboard. The “focus” highlights and outlines elements on a page as they are selected or hovered over: it shows the user exactly where they are within a webpage. The focus function is supported by most browsers, so that users who cannot or prefer not to use a mouse can seamlessly navigate the internet.

Keyboard Accessibility Guidelines in WCAG 2.1

A lack of keyboard accessibility is not just a minor inconvenience. It could determine whether someone is able to use your website at all. That’s why keyboard navigation is built into the Web Content Accessibility Guidelines (WCAG) 2.1 criteria. 

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 specific keystrokes within a short time.

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.  

Can everyone navigate your site?  Eliminate online barriers to digital content by optimizing keyboard navigation

Check Your Website’s Keyboard Accessibility

To make sure your website is keyboard accessible, we advise that you manually check your visitors’ user experience by going through it by yourself without the use of a keyboard. The W3C recommends that you navigate forward through the page using the Tab key and backward using Shift+Tab. To navigate through different elements, such as drop-down menus, use the arrow keys.

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 through drop-down lists using the arrow keys without an unexpected action occurring. 

3. Avoiding the “keyboard trap”: ensuring that users can press Tab to get out of elements that you may accidentally enter into. 

4. The tab order goes in a left-to-right fashion, just like the logical reading order.  

5. The focus of each element is clearly visible to the user when they Tab through. 

6. Every action can be done using only a keyboard, and no element of the website is accessible only through the use of a cursor. 

7. It is clearly understood by the user when images are links to other webpages, and that they can be opened by using only the keyboard.  

Making Your Website Keyboard Accessible 

If you’d like to make a keyboard-accessible website, UserWay’s accessibility solution can help! Our accessibility scanner will suggest smart modifications to the parts of your website that might not be compatible with keyboard navigation. If it finds something that doesn’t comply with guidelines or will likely create problems, it will alert you immediately.

Want to test your website for keyboard navigation compatibility?

1. User testing is the most obvious and easy first step, and can be done by you. Your website should be easy to navigate and clearly 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 are able to navigate your website using just 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 get started making your website keyboard-accessible, and generally more accessible to everyone, request a free UserWay demo today!

FAQ

How do I navigate a website using only my keyboard?

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 are using, for example desktop or mobile. Microsoft devices have different shortcuts than Apple devices, which is why 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 so that they are intuitive and comfortable for their individual needs and work styles. 

How do I know that I have full keyboard accessibility on my website?

Once again, you can check the keyboard accessibility of your website by navigating through the buttons, links, forms, and pages of your website using only the keyboard and no cursor. That’s the user testing that we referred to earlier, and it’s a good way to get an overall sense of what’s happening for your keyboard users.

As always, keep in mind that websites are there to serve the general public and should always have a variety of users in mind. When you’re not sure what your own website is offering for accessibility, or if you need a truly thorough, professional, and certified accessibility assessment and remediation suggestions, contact UserWay for a full manual accessibility audit.