My Accessible Website

Confused by accessibility?
Online testing tools only finding the really basic issues?

MAWD combines automated testing with your input to find everything you need to fix

Try MAWD Free
Back to Tips

I can’t write a text alternative for this!

There are a few situations where it is OK to not provide a full text alternative for an image or audio/video file:

To my knowledge, these are the only situations that mean a full text alternative is not necessary. For all other image and media content, you will need to provide a full text alternative that conveys all the information that the media does, in a text format.

This full text alternative doesn't have to sit next to the element in question, but it must be clear where to find it. It doesn't even have to sit on the same webpage. An audio file that is followed by a link to another page containing the full transcript for it is perfectly fine.

You still need to provide accessible text

Even if your media content falls into one of the above categories, it doesn't mean that you can ignore it completely. You still have to provide accessible text so that the user can find out what the media is, even if they cannot read a text alternative for it. It helps the user to understand what content there is on the page, and what they might be missing.

Images

For images, use the alt attribute to set the accessible text:

<img src="roses.jpg" alt="12 red roses" />

Using ARIA attributes

For other media, you can use the ARIA attributes for setting accessible text.

If the text that identifies what the media is is already present in another element, you can add the aria-labelledby attribute to the control, and set it to the ID of the element with the appropriate text.

<h2 id="interview ">Interview with Managing Director</h2>
    <video src="videofile.webm" aria-labelledby=" interview"></video>

Sometimes, the appropriate text is not present in a separate element for you to reference. In this case you can just specify what the text is by adding the aria-label attribute to the control.

<video src="videofile.webm" aria-label="Interview with Managing Director"></video>

Share this

Share on Twitter Share on Facebook Share on Google+

How do you make images accessible?
It's not just about alt text.
Get a printable poster of the full infographic.

Get Poster

Comments

This site uses cookies as described in our Privacy Policy.
By continuing to use our site, you consent to these cookies.