How to enhance Accessibility with Keyboard-only Navigation?

keyboard navigation accessibility tips

Imagine that a restaurant serves noodles with only chopsticks, even if the food looks appetizing, would everyone go there? Mostly, people who know how to use chopsticks will only visit the restaurant. Similarly, users who can’t use a mouse or prefer using a keyboard to navigate websites won’t visit non-keyboard-friendly websites. 

The best of websites can be considered worthless by users who are unable to engage with it or access its controls. Hence, a website that is accessible by keyboard will help everyone, especially motor and vision-impaired users to easily navigate the website.

In this blog, we will cover the basic topics surrounding keyboard accessibility and its shortcuts.

What is keyboard accessibility?

Keyboard accessibility is a practice of removing barriers that prevent all users from accessing the website only through keyboard. Keyboard accessibility requires 4 main things:

  • Keyboard focus
  • Accessible interactive elements
  • No keyboard traps
  • Skip Navigation Links

1. Keyboard focus

Highlighting the presence of keyboard focus on a link in the mailchimp website

Keyboard users need to be informed of their current position on the screen or they might lose track, that is where keyboard focus comes into play. This function will highlight the element as per the keyboard input essentially communicating the focus element location to users.

Fortunately, this function is activated by default in common web browsers like Chrome, Firefox, etc.

If the keyboard focus does not look appealing and some might decide to remove it, that will surely break the experience for keyboard users. Instead of removing it, try to replace it with a design that resonates with your website’s design and layout. 

2. Accessible interactive elements

Nowadays, most websites have interactive elements such as buttons, forms, dialog boxes, drop-down menus, etc. These elements are an integral part of a website, therefore, they should be accessible by everyone. 

A sample drop-down menu where the first item is selected in the list

Drop-down menus are used by websites to organize and integrate categories together inside one element. However, it also creates a conundrum for keyboard users if it is not coded correctly. In a drop-down menu, a wrong code will not show users all the options and selects the first item in the list when users press the down arrow key. However, the correct coding of the menu helps users scroll through the list items.

Try to use only HTML links, buttons, and form fields as these will make sure that all elements can be accessed by the keyboard. Using JavaScript widgets that have <div> or <span> elements forces you to use tabindex which may create problems.

Also read: Understanding Success Criterion 2.1.1: Keyboard

Should you use Tabindex?

The HTML tabindex is used for managing keyboard focus. Unfortunately, it is a two-way sword as correct usage of the tabindex value will help you easily manage widgets. Similarly, incorrect usage will wreck the usability of web content for keyboard users. 

Try to Avoid using tabindex values greater than 0. Positive values make it difficult for people who access websites using assistive technology in a logical sequence.

3. No Keyboard Traps

Keyboard traps refer to situations where the keyboard focus is camouflaged between elements. This happens when several formats are combined within a page and they are rendered using plug-ins or embedded applications. Sometimes, it also happens when the web page restricts or blocks users to a subsection of content. 

Keyboard users will have problems navigating through your website if it is filled with keyboard traps.

Avoid using apps, plugins, widgets, or JavaScript techniques that trap the keyboard. Make sure users can get in and out of all elements available on your website.

4. Consider a Skip Navigation Link

Highlighting the presence of skip navigation link in the Hubspot website screengrab

Some web pages have many elements which are problematic for keyboard users as they have to tab through 100+ navigation elements to reach the main content. This is not only exhausting but also takes up a lot of time. Mouse users can go to the main content area without having to interact with elements. The best way to solve this is to provide a Skip Navigation link and give equal power to both mouse and keyboard users. 

How do you check keyboard accessibility?

Here are 3 keys that are most commonly used to navigate a website through the keyboard:

  1. TAB key – Allows users to navigate from top to bottom jumping to different elements of the website
  2. Shift+ TAB – Helps in navigating from bottom to top, it is often used to jump back to the previous button or link
  3. SPACEBAR, RETURN or ENTER –  Used to activate selected link or button

To check keyboard accessibility, go to any website using popular browsers such as Firefox, IE, Chrome, or Safari. 

Click the address bar in the browser and use only your keyboard to navigate the website till you reach the bottom element. 

  • Were you able to access all features?
  • Were you able to access all elements?
  • Did you easily know where you were on the page?

If you can answer these questions without any hesitation, your website is keyboard-friendly. If not, you need to work on the keyboard accessibility of your website.

Top Accessibility Keyboard Shortcuts 

Keyboard Accessibility Shortcuts for Windows

Shortcut KeyFunction
Windows logo key  + A  Opens Quick Settings
Windows logo key  + Ctrl + C Turns color filters on or off
Windows logo key  + H Opens voice typing
Windows logo key  + Alt + H  Moves keyboard focus to the voice typing dialogue
Windows logo key  + Ctrl + NOpens Narrator settings
Windows logo key  + Ctrl + STurns on Windows Speech Recognition
Windows logo key  + Ctrl + O Turns on the On-Screen Keyboard
Windows logo key  + U  Opens Accessibility Settings
Windows logo key  + W Opens Widgets

You can check out more accessibility shortcuts by visiting the official windows site.

Keyboard Accessibility Shortcuts for Mac

Shortcut KeyFunction
Option-Command-F5or Triple-press Touch ID (power button) on supported modelsDisplays Accessibility Options
Command-F5 or Fn-Command-F5or Hold Command and triple-press Touch ID on supported models1Turns VoiceOver on or off
Control-Option-F8 OrFn-Control-Option-F8Opens VoiceOver Utility, if VoiceOver is turned on
Option-Command-8Turns zoom on or off
Option–Command–Plus sign (+)Zooms in
Option–Command–Minus sign (-)Zooms out
Control-Option-Command-8 Inverts colors
Control-Option-Command-Comma (,)Reduces contrast
Control-Option-Command-Period (.)Increases contrast

You can check out more accessibility shortcuts by visiting the official apple support site.

Conclusion

People who are unable to use a mouse or power users who prefer using a keyboard over mouse need websites to be accessible. To make your website keyboard accessible, your visitors should be able to:

  1. Follow the keyboard focus
  2. Navigate and interact with all elements 
  3. Navigate easily without getting the keyboard trapped
  4. Skip the navigation if there are a lot of links

Although keyboard accessibility is an essential part of web accessibility, it doesn’t mean your website is accessible to everyone. It is good to be proactive and work towards making your website more accessible rather than fixing issues only when users complain. 

Whether it’s accessibility auditing, consulting, training, or creating an accessibility policy, our experts at AEL Data will help you to achieve your accessibility goals.

Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media

Facebook
Twitter
LinkedIn
Email
Pinterest
Reddit
WhatsApp

Related Blogs

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content