Out of sight

On this page:

Post details
Comments
Add a new comment

Post details

By bim. Hiding text off the screen view using CSS is one of the ways that web authors can provide contextual information for screen reader users. This is just to make the information that is visually obvious, potentially audible. It's a great help, but you do need to be careful which CSS technique you use.

If DISPLAY: NONE; or VISIBILITY: HIDDEN; is used, there's a very good chance that screen readers will "obey" this rule, and won't read the hidden content. The surest technique is negative positioning. this only places the text out of screen view, but doesn't hide it from screen readers. So if the content you are styling out of sight should be available to screen readers, try the following rule:
.screenreader {
position: absolute;
left: -999em;
}
This way, most screen reader users will benefit from your thoughtful additional content.

Comments (9)

Tag: Hidden barriers

Posted at: 13/08/2007 9:11 AM by Verity Cork

Comments

Most users?

Ben 'Cerbera' Millard said:

When you say "most screen reader users will benefit" does that mean some won't? If so, could you be more specific about this?

Posted at: 12/4/2010 8:35 PM by Verity Cork

Access Matters

Steven Tew said:

Access Matters has tested this. They have published a table showing the results for different methods of hiding information from visual display.

http://www.access-matters.com/screen-reader-test-results/

Window Eyes 4.5 and 5 with IE 6 seem to be the most problematic with all the methods tested. Methods 8, 9 and 11 seem to have the broadest screen reader reach.

Posted at: 12/4/2010 8:38 PM by Verity Cork

Transparent images

John said:

Just a thought, for hidden text would a transparent image say 1px with the alt text give the desired effect?

I know when people use such transparent images for layout spacing, their alt-text is read out. It was pointed out to me, that as this isn't controlled via CSS, it will remain hidden when CSS is disabled. However, with Bim's CSS example, it becomes visible while CSS is disabled.

Also IE treats alt text as tool tips where as other browsers rightly don't.

Posted at: 12/4/2010 8:42 PM by Verity Cork

"display:none"

Tyler said:

As someone who designs CSS-based web-pages, I make frequent use of "display: none" to replace text with background graphics. I've recently learned that this is supposedly not a good practice because of issues with screen readers, which may obey the CSS command by not reading the link.

Since then, though, I've been wondering -- WHY do screen reader applications even look at the CSS file?

It seems to me that CSS files are intended for visual formatting, and carry no content. So why isn't the default setting on screen readers to ignore the CSS file altogether?

(And, anticipating one possible answer -- that people who are visually impaired but not entirely blind may want stylesheets to load -- then in that case why not have a built-in option to ignore the "display: none" specification in the stylesheet? It is rarely used for anything BUT image replacement.)

Posted at: 12/4/2010 8:45 PM by Verity Cork

"display:none"

Bim said:

You're absolutely right, "display: none" does prevent most screen reader from announcing hidden content .

You aren't quite right in thinking that this is only used for image replacement though. It's also used to display and collapse menus where, if screen readers ignored the "display: none" command, their users would have the dubious treat of having to read every second and third level link on a page, even though they aren't visible. I

t's also used for showing and hiding FAQ answers on some pages, and because that technique is used, rather than in-page links, the screen reader would need to read through all unwanted answers until they reach the one they want.

Posted at: 12/4/2010 8:48 PM by Verity Cork

Keyboard navigation

Gavin said:

I find that the method you propose is good for screen-readers however is not so useful for those who rely on using the keyboard to navigate around a page without any sound assistance.

If I open the page in Firefox and tab into the page, the focus moves to the off-screen link but there is no indication that I am off screen. I feel this would be very confusing to users of keyboard navigation, although I haven't any direct experience with keyboard users. Would you consider this an issue?

Posted at: 12/4/2010 8:52 PM by Verity Cork

Hiding text off screen

Andrew said:

@ Gavin - thanks for your comment. You've picked up on an important caveat regarding hiding text off-screen. We don't recommend hiding links off-screen for the reason you describe - keyboard-only users who can see the screen but may be tabbing around the page. Tabbing to hidden links can give the impression that the site has stopped responding, particularly if there are a number of hidden links one after another in the tab order.

Bim's original article doesn't advocate hiding links off-screen, only text (i.e. something which won't receive keyboard focus). This technique is normally employed to add additional hidden headings to indicate sections of a site, e.g. main navigation, footer etc. This technique can also be used to add some additional hidden text to a visible link to give it more context for screen reader users.

Our primary recommendation is that no links should be hidden off-screen (including skip links which can benefit keyboard-only users and screen magnifier users). If links are hidden off-screen however, additional CSS should be added that makes them visible again when they receive focus. This is done by adding rules to the focus and active pseudo classes which positions the link back in the viewport when they are applied.

Posted at: 12/4/2010 8:54 PM by Verity Cork

Skipping tabbing

Galeel said:

@Andrew - thanks for your above comment.

Can you provide alternate way to skip the tabbing on off-screen links. (focus and active pseudo classes are not browser compatible and i don't like to show the off-screen link when it receives the tab focus)

Posted at: 12/4/2010 8:57 PM by Verity Cork

Links

Andrew said:

@ Galeel - i'm not aware of any method that would allow you to skip the tabbing of off-screen links i'm afraid. The links could be assigned a tabindex value of -1 which would remove them from the tab order completely (rather than being a mechanism to skip over them). I would strongly advise against this though, as it would make the links completely inaccessible to keyboard-only users, who may well benefit from their presence.

The focus pseudo class isn't implemented well in Internet Explorer 6 and below. That's why a combination of focus and active pseudo classes need to be used.

The following sites have examples of off-screen links that become visible on focus that work cross-browser:

http://www.abilitynet.org.uk/
http://www.soundtalking.co.uk/

I would take a look at the CSS they have used to achieve this. The RNIB's take on the issue is that links should always be visible however, particularly skip links, for the benefit of keyboard-only and screen magnifier users.

Posted at: 12/4/2010 9:00 PM by Verity Cork