We all have our own way of doing things. Sometimes we do things differently just out of personal preference. Other times, we do things differently because it’s the only way we can actually do it. For example, when I complete an online form, I prefer to tab through each field rather than stopping to click on each field with a mouse and then returning to my keyboard to complete the field. That just takes too long. While this is my preference, for some users, it’s the only option because they can’t use a mouse. Whether it’s personal preference or a necessity, having a website that is keyboard accessible is vital to having a good user experience.
Keyboard accessibility may be the most important feature to implement when creating accessible websites. A website that is designed with keyboard accessibility is a website that allows you to get to every interactive element on a web page using only a keyboard. Keyboard access is how someone who cannot use a mouse will navigate a website.
Who needs keyboard access
Oftentimes, when someone hears web accessibility, they will think it is mostly for blind users. However, web accessibility covers a wide range of disabilities. Here are a few examples of people who benefit from a keyboard accessible website:
- Blind users
- Someone with tremors that hinders their fine muscle control
- Someone who has little or no use of their hands
- Someone without hands
- Someone with a temporary disability such as a broken arm
- Someone who does not have access to a mouse or touchpad
In addition to helping those who need to use the actual keyboard, keyboard accessibility also benefits someone who uses voice control. Assistive technologies used for voice control also rely on keyboard commands.
How do I test for keyboard accessibility?
Since keyboard accessibility is a crucial component of an accessible website, we’re relieved that it’s one of the easiest accessibility tests anyone can perform on a website. Follow the steps below to experience a website without a mouse. Not only will these steps test the keyboard accessibility of your website, but it will also provide perspective on the importance of keyboard accessibility.
- Click on the browser tab and then put your mouse aside. You may be tempted to grab the mouse, but resist the temptation.
- Use the TAB key and begin tabbing through the website.
- Each time you press the TAB key, you should be able to see where you are focused. The video below shows how a keyboard accessible website allows you to visually follow where your focus is with each tab stop. The TAB key is used to tab through each interactive element of the web page. Keyboard focus indicators are present.
- When you come to an element such as the menu navigation or quick links where more options are available, use the SPACEBAR, DOWN ARROW, or ENTER key to expand the additional options. Once expanded, use the TAB or ARROW keys to navigate through the list.
- Confirm that focus is brought to each interactive element on the page by looking for a focus indicator. The focus indicator should be more than just a color change since not everyone can see color. In the example above, you see changes such as text-underline, enlarging elements, and dashed imaged outlines.
If you do not see focus on an element, this means the element is not keyboard accessible, and you need to perform remediation to remove accessibility barriers on your website.
How do I fix keyboard accessibility errors?
If your website does not have any keyboard focus indicators present, the first thing to do is check your style sheet. Locate your CSS file and ensure you have a style set to add focus to links. You should find something similar to this:
a:focus {
outline: 1px dashed #000;
}
This style indicates the addition of a 1px dashed black outline when a link is the focus.
If you do not see any styles in your CSS for :focus, add the above style and try tabbing through your website again. This may resolve most of your keyboard focus issues. Depending on the colors of your website, you may need to adjust the color of the outline. While outline is not the only way to bring focus to an interactive element, it is one of the most popular techniques.
If, after adding the above CSS, you still do not see a visual keyboard focus indicator, it’s time to do some further investigating. View the HTML of your web page and look for instances of the attribute tabindex. Ensure elements do not have a negative tabindex (e.g., tabindex=”-1”). If you find a negative tabindex that can be removed without interfering with its intended functionality, remove it and test to see if this solves the issue. You may need to adjust some JavaScripts to allow scripting elements to receive keyboard focus.
Additional considerations for keyboard navigation
Besides ensuring each element receives keyboard focus, we need to consider additional techniques to improve keyboard accessibility. The following accessibility techniques are considered best practices in web design and development:
- Include skip links
- Use “skip to main content” links to allow users to skip navigation menus that are repeated on each page.
- Use “skip list” links to provide a way for users to skip long lists of links.
- Use a proper heading structure to allow screen reader users the ability to use keyboard shortcuts to navigate quickly to different topics on a web page.
- Include ARIA landmarks and/or standard HTML5 structural elements (e.g., footer, header, nav, etc.) to allow users to jump to various sections on the page.
An accessible website is about more than just meeting a standard or complying with accessibility laws. A website designed and developed with accessibility in mind provides an inclusive user experience so everyone can access and enjoy all of the information on your website.
Our DIY Website Accessibility Audit article provides additional information about testing your website for accessibility. Of course, if you need assistance conducting an accessibility audit, let us know. In addition to designing and developing accessible websites, we provide web accessibility services such web accessibility audits, web accessibility training, and document accessibility remediation. Essentially, when it comes to web accessibility, we do it all. Use the form below to contact us, and find out how quickly we can make your website accessible to everyone.