WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using CSS to hide a portion of the link text

for

From: Jared Smith
Date: Aug 3, 2009 12:40PM

There are cases (though relatively rare) where things are very
apparent visually, but where additional cues would be helpful or
necessary for screen reader users and for those with styles disabled.

On the WebAIM site (http://webaim.org/), we use hidden 'screen reader'
text in three instances.

1. We use it to hide a label for the search box. It's very apparent
visually what the text box is for because of the big "Search" button
adjacent to it. The label ensures that the function of the text box
("Search terms") is read to screen reader users. Putting it visually
within the page would be redundant.

2. We use hidden "You are here:" to identify the beginning of the
article breadcrumbs. Breadcrumbs are a fairly common visual convention
when seen as a shole, but a screen reader user may not understand that
convention until they are probably a few links into the breadcrumbs.

3. We identify the beginning of advertisements at the bottom of
articles. The Google ads are apparent visually, but it was important
that they be identified as such to those who cannot see the "Ads by
Google" text within the ad.

Each of these are cases where content and information is already
apparent to sighted users and where the additional text ensures
accessibility. Providing lengthy descriptions or explanations for
screen reader users only is not necessary. Care needs to be taken when
hiding content just for screen reader users, particularly if the
hidden content contains a functional item (link, button, etc.)

We have an article on this at http://webaim.org/techniques/css/invisiblecontent/

Jared Smith
WebAIM