Using CSS to Hide Audible Text Off The Screen

• I have many links (Anchor Text) on the page that say the same thing. How can I make them distinct so a screen reader user can tell the difference?
• Or, I have a form field that needs a LABEL, but there is no text on the screen to use. How can I create a LABEL that is not seen by the visual user but is read by the screen reader?
• Or, I need to create an H tag to assist navigation, but don't have any space on the screen for one. How can I hide an H tag.

Use CSS to hide some text off the screen. In this manner it is hidden from sight, but is still read by the screen reader.

---

Hiding Link Text:

<style type="text/css"> a b.hidden { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -999px; } </style> <a href="#">Edit <b class="hidden">Hidden Information</b></a>

---

Hiding LABEL Tags:

<style type="text/css"> .hidden { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -999px; } </style> <LABEL FOR="foo" class="hidden">Hidden Label</LABEL> <INPUT TYPE="text" ID="foo">

---

Hiding H Tagss:

<style type="text/css"> .hidden { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -999px; } </style> <hr> <H1 class="hidden">This is a hidden H tag</H1>

---

Hiding stuff from both visual and screen reader users

.hidden { display: none; visibility: hidden; }

---

Hiding stuff from the visual user while making it readable to the screen reader.

.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px); /* for IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); margin: -1px; border: 0; padding: 0; width: 1px; height: 1px overflow: hidden; }

---

• None