ADA Best Practices for Keyboard Accessibility

With digital marketing on the rise, it’s essential to ensure that your website is accessible to everyone, including individuals with disabilities. Not only does this improve overall usability, but it also makes your website compliant with the law.

In 2010, the U.S. Department of Justice passed the Americans with Disabilities Act Standards for Accessible Design; the law stated that all websites must be accessible to those with disabilities such as vision impairment and loss of motor function.

If you’re not working with a design team that is familiar with ADA compliance, keyword accessibility is one of the most overlooked compliance items. As such, here are some helpful things to keep in mind when considering keyboard accessibility.

Skip to Content

Imagine you can only navigate through your website with your keyboard – is your website following ADA best practices? Let’s test it. Visit any page on your website and press tab. Where does your keyboard focus go? Your website logo? The first link in the navigation menu? If the answer isn’t a skip to content button, then we have some room for improvement.

What’s a skip to content button you may ask? Great question! A skip to content button acts as an anchor link to the first significant block of content on a web page past the website’s main navigation. The reason why it’s essential to have on your website is ease of navigation for keyboard users. Some users are not able to utilize a cursor pointer with a mouse, so we need to ensure that all content on a web page is accessible through a keyboard.

Without a skip to content button on the first keypress, a keyboard user will have to tab past the navigation menu every time they enter a new page on the website. Not having this functionality isn’t necessarily an error, but it is highly recommended in regards to keyboard accessibility.

Tab Order

As previously mentioned, a keyboard user will use the tab button on the keyboard to navigate a website without the use of a mouse. When you navigate a website, the keyboard focus should follow a natural, logical flow from one element to the next; top to bottom and left to right.

Much like reading a book, a keyboard user should be able to easily navigate a website in a natural reading path. Of course, website’s can be a little bit more complicated than the pages of a book. This is where the default browser functionality comes in – if uninterrupted, the browser uses the web page’s HTML structure to determine where keyboard focus will move next.

That being said, you can alter where keyboard focus will move using Javascript. This may be needed in instances of dynamic elements such as pop ups. In this case, the keyboard focus will need to move from where it opened the pop up, to the element that closes the pop up. This is one example where keyboard focus moves out of the natural tab order.

CSS can also disrupt the browser-determined tab order. We can use CSS to change the visual order that elements appear on the page – however, this does not change the HTML order of elements. This is where a shift of the elements on the page causes confusion for a keyboard user.

Unfortunately there isn’t a “one size fits all” type of solution in this case. Rather, we must be aware of how and where keyboard focus moves across elements in our websites. 

Consult with an Experienced Team

Everyone should strive to make their website compliant on a human level, yet the potential for litigation is also there. If you’re not sure if your website is ADA compliant, ask an experienced team to review your site and make recommendations. At PaperStreet, ADA compliance is a key part of our design process and we have team members highly trained in this area. Reach out to us for help today!