About A11y: I answer a lot of questions about Web accessibility best practices at my job, so thought I would bring some of those topics online for the larger community.
Dear A11y,
As a web developer, I make sure to include alternative text on all my images via the alt attribute. Why the heck would I ever want an empty alt attribute?
Signed,
Alternative in California
Dear Alternative,
As you already suggest, it is important to include alternative text for image tags in your markup. This provides blind and low-vision users a text explanation of what the images are, which helps provide context. This is especially important when an image takes a predominant position on a Web page and there is little surrounding text content for context.
You may have also heard that you should not provide an alternative for decorative icons, which is true....unless the icon has a specific meaning that is not covered in the text content. A perfect example is an edit pencil. In that case, you'd want to use alternative text in the img tag or in the tag containing the background image:
<button style="text-indent:-999em;background-image:url(pencil.png);">Edit</button>
If the icon is purely decorative and has no meaning, like a stylistic bullet point, then you want to include the alt attribute, but leave it empty. Why? Because, if you omit the alt attribute entirely, screen readers will read the URL of the image. As you can imagine, this is incredibly frustrating for those who are using screen readers. So, it's best to include an empty alt attribute in this case, so the screen reader will skip the description of the image:
<img src="dot.png" width="20" height="20" alt=""/>
-A11y
No comments:
Post a Comment