Keyboard Accessibility: Why and How To Test Your Website

Written by Alex Margau | Mar 15, 2024 8:33:19 AM

With 1 in 4 adults in the USA having some form of disability, having an accessible website has become a moral imperative, given both the benefits of web accessibility compliance and the many disadvantages its lack brings to your business. We live in an increasingly digital world, so ensuring that websites are accessible to everyone, including individuals with disabilities, is not just a courtesy anymore, it's a necessity and one that can come with web accessibility lawsuits for businesses found in non-compliance.

However, the process to get your website accessible can seem daunting if you don’t know where to start so we’re suggesting keyboard accessibility as a first step. Keyboard accessibility allows users to navigate through your website using only their keyboard and it is an essential component of website design for individuals who, due to a disability, are unable to use a computer mouse or a laptop trackpad.

In this article we’re discussing why testing for keyboard accessibility is a good idea and how to do this, even if you’re not a tech savvy individual.

But first, let’s look at

What is Web Accessibility?

Essentially, web accessibility is all about making sure that everyone, including people with different kinds of disabilities like hearing, cognitive, physical, speech, or vision impairments, can navigate and use a website just as easily as someone without a disability. The underlying principle is to allow for an equal level of ease and access to information and functions online to everyone, making the web welcoming for all.

This principle lies at the foundation of the WCAG guidelines and laws such as the Rehabilitation Act's Section 508, or the Americans with Disabilities Act (ADA) Title III, all of which highlight the importance of creating websites that are accessible to all by being perceivable, usable, understandable, and reliable.

In the U.S., ADA Title III says that public spaces, which are more and more understood to include websites, need to be accessible to people with disabilities. Although the ADA doesn't talk about websites directly, court cases and legal views have clarified that they fall under this law. This means that if a website isn't accessible, the business owning it could face legal issues, underscoring why it's critical to consider ADA when designing a website.

Other U.S. rules like Section 508 of the Rehabilitation Act and Colorado's Accessibility Law, HB 21-1110, also play a role in shaping how websites should be made accessible. If you're looking to dive deeper into the U.S. web accessibility scene, there are blog posts and resources that can help.

For businesses aiming to meet these accessibility standards, Clym offers helpful resources, like guides on WCAG 2 or a list of 21 web accessibility resources, to facilitate your website’s meeting accessibility standards.

What is “Keyboard Compatibility”?

Keyboard compatibility means that your website can be navigated with only the help of a keyboard, without a computer mouse or trackpad. Having this available to your website visitors is really important particularly for those individuals who have to use special tools to help them navigate the internet or for those who find using a keyboard easier than a mouse.

Imagine you're navigating a website and you do not have the ability to use a mouse, be it because of a disability, because your computer mouse just broke, or you simply don’t want to use a mouse. The best way to tell if the website is keyboard compatible, is if you can reach every part of it and use all its features just by pressing a series of specific keys.

This means you can still go everywhere on the site, click on links, or fill out forms, using just your keyboard.

How do I test the keyboard accessibility of my website?

Testing your website's keyboard accessibility is a pretty straightforward process. However, this does require some attention to detail. We suggest you should begin by accessing your website’s homepage or any other one of its pages and then disconnecting your computer mouse or disabling your laptop’s trackpad so the option to use either one is no longer available.

This will allow you to step into the shoes of individuals with disabilities whose only option is to use a keyboard.

Next, use the following keys or keyboard combinations to test the navigation of your website:

TAB: moves the keyboard focus downwards through the website’s interactive elements.
SHIFT + TAB: reverse action of TAB, moves the keyboard focus upwards.
ENTER/RETURN: equivalent to a mouse click on links or press buttons, i.e. saying "yes" or "go".
SPACEBAR: checks or unchecks boxes, helps you press buttons.
ARROW KEYS: help you scroll up and down the page, help you choose one option from a set of options, help you move through items in a menu or tab panels.

Here’s a visual you can download with the above keys for keyboard accessibility testing:

A few more things to consider while testing your website for keyboard accessibility:

A website that is keyboard accessible will have a keyboard focus, which is usually a square of a different color which moves through all the interactive elements on a web page, and it will respond to the above basic keys and keyboard combinations.
Pay attention to whether you can access all interactive elements and whether the focus order is logical.
Tap the Tab key to jump from one link to another or use arrow keys to scroll up and down.
When inside a form, or on an interactive button, i.e. one that takes you to another page of your website, press Enter to test whether the action is initiated.

A website that offers keyboard accessibility is a website built with everyone in mind. This means that when you work with a website designer, both you and the designer(s) should think about how someone will use it with only a keyboard.

Accessible website design doesn't just happen. It needs website designers to really consider how a website works, and to test for different types of accessibility, such as keyboard accessibility. When the work is done right, everyone will be able to access the information and use your website, and this is what good web accessibility is all about.

How To Make My Website Keyboard Accessible?

Having tested your website, you probably find that keyboard accessibility still needs some adjustments or that the overall accessibility of your website could do with an update. Keyboard accessibility for your website needs a few things to be in place:

First of all, your website build, through the use of HTML, should be organized in a logical sequence so that it makes sense and when users press TAB they can move with ease from one part to another in a way that feels natural to them.
Next, every interactive part of your website, such as forms or buttons, have to be set up so they can be selected with only the keyboard. When set up correctly, these parts will be highlighted when users press the TAB key.
Your users should always be able to tell where they are on the page. When someone is moving through your website using the Tab key, there should be a box or outline around the part they're focused on to help them navigate.
Semantic HTML helps a lot. This is a way to organize your website content in a clear manner. Think of semantic HTML as a way of organizing your shelves. You can either throw everything on the shelves randomly, or you can organize your things in ‘boxes’ with labels for what each contains. This way, later on you will be able to locate your things easily. For websites, semantic HTML means you use HTML in a way that describes what each part of the webpage is for, like a button for clicking or a form for entering information. This helps people using keyboards understand and use your website better.
Using ARIA roles is a good idea. These tell your web browsers and AT tech (assistive technology) what each part of your website does. Think of these as the roles actors have in a play. If the audience understands the role of each actor, they also understand the play.

Why do I need a Keyboard-Compatible Website?

Having a keyboard-compatible website shows your users you mean business and that you’re trustworthy, because it lets everyone use your website, even if they can't or don't want to use a computer mouse. Put yourself in the shoes of someone who can only use a keyboard to go online. You would also want websites to work smoothly with just a keyboard, right? That's why having a keyboard accessible website matters.

When your website offers keyboard accessibility you’re basically doing the following:

Putting everything within users’ reach: your website users can get to every part of your website that they can click or interact with, by simply using the keyboard. This way they don’t miss out on anything important, and don’t feel left out if they have a disability.
Making your website’s navigation predictable: every time a user navigates your website using only their keyboard it is really helpful for them if they know where they are on the page. We’re referring to the keyboard focus here, of course, which might highlight a button or link to show it's selected.
Allowing users to skip repetitive sections: oftentimes, websites have the same menu on every page. This is boring and time-consuming if users have to go through this every time, especially if they’re using a keyboard. Having skip links in place lets users jump over the repetitive parts and get to the content they actually want.
Meeting web accessibility standards and regulations: by following the WCAG guidelines and aiming for compliance with laws such as ADA’s Title III, you’re showing your users you care about them while also avoiding web accessibility lawsuits.
Improving your business’ reputation: having a keyboard-compatible website is not just good for accessibility, it also shows you care about your users which is great for your website’s and your business’ reputation.

Keyboard Accessibility Guidelines under WCAG 2.1

The Web Content Accessibility Guidelines (WCAG) 2.1 provide a series of specific recommendations for making web content more accessible, including guidelines for keyboard accessibility. These help you check that all functionality is available from a keyboard and that your users can navigate through your website’s content efficiently and predictably.

Here are some of the key points:

No Keyboard Traps: your users should be able to navigate to and from all parts of your website using only their keyboard. This means they shouldn't get stuck on any part of the page without a way to move on or back out.
All Functionality Is Available: Everything you can do on a website with a mouse – clicking links, opening menus, starting videos, etc. – has to also be done with a keyboard.
Website Content Has a Logical Order: When your users navigate through your website by pressing TAB, the order in which they move from place to place on the page has to make sense. Generally speaking, this means moving from left to right and top to bottom, just like reading a book.
Focus is Visible: It should always be clear to your users which element has the keyboard focus on it. This is usually a visual indicator in the form of a border or a highlight around an active element, so your users know which action they are about to trigger if they press Enter, for example.
Sufficient Time: If your website has any time limit for certain actions, such as filling out a form, you have to make sure that your users have enough time to perform the action using only a keyboard. Options to stop, extend, or adjust the time limit if needed should be provided to users.
No Accidental Activations: Your website users shouldn’t be able to accidentally trigger an action by pressing the wrong key. For example, nothing should happen if the user pushes down; instead an action should be triggered only once the key is let go to avoid, for example, mistakes such as sending a message before it's finished.
Accessible Names and Roles: the interactive elements of your website, such as buttons or links, should be clearly labeled and described. What this does is that when someone uses assistive technology, such as a tool that reads the screen, they will be able to understand what each interactive element is and what it does if the user clicks on it. This way, even if they don’t see it, users can still navigate your website.

Conclusion

Embracing keyboard accessibility is crucial for creating an inclusive digital environment, ensuring all users, including the one in four adults in the USA with a disability, can navigate your website effectively.

By prioritizing keyboard-friendly design, you not only comply with legal standards like the WCAG 2.1 but also enhance user experience and broaden your audience.

Implementing keyboard accessibility demonstrates your commitment to inclusivity, improves your brand's reputation, and ensures your digital space is welcoming and accessible to everyone.

Accessibility Resources

View full post