Ever wonder what would happen if your mouse suddenly died in the middle of browsing a website? How would you navigate through each page? Thinking about this scenario is a good way to test website accessibility. You could use the arrow keys to move up and down the page. If you are familiar with the TAB key you might know you can move from link to link, and once a link has been brought into focus you can “click” the link by pressing the enter key. Imagine they were your only options to browse the internet day-in and day-out. It’s challenging, and for a portion of the population accessing the internet, this is their day-to-day experience.
For users restricted to a keyboard due to motor disabilities, the arrow and TAB keys are vital to their ability to effectively navigate a webpage. In order to work through a webpage, this makes an assumption that the website is structured in a logical way, not just visually, but fundamentally. According to a 2012 survey by the Census Bureau, 9.9 million (8.2%) have difficulty lifting or grasping, which is the highest percentage of users compared to other forms of impairment.
This brings to light an important discussion when discussing website accessibility: website hierarchy.
Here’s a look back at our ADA Compliance series in case you missed an article:
- Part One: The Importance of Having an ADA Compliant Website (read here)
- Part Two: ADA Website Compliance & How Color Impacts Your Website’s Accessibility (read here)
- Part Three: WCAG Compliance & Rethinking the Carousel Trend (read here)
- Part Four: Website Accessibility Test … Is Your Website Navigable Without a Mouse?
Tabindex traps
The order in which items can be tabbed through is called the tabindex. To meet WCAG 2.0 Level AA compliance the tabindex must follow a consistent top-to-bottom, left-to-right navigation structure. Easy enough, right?
“Tabindex traps” refer to elements on the website that can be tabbed to, but will stop the tab key by not allowing users to unfocus from the element. Prohibiting any person, let alone a person with a disability, from freely browsing a website is bad user design, and even worse for accessibility.
A common instance where you might find a tabindex trap is with a poorly designed pop-up menu. Without an escape or close button, users are forced to complete an extra action or refresh the page in order to leave the menu because there is no way for them to remove the menu.
Ensure items are focusable
The easiest way to evaluate the focus state of interactive elements is to simply begin at the top of your website and use the TAB key to go from top to bottom until looped back to the top of the page. Spending this short amount of time will help you identify potential issues with the tabindex structure.
When an element is brought into focus, there should be a visual identifier indicating item is selected. Chrome displays a blue outline around any item in focus on in its browser, and both Firefox and Edge display a dashed border. Even though all browsers have their own default styling for focusable items, situations may arise where the standard browser focus is not enough. Fortunately, it is possible to style focus states through CSS markup.
Inaccessible Menus
Any element on a website that is accessible by mouse must also be able be accessible by keyboard. Ensuring keyboard accessibility includes keyboard-dependent users, falls in line with accessibility best-practices, and is compliant with WCAG 2.0 Level 2 standards.
Menus are critical components of a website. Without them, navigating to other pages would be nearly impossible. While a consistent, navigable structure is best for everyone, in the context of accessibility for users without the ability to use a mouse, consistency cannot be stressed enough. Screen reading software reads through lists in a logical structure. Having a menu that is out of order, or with inappropriate tab index values, will frustrate keyboard users unable to easily move (if at all) in and out of the menu.
Skip to content
Having to wade through the navigation before getting to the content body is a chore. For users dependent on keyboards or screen reading software, this tends to be their only choice unless a shortcut is provided for them to bypass the menu.
Websites often incorporate a hidden link above the header area allowing keyboard users and screen readers to skip the navigation area and go straight to the body of content. Secondary navigation may also benefit from a “skip navigation” shortcut if there are more than a few items in the menu.
Review of ways to aid website accessibility
Here is a recap of ways to improve website and keyboard accessibility on your website:
- Hide links to bypass primary and secondary navigation
- Display a focus state when links and inputs are tabbed into and selected.
- Avoid “tabindex” traps
- Keep navigation simple, logical and following a hierarchical structure
- Provide a sitemap page where all of the pages on the website are in listed a single-column, especially if you have a complicated navigation structure and want an alternative for keyboard users.
Need help evaluating your website?
Have a concern about website accessibility and unsure how to begin fixing the issue? Give us a call at 478-621-4491 or email us to find out how we can help.