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

---

• None