Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Web Accessibility Compliance

Well done!

You have completed Web Accessibility Compliance!

Sign up for Treehouse Back to Library

Alternative Text

2:12 with Aisha Blake

Alternative text is some of the lowest hanging fruit in the world of web accessibility. Whenever you use an image tag, make sure you include the alt attribute and give it an appropriate value.

Resources

Stock photo - Feel free to use your own

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Alternative text is some of the lowest hanging 0:00
    fruit in the world of web accessibility. 0:03
    Whenever you use an image tag, make sure you include the alt attribute and 0:06
    give it an appropriate value. 0:11
    This text will appear if the associated image's URL is wrong, 0:13
    the user has disabled images, the image hasn't yet 0:17
    been downloaded, or the image is an unsupported format. 0:19
    Maybe you've heard that you should include alternative or alt text, but 0:23
    don't know what makes good alternative text. 0:27
    By the end of this video, I hope you'll be confident enough to commit to making sure 0:30
    all your images have alternative text from now on. 0:35
    There are just a couple of things you need to keep in mind when you're writing 0:39
    your alt text. 0:42
    One, keep it short and sweet. 0:44
    You really only need to give enough information to describe the image within 0:46
    the context of the page. 0:50
    The photo on my screen right now could be described as couple holding hands. 0:52
    Depending on the context, there's probably no need for 0:58
    someone using a screen reader or who has disabled images to know that the couple is 1:02
    also standing in front of some greenery and wearing plaid. 1:07
    Two, the only time you needn't worry about alternative text for 1:11
    images is when the image is purely decorative. 1:14
    You can set alt to an empty string, this should however prompt some thought about 1:18
    whether the image needs to be there in the first place. 1:24
    Now, try to disabling images in your browser. 1:26
    The processes will be slightly different depending on your browser, but 1:30
    I'll demonstrate how to do this in Chrome. 1:33
    I'll open up the settings menu. 1:35
    Making sure that the advanced settings are shown. 1:38
    From there, I'll find Privacy and select Content Settings. 1:45
    Under Images, I'll choose Do not show any images, and hit Done. 1:50
    Now, when I navigate to any web page that does load images, 1:57
    I should see a text alternative. 2:00
    That same text will show up if the image doesn't load correctly for some reason, 2:03
    and it will be read aloud by a screen reader. 2:07

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up