Web Access Centre Blog

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.

Do be careful to define a base (natural) language on all web pages. Otherwise, defining other languages can result in the entire page being read by a screen reader trying to use the pronunciation rules for the wrong language.

This can happen where the HTML tag isn’t given a LANG attribute, for instance:
<httml lang="en">

The problem arises if there is any coded “change” to the natural language on the page, because the “change” is, in fact, the first time that a language is defined. So everything after it may be pronounced as if it is in the “foreign” language. Continue Reading »

In forms that have fairly long implicit labels, the BR element is the worst way to control where the text will wrap. Screen readers may only read the text that comes after the BR element, because of course, it’s perfectly legitimate to have a line of instruction, followed by the BR element, followed by the implicit lable.

For example, if a label were: “If you have more than 14 chickens,
how many do you own?” Many screen reader users will hear only “how many do you own?”

There are two simple ways to avoid this issue.

Here’s another series of articles, designed to uncover techniques or practices that create difficulties for a wide range of disabled people. These are all techniques we’ve found in use on the web, on professionally run sites.

Some of the hidden barriers are created by coding errors or ommissions, others are due to too little or (conversely) too much thought being given to the needs of screen reader users. Continue Reading »