Ensuring the accessibility of online platforms is no longer a choice but a necessity as a more diverse user base gets online. One such critical aspect of digital accessibility is keyboard accessibility, a feature that allows your website users to navigate your site by only using their keyboards.
In this article, we look at keyboard accessibility, understand why it is essential, and how you can build a keyboard-friendly site.
Section I: Understanding Keyboard Accessibility
What is Keyboard Accessibility?
Keyboard accessibility, in its simplest form, refers to the ability of a website or an online application to be navigated and used entirely through a keyboard, without the need for a mouse. This means all links, buttons, forms and other interactive elements on the website can be accessed using your keyboard alone.
Keyboard accessibility plays a pivotal role to create a more accessible internet. It allows people with certain physical disabilities, who may find it difficult to use a mouse, to interact with the website using keyboard keys. Moreover, keyboard accessibility is also beneficial for power users – those who are proficient with computers and prefer to use keyboard shortcuts for efficiency.
In essence, keyboard accessibility is about creating an inclusive digital environment that caters to all users, irrespective of their physical abilities or usage preferences. It’s a crucial aspect of web accessibility guidelines outlined in the Web Content Accessibility Guidelines (WCAG) by the World Wide Web Consortium (W3C).
It is good to remember that a keyboard accessible website isn’t just about facilitating access. It is also about ensuring that users can understand and operate the functionality of the website. The end goal is to provide a smooth and seamless user experience for everyone.
Testing Your Site for Keyboard Accessibility
Testing the keyboard accessibility of a webpage is the first step to ensure its usability and inclusiveness.
Here is a simple way to test keyboard accessibility on your webpage:
- Tab Key Navigation: Begin by placing your cursor in the address bar, then press the “Tab” key to move forward through the elements on the page. You should be able to navigate to all interactive elements such as links, buttons and form fields. Similarly, using “Shift + Tab” should allow you to move backwards
- Visible Focus Indicator: As you navigate through the page, there should be a clearly visible focus indicator, often a highlighted border or a change in colour, to show which element is currently selected. This helps users know where they are on the page
- Enter and Space Keys: The “Enter” key should activate links and form submissions, while the “Space” key should activate buttons and checkboxes
- Arrow Keys: Dropdown menus and other similar elements should be operable using the arrow keys
- Escape Key: The “Escape” key should close menus and modals
A good place to start is to use these keys and see how your site works. Once you do, you will have a good idea of what works and what does not.
If you are unable to navigate to or operate any interactive element on your webpage using the keyboard button shortcuts, it means your page and even your website has keyboard accessibility issues.
Ideally, you should test these buttons across a variety of browsers since keyboard accessibility can sometimes vary between them. Though automated accessibility tools do help detect issues, manual testing is still recommended for a thorough evaluation.
Section II: Why You Need a Keyboard-Friendly Site
Power Users and Keyboard Navigation
Power users are those who are adept at utilising technology tools. They often prefer using the ‘Tab’ function on keyboards to navigate websites quickly. Keyboard navigation enables them to perform tasks more efficiently than with a mouse.
These users are also very vocal about what works and what does not. If you have a site that caters to a large user base (e.g. a blog, an ecommerce store, a news site, etc.), then you need to ensure your power users are able to tab through your site easily. If they are able to do so, you will have a loyal support base that will spread the word about your website in their network.
As you can see, this makes very good sense if you want a larger visitor base.
Supporting Users with Disabilities
According to the World Health Organization, over a billion people, or 15% of the world’s population, have some form of disability. Inclusive web design, including keyboard accessibility, is crucial for people with disabilities, as it enables them to access and interact with digital content seamlessly.
If you had followed the experiment above to check how keyboard accessible your site is, you will have a good idea of the frustration a disabled user will feel in navigating through sites with no keyboard accessibility. Do yourself and 15% of the world a favour. Make your site keyboard accessible.
Section III: How to Create a Keyboard-Friendly Site
Creating Keyboard Accessibility in HTML Sites
Creating a keyboard-friendly HTML website requires a keen understanding of accessibility principles and the right coding techniques. Here is how you can make your website more keyboard-friendly using HTML:
1. Adding a “Skip Navigation” Link
The “skip navigation” link is a hidden link at the top of the page that allows users to skip over navigation menus and directly access the main content. This is particularly useful for people who navigate websites using a keyboard as it can be tedious to tab through every navigation link.
Here is an example of a “skip navigation” link:
<a href="#main-content" class="skip-link">Skip to main content</a>
...
<div id="main-content">
<!-- Your main content goes here -->
</div>2. Using Other Styling Elements Besides Color to Identify Links
Relying solely on colour to distinguish links can be problematic for users with colour vision deficiencies. It’s better to use additional visual cues like underlines, font weight, or background colour. This can be achieved through CSS:
a:link {
text-decoration: underline;
font-weight: bold;
}3. Using Native HTML Controls
Native HTML controls like buttons, checkboxes, and radio buttons are inherently keyboard accessible. It is a good practice to prefer native controls over custom-made ones since they are more compatible with assistive technologies. Here is an example of how to go about it:
<button>Click me</button>
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label>4. Limit Use of Div and Span Elements, and Dropdown Menus
Div and span elements, and dropdown menus can break keyboard navigation if not implemented correctly. They are not inherently focusable or operable with a keyboard. If you must use them, ensure they are made keyboard accessible through proper ARIA roles, tabindex attributes and event handlers.
Creating Keyboard Accessibility in WordPress Sites
Creating a keyboard-friendly WordPress website involves several crucial steps. While WordPress already provides a reasonable level of accessibility, we can optimise it further. Here’s how you can use coding to make your WordPress site more keyboard-friendly:
1. Use Accessible Themes
WordPress has numerous themes, but not all are created with accessibility in mind. Choose a theme that is designed to be accessible. For example, the core WordPress theme that the company releases each year (‘Twenty Twenty-Three’ being the latest one) is built with accessibility at its core.
2. Use Semantic HTML
Semantic HTML is crucial for making a site keyboard accessible. It provides a means for the technology to understand the content structure, enabling keyboard navigation. For example, using the right heading structure (h1, h2, h3…) can help screen readers and keyboard users understand and navigate your content better.
Here is an example:
<h1>This is the main heading</h1>
<p>This is a paragraph.</p>
<h2>This is a secondary heading</h2>
<p>This is another paragraph.</p>3. Manage Focus Visible
It is important to show which element has the keyboard focus. A common way to do this is by adding a visible outline to the focused element. WordPress adds a thin dotted outline to focused elements by default, but you can customise it using CSS.
Here is an example code:
a:focus, button:focus {
outline: 2px solid #000;
}4. Avoid Keyboard Traps
It makes sense to ensure that keyboard users can navigate to and from all interactive elements. Avoid situations where keyboard users get stuck in a part of the page. If you are using custom interactive components like modals or carousels, then you should test them thoroughly with a keyboard before you use them. It is also better if these modals or carousels come with a more descriptive navigation option instead of just a series of dots as what happens in most cases.
5. Keyboard Accessible Menus
Ensure your menus are keyboard accessible. WordPress’ built-in menus are usually keyboard-friendly, but if you are creating custom dropdown menus, you ought to ensure that they can be navigated using the Tab and arrow keys. It is also a good idea not to have a very deep dropdown menu as it takes more time to navigate the webpage.
6. Validation
After you have made the changes and even during the process, you should keep validating your changes. Use a tool like the WAVE Web Accessibility Evaluation Tool. Test the website manually using only your keyboard and you will have a much better idea of how easy it is (or not) than what an automated tool will be able to provide. it is good to keep in mind that what matters most is not just the code you write, but the experience you create for all users, including those navigating with keyboards.
If you are not that keen on coding, then you may use WordPress accessibility plugins to improve your website. Using these plugins makes the process of making your website more accessible much easier. We look at five of these plugins you can use below.
WordPress Plugins for Improved Accessibility
1. WP ADA Compliance Check Basic Link
The WP ADA Compliance Check Basic plugin is a comprehensive solution for maintaining the accessibility of your website. As of May 2023, it has over 4,000 active installations (100,000 lifetime installations) with an average rating of 5 out of 5 but from only 6 reviews. It gets updated on average every 1-2 months.
This plugin scans your website and reports issues that could potentially impact your compliance with various standards, including WCAG 2.1 and Section 508 needs.
2. Equalize Digital Accessibility Checker Link
Equalize Digital Accessibility Checker helps identify and resolve accessibility errors on your WordPress site. It has over 2,000+ active installations (45,000 lifetime installations) with an average rating of 5 out of 5 from 27 reviews, showing high user satisfaction. The plugin is updated approximately every few weeks to 1-3 months. It helps in identifying issues like missing alternative text, low contrast text, missing form labels, and other web accessibility issues.
3. WP Accessibility Link
WP Accessibility plugin is one of the more popular website accessibility plugins and helps fix common accessibility issues in your WordPress site. It has had over 40,000+ active installations (875,000 lifetime installations) and an average user rating of 4.8 out of 5. The plugin is typically updated every 4-5 months. WP Accessibility offers a range of helpful features, like a toolbar to change font size and contrast and removing target attribute from links, among others.
4. One Click Accessibility Link
The One Click Accessibility plugin adds a range of helpful accessibility features with minimum setup. It has over 100,000 active installations (300,000 lifetime installations) and an average user rating of 4.5 out of 5 as of May 2023. The plugin gets updated every 4-5 months. It adds a toolbar toggling high contrast, large text, and links underline. It also allows you to set readable font sizes and link focus.
5. Accessibility Widget Link
The Accessibility Widget plugin allows adding a sidebar widget to change the text size in your WordPress site. It has over 2,000 active installations (33,000 lifetime installations) and an average user rating of 4.4 out of 5 from 9 reviews. This plugin is updated every 9-10 months. The widget provides an easy way for users to customise the text size on your site to their comfort, thus enhancing accessibility.
It is good to remember to check the compatibility of the plugins with your version of WordPress and your WordPress theme before you install them. Each of these plugins provides different features, so you might want to use a combination of them to achieve the desired level of accessibility.
A Final Word
Creating a keyboard-friendly site is more than a mere commitment to digital inclusion. It is about recognising and accommodating the varying needs of your users and in turn enhancing your site’s usability, overall user experience and reach. Go all out or take it step-by-step and you will see how it improves your reach and traffic numbers.
References
- World Health Organization (2021). Disability and Health. [online] Available at: http://www.who.int/en/news-room/fact-sheets/detail/disability-and-health
