Please, Please Don’t Forget the Keyboard Wielders
While it may be normal for you to use the internet with a mouse to click on things, this is not the case for a pretty significant amount of people. These people really need your help online.
These people have poor vision or are blind, or they have muscular issues that prevent them from using their mouse effectively to click accurately. Estimates from US Census show there least 7 or 8 million people with sight disabilities and about half those are internet users. Factor in the muscular disabilities and the oddball non-disabled that just hate the mouse and we’re talking a lot of people that need your website to be friendly to them.
And the reality is, most websites don’t support these basic accessibility fundamentals.
At Highforge, we like to go the extra mile to make sure these people can use websites as well as the normal mouse clickers can. You can do this too and it’s not difficult at all.
Here are a few tips to help ensure at least a basic level of keyboard accessibility for your users.
The wonderful :focus state
In case you’re not familiar with the
:focus, it’s a state that gets triggered when selecting a link by keyboard (using the tab key). Much like the
:hover state, it can be styled with CSS just as well.
Now imagine hovering over a link with your mouse and nothing happens. The mouse cursor doesn’t change, and the link’s text doesn’t change. For all intents and purposes, the link doesn’t actually look like a link or seems like it’s functioning. In fact, let’s say the mouse cursor is completely invisible. This is essentially the equivalent of trying to browse a website without a visible :focus state with a keyboard. Needlessly difficult.
A simple fix is to simply apply the :hover style to :focus as well and go from there. In some cases though, you will want to consider giving a link some special attention. A good example for this is the so called “Skip content” link.
Skip links are links all the way at the top of your markup. They are generally hidden, and will generally only be registered by screen readers. Their main purpose is to skip the droning of navigating through the website and to make things a bit easier on your keyboard wielding visitor.
Not giving these people the option to skip the navigation and go straight to the content will most likely make them leave your website, annoyed, because they just tabbed through your navigation for the fifth time needlessly.
Adding one of these helpful functions is very simple. All you’ll need is an ID on the content wrap so that you can link to it and then drop something like the following right after your body tag:
<a href="#content">Skip to content</a>
One caveat however. As it turns out, some browsers (still) don’t handle this kind of link properly as far as tab order is concerned. IE9 and, surprisingly, Chrome don’t properly shift focus to the element you’re linking to and so you wouldn’t actually focus the first link in the content when you hit tab. This kind of makes the skip link a bit useless. There is a fix available for this, but that is a subject for a different post.
The point here is to make your site accessible to as many people as possible, including those who use a keyboard to navigate the Internet. By using these fixes, you take a big step in that direction. And this is just one of the little things we do at Highforge to make the websites we build that much easier to access.
If your organization would like a comprehensive audit of your website’s accessibility for disabled users, give us a shout, we’d love to help.