How to improve keyboard navigation accessibility on your website

Have you ever tried to navigate the web without a keyboard? Sure, you can get to your bookmarks using the mouse and visit a couple of websites, but can you type a search?

When considering accessibility and user experiences, people face real challenges – even if they look slightly different for everyone. Considering the needs of all your users can seem overwhelming if you don’t know where to start, but keyboard compatibility is the best issue you can tackle to get started on the right foot.

Just as you may struggle to navigate through websites or access data without a keyboard, there are so many things that can limit people with disabilities from navigating your content. Not setting up the proper keyboard support for your website can leave a sizeable chunk of your audience to be left out, leaving a massive gap in your ability to reach them.

Today, we’re going to explore how you can use keyboard compatibility to reach and accommodate the widest audience possible and make your website more accessible to everyone.

What is Keyboard Compatibility?

Keyboard compatibility ensures your users can navigate your website using a keyboard alone. Users can navigate the site and interact with its operations, including clicking buttons, pressing links, checking and unchecking options, and typing in form inputs without a mouse.

There are plenty of ways to use keyboards to navigate a website, for example, using keys and commands incorporated into the design. But the main ones are simple. These include:

Direction Arrows – Used generally to move up, down, left, and right. You can use them, also, to move seamlessly through drop-down menus, grids, or forms.

The Tab Key – Often, this is used to move between different user interfaces or interactive items, such as links and form fields. You use it by tapping it once and cycling through the elements until you reach the desired one.

The Enter Key – This button allows your users to access links or submit forms. It sends a positive click-through signal to your website, assisting users in moving forward or confirming actions as they go.

The Spacebar – Often used to activate button functions or check/uncheck a box element within a form.

Why is keyboard compatibility so important?

Keyboard compatibility allows you to accommodate people who can’t see or follow a cursor, like blind users who navigate the internet using assistive technology like screen readers. In addition, users with temporary or permanent conditions that cause sensitivity in hands or wrists or motor control. Also, people who lack the dexterity needed to use a mouse will benefit from this as well.

But there are other benefits, too. For example, some people prefer to use a keyboard for personal reasons. Giving keyboard compatibility features allows people to navigate or interact with your website with ease, speed, and efficiency.

A user with a broken mouse, for example, may click out of your site even though their situation is temporary – losing you a potential user or client, as they search for an area they can adequately interact with during the website session.

Screen Reader technologies also rely heavily on proper keyboard implementation to assist screen reader users who navigate the web every day.

A few ways to get started

There’s plenty to consider when working with keyboard compatibility. But here are some essential tips to help you get started:

Tabs & Tab Order – The tab order should follow the visual flow of your site, allowing users to move intuitively through your site as if going through a book.

If you’re unsure, think left to right or top to bottom. You can assign a keyboard focus Tabindex to elements using Javascript, but I would not recommend it since it can get problematic for inexperienced developers.

The easiest way for you to preserve the order of your index on the site is to view your entire HTML structure line up from top to bottom, just like when you are navigating a site on mobile but without styles.

Obvious Keyboard Focus – Keyboard focus aims to allow users to know what is being focused on or highlighted. Making sure this is communicated clearly to your users can go a long way in terms of experience.

Many browsers provide this feature by default – some with a solid blue border like chrome or a grey dotted line in Firefox. Unfortunately, many people choose to remove it during the design process because it doesn’t look ‘aesthetically pleasing’ or ‘doesn’t match the design or branding.’

Doing this makes things more complicated because users won’t be able to tell where the keyboard is focusing on the page – consider instead adjusting to make it look good (but still noticeable) on your site!

Border size – A good rule of thumb is to have a border of at least 1 pixel solid, dotted, or outlined around the elements on the website. Also, the focus indicator needs to have at least a 3:1 color contrast against the background to be noticeable to everyone, including people with low vision or color blindness.

Not fully obscured – Another essential tip to remember is to make sure that the border doesn’t disappear or blend in when applied to elements that already have a border similar to it. The keyword here is “noticeable border,” meaning that it doesn’t matter what element is on focus on the page; you should be able to see the border.

Avoid keyboard ‘Traps’ – A Keyboard trap is a common problem for people solely relying on keyboard navigation. You can get stuck on a drop-down menu if you’re not careful, causing your navigation to grind to a halt, which can be frustrating or impossible to fix from some perspectives.

Testing is the only natural way to avoid these – it can seem time-consuming, but you need to hold the tab key from within the address bar to move through each element.

Once you’re sure you can navigate between each component using only the keyboard, you’ll be able to know whether your web page has traps or not. Repeat this process on each of your pages to make sure!

Best Practices

There are many ways to dive into this, but you can also do tons of things to make the process a little easier. Some of these best practices include:

• Avoid outdated UI like Flash when building your website – they are not accessible via keyboard at all.
• Make sure that all interactive content is available via keyboard alone.
• Tab order should adopt a book-like structure to be more intuitive and predictable. Unpredictable elements may cause user error or frustration, causing people to leave, hurting your SEO rankings.
• Include a “skip to main content” link on your page, assisting with keyboard navigation and ease of use. Here is an example of how to implement a skip link.
• Integrating and using a keyboard focus that will stand out against your content for users with visual impairments.
• Adding a background color or bold style can ensure the direction is clear and recognizable. Make sure you check compatibility and consistency between browsers and make sure it always stands out.

Creating a website that users can navigate with ease and precision can help your user experience tremendously, no matter the accommodation.

Visual cues to make it easier and checking to make sure you have missed nothing will go a long way in ensuring your entire website is accessible and provides value to all of your users.

Did you find this information helpful? Which tip would you like to try first on your website? Please let me know your thoughts in the comments below. Also, please click the like button to support more content like this. Likes are free!

If you want more information on web accessibility, make sure you check out my YouTube channel. Also, make sure you subscribe to our newsletter for notifications about new content, so you don’t miss a single article!