Menu
Screenreaders will read whatever string is set to the "alt" attribute. The use of this attribute is specifically for image tags.
If I have a div like so:
<div id=myCoolDiv tabindex="0"> 2 <div> Is there a way to have a screen reader pickup an attribute to read a string the same way an alt tag is used?
So for the div listed below, the screen reader will say ie: "shopping cart items 2"?
I tried using aria-label but the screenreader won't pick it up:
<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div> 
607
The alt attribute exists for images because there is no way to "read aloud" the content of the image, so the provided text is used instead. But for the div, it already contains text and images. Therefore, if you want it to be read by a screen-reader, you need to include the text and alt text in the content of the div.
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). Note: The alt attribute is required for the <img> element.
No, an alt attribute (it would be an attribute, not a tag) is not allowed for an a element in any HTML specification or draft. And it does not seem to be recognized by any browser either as having any significance.
Almost any accessibility consultant will tell you that the alt attribute is always required. Every image should always have an alt attribute – whether it's empty or has text, it must be present.
The HTML alt attribute is used in HTML and XHTML documents. It specifies an alternative text which must be rendered if the element cannot be displayed for some reason. The alt attribute can also be used by screen readers to allow visually impaired users to interact with a webpage. To be accessible, an image must have an alt attribute.
Note: The alt attribute is required for the <img> element. Note: For <input> elements, the alt attribute can only be used with <input type="image">.
The alt attribute exists for images because there is no way to "read aloud" the content of the image, so the provided text is used instead. But for the div, it already contains text and images. Therefore, if you want it to be read by a screen-reader, you need to include the text and alt text in the content of the div.
There are two ways (which can be combined) to have screen reader to read alternative text:
Anything with ARIA role img can (MUST) have alt attribute. See WAI-ARIA img role.
<div role="img" alt="heart"> ♥︎ </div> UPDATE: In 2017 the WAI-ARIA document was changed and the following text does not apply anymore. See comments below.
If an element contain actual text, that just need different reading, you should set ARIA role to text and add aria-label with whatever you want to be read by the screen reader. See WAI-ARIA text role.
<div role="text" aria-label="Rating: 60%"> Rating: ★★★☆☆︎ </div> Do not mismatch it with aria-labeledby which should contain ID of an related element.
You can combine the previous two cases into one using two ARIA roles and adding both alt and aria-label:
<div role="img text" alt="heart" aria-label="heart"> ♥︎ </div> When more ARIA roles are defined, browser should use the first one that is supported and process the element with that role.
One last important thing is that you must set page type to HTML5 (which support ARIA by design).
<!DOCTYPE html> Using HTML4 or XHTML requires special DTD to enable ARIA support.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN" "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd"> 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
