A majority of websites are developed with what is believed to be the common reader, the mouse user. Although, the majority of readers, this being 89.9%, according to WebAIM, have disabilities that inhibit their way of navigating the Web. These readers use keyboards or screen readers. Unfortunately, these readers struggle to navigate websites because they are made without them in mind.
The goal of this website is to show the mouse users how it is to navigate with their keyboards. For each of these sections, you will see the most common problems that arise.
\Please note that this is an interactive guide. I recommend practicing tabbing through this site. To do this, hit the tab key to move forward. CTRL + tab will move backwards. And enter will interact the button being focused.
Plenty of frustration comes from focus management. This is caused when web designers remove focus indicators from the browser.
Example:
:focus {
outline: none;
}
Just keep it on! It's a simple fix. It can further assist by changing the color or thickness of the bubble.
.red:focus {
outline: 4px solid red
}
For further information about :focus go to A guide to designing accessible, WCAG-conformant focus indicators
Focus Traps occurs when readers are unable to leave a modal. A modal is a pop-up that prevents the user from interacting with rest of the site. The user must complete the requirements of the modal or close it. It could be a news site advertising a subscription.
Without proper testing, the user can leave the modal. To prevent this, the designer must test the site by tabbing through it. A proper modal will return focus to the first element of the site or back in the place they last were.
During the development stage, keep in mind what is focused on first after a dynamic refresh. This could be the title of an article, modal, or notification. To put is simply, the focus must change to the most relevant content on the page.
While tabbing through a page, there should be a flow to it. Practice by tabbingTo prevent confusion, the designer must make the Focus Order go through the most important elements. Keep it predictable!
The first button will change the Focus Order. And the latter will return it to the original.
It is important to keep the reader in mind when creating a site. These simple solutions bring accessibility and appreciation to keyboard users and screen readers. The Web has so much valuable information, why should we deny it to those with disabilities?
WebAIM is a great website to learn about web accessibility. It not only teaches focus indicators, but also many other ways to keep web accessibility in mind.
This web guide was not made with AI. Yippee!