Sharks in the Water 3: Now See Here!

If you’ve added alternative text for images, and proper headings and a skip navigation link like we explained in our previous post in this series, you’re on your way to full accessibility for the visually impaired. There’s another consideration that if missing may sink your visitor’s raft outright, though, and keep them from paddling around your lagoon almost at all, and that is the ability for a visitor to navigate your menu by using their keyboard.

You see, many menus today are fantastic for sighted people: they slide, they flash, they drop down, they change colors. Unfortunately, blind visitors won’t get any of that, and in fact some of that may block them from being able to use the menu at all. Now, almost always the first level of the menu will be keyboard accessible. That is to say, what you can see of the menu without hovering over it with a mouse can usually be accessed with the keyboard tab and enter keys.

It starts getting tricky, though, with the secondary level, or what sighted visitors would easily understand as drop-down menus. Sometimes visitors who are navigating by keyboard (including both the blind and also the low-motion visitors that we talked about in our last post), won’t be able to access that second level. Sometimes the technologies that were used to build the menu didn’t have accessibility in mind, so they were built in a way that excludes keyboard navigators. This probably wasn’t the intention of whoever made the technology you used, and it certainly wasn’t your intention, but nevertheless several times out of ten the menu for the site will be incompatible with keyboard navigation, and therefore inaccessible.

Unfortunately, there’s no one-size-fits-all method for making every menu keyboard accessible, but any competent web development firm should be able to modify the code to make it so. A big part of this is making it so that when someone tabs into a drop-down menu, it also visually drops down. This will help the low-motion folks who would otherwise find that menu terribly confusing. Unfortunately, I’d guess that on top of the two or three out of ten menus that won’t even let you tab into their submenus, probably one or two that do won’t drop the menus down visually when you do tab into them. It’s probably not fifty percent of menus online that are inaccessible by keyboard, but it is a substantial number of them, and yours shouldn’t be among their ranks!

While we’re making demands of your web development firm, here’s another easy one that you should make, not so much to help the blind visitors as the low-vision ones, and folks navigating by keyboard: make the focus indicator bold. The focus indicator is usually an outline that tells you what is selected when tabbing through a webpage. Most browsers have a default style for this, so visitors will get something even if you don’t define the styles yourself, but the browser defaults are inconsistent, not that attractive, and sometimes not even very helpful.

The thin dotted line that Firefox gives you, for example, isn’t all that apparent and you have to really be looking for it to even notice it. If you have to scour the page for the indicator while navigating with the keyboard, the indicator isn’t indicative enough! I recommend a two-toned outline (or actually a box-shadow) in a dark and a light brand color to make sure that it jumps out at you, whether the background is light or dark. Usually it’s one or two lines of code in your stylesheet, and it’s well worth it.