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.
Table of Contents
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
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.
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.
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:
- TAB key – Allows users to navigate from top to bottom jumping to different elements of the website
- Shift+ TAB – Helps in navigating from bottom to top, it is often used to jump back to the previous button or link
- 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 Key | Function |
| 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 + N | Opens Narrator settings |
| Windows logo key + Ctrl + S | Turns 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 Key | Function |
| Option-Command-F5or Triple-press Touch ID (power button) on supported models | Displays Accessibility Options |
| Command-F5 or Fn-Command-F5or Hold Command and triple-press Touch ID on supported models1 | Turns VoiceOver on or off |
| Control-Option-F8 OrFn-Control-Option-F8 | Opens VoiceOver Utility, if VoiceOver is turned on |
| Option-Command-8 | Turns 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:
- Follow the keyboard focus
- Navigate and interact with all elements
- Navigate easily without getting the keyboard trapped
- 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.
