CSS in Action: Invisible Content for Screen Reader Users

Sample of the pdf document :

Hiding Text from Sighted Users

Fortunately, there are ways of resolving the conflicts between the needs and desires of visual users and those of screen reader users. This paper examines a few circumstances in which hiding text from visual users can be beneficial, and proposes a solution which allows HTML to be hidden without compromising the accessibility or semantic integrity of the document, and which works across browsers and platforms.

The essence of the technique proposed in this document is to hide the content above the viewable area of the browser and to also shrink the content to a height and width of 1 pixel. The combination of moving the content and shrinking it is what allows this technique to work across a wide range of browsers and platforms. 

Sample Code 1:

 

The following code should appear in the style sheet:

.hidden
{position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;}

The CSS class should then be referenced from within the tag of the element being hidden, as shown:

<div class="hidden">This text is hidden.</div>

Sample Code 2 :

The following code should appear in the style sheet:

.hidden
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

h1
{
height:30;
width:60;
background-image:url(h1.jpg);
}

The CSS class should then be referenced from within the tag of the element being hidden, as shown:

<h1><img src="h1" alt="" height="30" width="60">This heading text is hidden.</h1>

Sample Code 3 :

The following code should appear in th............

   Click here for  Download PDF / FREE