You may have heard that display:none is bad for accessibility and that you should use off-left positioning instead. It isn’t about using display: none; or off-left positioning. It isn’t just about screen reader users. It’s about making an interface work for everyone with efficient keyboard access for everyone that needs it—sighted or not.
Have you heard this before?
If you use display:none, then screen readers don’t get that content. It is better for accessibility to use off-left positioning instead of
The next thing you know, someone has it in their head that this is a binary situation:
display:none is bad for accessibility and off-left positioning is good for accessibility.
Here’s the thing, though–sometimes you WANT to use
display:none. Sometimes you want to use off-left positioning.
I actually saw an example recently that used off-left positioning and they said right in the comments:
/* keep this off-screen because it is more accessible than display:none */
Off-left positioning is a technique that is often used in image-replacement that allows you to essentially create a text alternative for CSS background images that are used in your designs. It has also been used for other things like hiding menus and other content off the screen–often in the name of accessibility.
The case I saw the other day was using off-left positioning for creating a CSS only hierarchical menu.
Here’s an example of how it was done:
There are 4 menu items that have sub-items that show when you use the mouse to hover over the items.
Now, start to tab through that page with your keyboard. What happens when you tab from the “About” link? Let me highlight this for you:
The keyboard focus is placed on the next link (“The Company”) that is still hidden from view because it is hidden using off-left positioning.
The keyboard focus is now invisible to someone that is a sighted keyboard user (remember, screen reader users aren’t the only people that use a keyboard for navigation!). The focus disappears until “Services” gets the focus and then disappears again and again after each main navigational item as the off-left sub-menus have the focus.
Fixing the problem
There are several ways to solve the problem, each of which take into account two key considerations:
- Keyboard access to all content for everyone.
- Elements that aren’t visible on the screen shouldn’t (generally) be able to receive the focus.
Here are a few options that we’ve cooked up for you to look at. And please, while you’re looking at these examples, go through them with a keyboard (both forwards and backwards) to see the kind of keyboard access they provide compared to the original.
Option 1: use
display:none instead of off-left positioning and set the menu such that
:focus doesn’t turn it to be
display:block. This would require the “landing pages” for each of the top level menu items to have the equivalent sub menu items readily available on the page. http://examples.simplyaccessible.com/css-menu/option-1.php
Option 2: use
display:none and have a
:focus state to match
:hover that makes it
display:block and brings the sub menu items onto the page, allowing them to receive the focus, but only while they are on the screen. http://examples.simplyaccessible.com/css-menu/option-2.php
Option 3: use off-left positioning but use
:focus to bring it back on the screen. Again, this would bring the sub menu items onto the page and allow them to receive focus, but only while they are on the screen. http://examples.simplyaccessible.com/css-menu/option-3.php
Note: We aren’t going to include an ARIA example here. That’s for another article 🙂
The real problem
The problem isn’t so much that off-left positioning was used. The problem is that it wasn’t used appropriately combined with the faulty assumption that we need to
use off-left positioning because it is more accessible than display:none. Someone came to understand through their own experimentation or hearing or reading that
display:none isn’t good for accessibility and THEN implemented a solution without thoroughly testing for full keyboard access.
If you’re developing anything for the web make sure that you have efficient keyboard access to everything, and that you’re not allowing the focus to go off the screen to elements that are hidden off-left.
Now that would be better for accessibility.