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.
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? My mom 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.
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,” 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. Genesis users can rely on Genesis Accessible by Rian Rietveld. 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 deal with seizures. They deserve their own space and will be addressed later.
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.