Learn how keyboard accessibility can serve as your foundation for an accessibility-ready theme, helping you create a solid base.
When you build a house, you start with the foundation. It becomes the base upon which you form everything else around. Without it, your house could crumble because of improper construction. Web accessibility shares some of the same principles. You need a solid foundation to have an accessible website and WordPress theme.
Keyboard accessibility can serve as your foundation for an accessibility-ready theme, helping you create a base that you can build on with confidence. Once you have it in place, accessibility becomes easier as you go.
Keyboard Accessibility Principles
But where do you start? You can tackle any of the four principles below one at a time. Pick one, practice implementing it in your next theme, and you’ll see the benefits. Bringing these to your project matters more than mastering them in any specific order.
Use the Keyboard
Know how to navigate with a keyboard alone. WebAIM, a non-profit organization focused on web accessibility, has an excellent article on keyboard accessibility. It includes how to use a page with the keyboard alone. From the article:
With modern web accessibility, there are many ways in which keyboard accessibility can become difficult or impossible. Fortunately, keyboard testing is easy – simply put the mouse away and test the page using only a keyboard. The tab and shift + tab keys can be used to navigate through links and form controls, and Enter can be used to activate links, buttons, or other interactive elements.
Who uses the keyboard every day on the Web? People who are blind use it almost exclusively. People with low vision may also use it if a page can be enlarged and the contrast is high enough. Those with motor disabilities often can’t use a mouse. Alternative devices also come into play too, like those that allow users to “puff and sip,” and work with airflow from the mouth. These devices interact with the computer similar to a keyboard, so they benefit from proper keyboard accessibility.
Watch your Source Order
Keep your source order in mind. Source order means how your HTML is ordered and how it flows on the page. As you create your theme, make sure that it’s logical. Turning off CSS provides a good, simple way to test this. Once everything on the page becomes linearized, does it still make sense?
Links and Buttons are Links and Buttons
Use semantic HTML and controls that have accessibility already built in. This means that links
Home and buttons
Main Menu are your best choice. Only three elements in HTML can be focused on by default: links, buttons and form fields. If you use a
, then you can style it however you’d like with CSS.
Don’t Lose Your :focus
Design and pay attention to the
:focus states for your theme. Users with disabilities have an array of needs that don’t always start with a screen reader. Many users access the web using a keyboard alone, or other devices that rely on keyboard access to navigate the web. Having visual
:focus styles on elements like links, buttons and form fields means they can see where they are as they navigate. For example, Underscores comes with this bit of CSS on links in the Reset section:
outline: thin dotted;
Having a thin, dotted outline on
:focus is considered the default focus style in most browsers. It’s a good place to start, but if you’d like something different, you can design it. However, do not completely remove focus styles by setting
outline: 0. That leaves your theme unusable by people who depend on the keyboard. Focus states can often mimic hover states, but they do not have to be identical. The important point here is that they do not rely on color alone. Many users have varying degrees of color blindness and/or low vision. Relying on color alone can become problematic. Using an outline, border or some other kind of shape helps your focus styles shine.
Potential Problems and Enhancements
Keyboard accessibility can become more complex in a few places. Patterns like dropdown menus, menu toggles, tabs, and modals require extra care and thought, but the same principles apply. Knowledge of the
tab index attribute and ARIA roles and properties come in handy here. These advanced techniques are beyond the scope of this article, but some useful posts and tutorials have more information:
Further Reading and Resources
Let me know if you have any questions in the comments. Happy theming with accessibility in mind!