When using images on a page, you must provide an alternate method for that content. This can be provided in multiple ways. You can provide this information with a caption, alt tag, title tag, or aria label. If an image has text, all the text in the image must be provided in the alternate content. No matter which method is used, an alt or title tag must be provided, even if the tag is blank.
- Using the web developer tool, select images > Display Alt Attributes & Outline All Images.
- Inspect each Alt tag for the following:
- A unique description of the image is provided
- Repeated images have the same alt text
- All text in the image is included in the alt text
- “Image of” or “Photo of” is not used
- If the alt tag is empty, ensure the image is purely decorative
- If the image is not decorative, make sure the image is described on the page
- Check outlined images without alt tags by doing the following:
- Right click the image
- Select ‘Inspect Element’
- Check for a title tag for the information normally found on the alt tag
<img src="/uploads/sites/7/2017/02/cougar-sign.jpg" alt="Sign that reads reserved parking cougars only">
Preffered method for providing alternate content. Clear alt tag with all text included.
<img src="/uploads/sites/7/2017/02/cougar-sign.jpg" title="Sign that reads reserved parking cougars only">
Acceptable, but less compatible with certain assistive technologies. Clear title tag with all text included.
<img src="/uploads/sites/7/2017/02/cougar-sign.jpg" alt=""> <span>Sign that reads reserved parking cougars only</span>
Information contained in the image is provided on the page. In most instances, an alt tag would be preferred. Images marked with an empty alt (alt=””) are considered “Decorative” and not read by accessible technology.
Image is missing an alt tag and alternative content
<img src="/uploads/sites/7/2017/02/cougar-sign.jpg" alt="sign">
Alt tag is missing text from image
<img src="/uploads/sites/7/2017/02/cougar-sign.jpg" alt="Image of sign that reads reserved parking COUGARS only">
Avoid using “Image of” or “Picture of” as the screen reader will notify the user that it’s an image. Also avoid using all caps as some screen readers will read each letter. ie. C-O-U-G-A-R-S
Since this SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:
- Inside the
<title>A short title of the SVG</title>
- must be the first child of it’s parent element
- will be used as a tooltip as the pointing device moves over it
- A description can be added if needed
- a description – note this is not read by narrator (bug filed)
- Choose your method of embedding the SVG and add
According to the W3C specification, we shouldn’t have to do anything extra for SVGs beyond providing the
<title> and possibly a
<desc> because they should be available to the Accessibility API. Unfortunately, browser support is not quite there yet (bugs reported for: Chrome and Firefox).
So, to ensure the accessible technology can access the
- Add the appropriate ID’s to the
<title id="uniqueTitleID">The title of the SVG</title>
<desc id="uniqueDescID">A longer, more complete description for complex graphics.</desc>
- On the
aria-labelledby="uniqueTitleID uniqueDescID"(use the title and desc ID’s) – both title and description are included in
aria-labelledbybecause it has better screen-reader support than