In HTML, how can I have text that is only accessible for screen readers (i.e. for blind people)?
I have a website that has colored divs with numbers, e.g. a red block with the number 2 inside of it. The color is important to understanding. A blind user emailed me asking if I could make it say "2 red" for his screen reader.
I tried adding this as an alt="2 red" but he said that didn't do anything. He thinks it might only read alt tags for images.
Is there a good way to do this for divs?
Answer
As far as alt text, you are correct, that only works for images.. But you can use aria-label in place of the alt attribute for non-image elements like so:
Solutions that work
ARIA Labels ★ ★ ★ ★ ★ ★
aria-label (not to be focused with aria-labeledby) is used to add off-screen descriptive content to an element much in the way an alt= attribute adds off-screen descriptive content to images to be used when the images are not displayable.
The difference is, aria-label can be used on non-image elements.
<div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
result (screenreaders): test A
result (regular): test B
-->
The addition of the aria-hidden attribute hides the inner text.
Position + Clip + Collapse ★ ★ ★ ★
.screenreader {
position: absolute !important; /* Outside the DOM flow */
height: 1px; width: 1px; /* Nearly collapsed */
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}
The clip is used to hide the 1px x 1px element completely, otherwise it will still be visible on the screen.
Position ★ ★ ★
.screenreader {
position: absolute;
left:-9999px;
}
<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>
Indent ★
.screenreader {
text-indent: -5000px;
}
The actual indent value is not important as long as it's outside of the range of your pages layout. The example will move the content to the left 5,000 pixels.
This solution only works for full blocks of text. It won't work well on anchors or forms, or right-to-left languages, or specific inline-text intermixed with other text.
Will not work
visibility: hidden; and/or display:none;
These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you don't want read by screen readers.
width:0px;height:0px
As above, because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result. Do not size content to 0 pixels if you want the content to be read by a screen reader.