As business owners, we design our websites with our clients in mind. A keyboard-accessible business website is one that everyone, including past, current, and potential clients, can fully access using only the keyboard. An accessible website keeps us in compliance with accessibility laws and provides an inclusive user experience for everyone. It’s simply another way to make our business rise above the rest.
Whether we offer a one-of-a-kind service (like Biz Webmasters) or a similar service to other businesses, we each have our individual ways of doing things. Sometimes we do things differently because of personal preference. At other times, it may be the only option we have. For example, when I complete a web form, I prefer to use the tab key on my keyboard to tab through each of the form fields rather than using my mouse to click on each form field and return to my keyboard to complete the field. While this is my personal preference, it’s the only way some users can interact with an online form because they can’t use a mouse. Regardless if it’s a personal preference or a necessity, having a website that provides keyboard accessibility is vital to providing a good user experience to everyone.
Keyboard accessibility is one of the most important features we implement when designing an accessible business website. A business website designed with keyboard accessibility is a website that allows you to interact with every active element on a web page using only a keyboard. Keyboard strokes are how someone who cannot use a mouse will navigate your website.
Who benefits from keyboard accessibility?
When we talk about web accessibility, most people think it is mostly something that only affects blind users. Let’s debunk that myth. Web accessibility covers a wide range of both permanent and temporary disabilities. Consider the following examples of people who benefit from a keyboard-accessible website:
- Blind users
- A person with tremors that hinders their fine muscle control
- A person who has little or no use of their hands
- A person without hands
- A person with a temporary disability such as a broken arm
- A person who does not have access to a mouse or touchpad
In addition to helping someone who can only access a website by using the keyboard, keyboard accessibility also benefits someone who uses voice control. Assistive technologies, such as screen readers that use voice control, rely on keyboard commands.
How do I test my business website for keyboard accessibility?
Since keyboard accessibility is a crucial component of an accessible business website, it’s great that it’s also one of the easiest accessibility tests anyone can perform on a website. Follow the steps below to experience a website without using a mouse. Not only will following these steps test the keyboard accessibility of your business website, but it will also provide perspective on the importance of keyboard accessibility.
- Click on the browser tab and then put your mouse aside. Resist the temptation to grab the mouse.
- Begin tabbing through the website using the TAB key on your keyboard.
- If your business website is accessible, you should see a visual focus indicator on an active element each time you press the TAB key. 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 was used to tab through each interactive element of the web page. Keyboard focus indicators are present on each active element. through each interactive element of the web page. Keyboard focus indicators are present.
- When you come to an element such as the menu navigation 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.
- Look for a focus indicator, and confirm that focus is brought to each interactive element on the page. Not everyone can see color, so ensure the focus indicator is more than just a color change. In the example above, you see changes such as text-underline, enlarging elements, and dashed imaged outlines.
If you lose focus, this means there are active elements missing a focus indicator and the website is not keyboard accessible. If this happens, you need to perform remediation to remove accessibility barriers on your business website.
How do I fix keyboard accessibility errors on my business website?
If your business website does not include keyboard focus indicators, the first thing to do is view your local style sheet. Locate your CSS file and ensure your styles include a style that sets focus to links. It may look something like the style below that indicates the link focus with the addition of a 1px dashed black outline.
a:focus {
outline: 1px dashed #000;
}
This style indicates the addition of a 1px dashed black outline when a link is the focus.
If your CSS is missing a :focus style, add the above style, and then try tabbing through your website again. Hopefully, this will resolve most of your keyboard focus issues. Depending on the colors of your website, you may need to adjust the color of the outline to ensure it passes color contrast ratios. You can use a tool such as SBF Consulting’s Color Contrast Checker/Analyzer to test contrast ratios. While using an outline is not the only way to bring focus to an interactive element, it is one of the most popular techniques.
If a visual keyboard focus indicator is still missing after adding the above CSS, it’s time to do some further investigating. View the HTML of your web page(s), and look for instances of tabindex. Ensure elements do not have a negative tabindex (e.g., tabindex=”-1”). If a negative tabindex is on any of your interactive elements, try removing it, and test to see if this solves the issue. To allow scripting elements to receive keyboard focus, you may need to adjust some JavaScripts.
There’s more to keyboard navigation than pressing tab
Ensuring each element receives keyboard focus is a good place to start, but there are additional techniques to consider to improve keyboard accessibility. The following accessibility techniques are best practices in business web design and development:
- Skip links
- Using “skip to main content” links allow users to skip navigation menus that are repeated on multiple pages.’
- Using “skip list” links provides a way for users to skip long lists of links.
- A proper heading structure (e.g., h1, h2, h3, etc.) allows screen reader users and other assistive technology users to use keyboard shortcuts to navigate quickly to different topics on a web page.’
- ARIA landmarks and/or standard HTML5 structural elements (footer, header, nav, etc.) allow users to jump to various sections on the page
An accessible business website is about more than just meeting a standard or complying with accessibility laws such as the Americans with Disabilities Act or Section 508. A business website designed and developed with accessibility in mind provides an inclusive user experience so everyone can access and enjoy all of the information your business provides on your website.
School Webmasters’ DIY Website Accessibility Audit article provides additional information about testing your website for accessibility. If you need assistance performing an accessibility audit, let us know. In addition to designing and developing accessible business 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 find out how quickly we can make your website accessible to everyone.