An Introduction to Accessibility: Part 2
In the first article in our overview of accessibility, we discussed the standards of a site being perceivable. This essential first step is crucial, but is far from the entire picture. Once we’ve made a site or piece of digital content perceivable, we must make sure the user can take the next step and interact with the content.
The second principle of accessibility is that “user interface components and navigation must be operable.” In short, a user must be able to operate the site, regardless of ability. For most sites that contain just text information and clickable links, this is relatively easy to achieve, but it is still a frequently overlooked problem.
Operable
The typical user operates a site by reading with their eyes and scrolling with a mouse or trackpad. But what if you cannot use a mouse or trackpad? Imagine someone who suffers from a debilitating combination of rheumatoid arthritis and an autoimmune disease. Her fingers barely move, and as a result, both touch screens and trackpads are nearly impossible for her to use. As a result, she needs a mouse.
But if a mouse is not available, she’ll use the keyboard to navigate a site. Keyboard usage is a pillar of accessibility, and yet so many sites ignore it.
At the base level, the user should be able to scroll up and down using the arrow keys in the same way they would if they used a mouse. The user should also be able to use the tab key to move between links. All major browsers do this by default, unless you actively prevent it or make a JavaScript error like assigning a click event to an element that cannot receive focus.
If you’re actively preventing keyboard functionality, there’s no other way to put it: You’re going out of your way to make your site less accessible. If you’re doing so, now is the time to fix it.
One of the keys to navigating via the keyboard is the use of :focus (focus). Focus is a CSS pseudo-class in the same vein as :hover (hover). It gets triggered when an actionable (read: clickable) element holds the browser’s focus. Browsers have a default set of styles for focus. They typically involve some kind of outline or border.
Unfortunately, you cannot always rely on the browser defaults to do the job. This is because the defaults may conflict with the colors in your site’s design, causing contrast issues.
A common solution is to mirror the styles applied on hover when focus occurs. This technique is useful in a pinch, but if you have the time, the styles should be different because the two pseudo-classes are different. The difference between focus and hover is activity.
Focus is actively applied by either the keyboard or the mouse (or other assistive device). Hover is applied regardless of active intent. While an edge case, a user could be hovering over an element while keyboard focus is applied. This creates confusion as to which element is the active element, especially when navigating using the keyboard. When possible, keep the styling of focus and hover separate.
Another required operable standard is the ability to skip past repeated blocks of content. If you’ve heard the term “skip links” or “jump links,” that’s what we’re talking about here. Skip links are hidden links that appear on focus. They should be located at the top of the page, before any of your site’s layout.
When a user hits the tab key, these links should come into focus first and allow the user to, for example, skip the navigation menu they’ve already dealt with and go right to the content. Skip links are an A-level standard, which means they are required by Section 508 law. Amazingly, many sites, including some very large companies, do not have these links in place. Depending on your theme, adding skip links is as simple as installing a plugin. For other themes, you’ll have to install them yourself or hire an accessibility-focused developer to help you.
Several of the operable standards are of the AAA level. Because these standards are complex and not required by law, we won’t cover them in depth in this overview. These standards are still important and can have significant impacts on people who, for example, deal with seizures.
As you can see, operability is an often overlooked, but vital aspect of accessibility. The idea of operating a site, interacting with it, is all too frequently viewed as an enhancement. Basic movement is taken for granted, but can make or break whether or not a user sticks with you for very long. Keep that in mind as you design and develop your sites and other digital content.
Make sure you’ve read part one of our Introduction to Accessibility series, and if you’ve got all the information you need, go ahead and advance to part three. You can find both using the buttons below!
