Menu
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?
904
The <caption> element and <table> summary attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. The <caption> element is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful.
To hide text from a screen reader and display it visually, use the aria-hidden attribute and set it to true. To hide text from a screen reader and hide it visually use the hidden attribute. You can also use CSS to set display: none or visibility: hidden to hide an element from screen readers and visually.
Screen readers read letters out loud as you type them, but say “star” or “asterisk” for password fields. Screen readers announce the page title (the <title> element in the HTML markup) when first loading a web page. Screen readers will read the alternative text of images, if alt text is present.
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:
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.
.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.
.screenreader { position: absolute; left:-9999px; } <div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div> .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.
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.
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.
184
You can put a visually hidden element inside:
<div> <span class="visually_hidden">2 red</span> </div> To "visually hide", you can borrow how HTML5 boilerplate does it:
.visually_hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
