Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Do I Need to Include an alt Attribute on Every Image?

DZone's Guide to

Do I Need to Include an alt Attribute on Every Image?

We look at one of the basics of web development and design, styling your HTML with an alt attribute, and why this is so important.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

If an image on your page isn't really there for any purpose, you might struggle to come up with meaningful alt text for it, so it's quite common to leave the alt attribute out of the image tag:

<img src="background.jpg" />

Apart from this technically being invalid HTML, this isn't useful to those who benefit from the alt text.

Some users will be relying on a screen reader to describe the page content to them. When you include alt text for an image, it informs them what the image is.

<img src="search.jpg" alt="Search Button" />

Some images are classed as decorative, meaning that they don't convey any meaning or purpose. If they are just decorative, you actually want the screen reader to ignore them completely because it's just unnecessary noise for the user.

To make a screen reader ignore an image, provide an empty alt attribute. This tells the screen reader to skip it:

<img src="stars.jpg" alt="" />

You might think that not providing an alt attribute at all would cause the screen reader to skip over the image, but that's not the case. Because you haven't given the browser instructions on whether the image is decorative or not, it will typically announce that an image is there and possibly tell the user the filename, which is just confusing.

Always include an alt attribute on your image tags!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
accessibility ,screen readers ,wcag 2.0 ,html ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}