Alternative Text and Captions

Our pol­i­cy for alt text and cap­tions: use them! Any image-based or video con­tent that we pro­duce should include this vital piece of acces­si­ble content.

Alternative text pro­vides text for an image on the web if it can’t be viewed due to a slow con­nec­tion, an error or a user dis­abil­i­ty. Not only does alt text make things screen read­er-friend­ly, but it also gives seman­tic mean­ing to images so they can be read by search engines. (SEO is our friend.)

Stick to these guide­lines when think­ing about alt text:

  • Always include it for any non-text con­tent, even when the text is null.”
  • If the image con­tains infor­ma­tion, use the text to describe the image.
  • If the image is a link, use the text to explain where the link goes.
  • If the image is pure­ly dec­o­ra­tion, use alt=”” for null” text.
  • Be con­cise — only use the nec­es­sary words.
  • Stick to sen­tence case with end punctuation.
  • Avoid redun­dan­cy. Don’t include phras­es like image of…,” graph­ic show­ing…” or link to…”

If you can’t suc­cinct­ly explain the con­tent and func­tion of the non-text con­tent with sim­ple alt text, you might want to con­sid­er using a text caption.

Text cap­tions serve one of two purposes:

  • To pro­vide addi­tion­al con­text adja­cent to or sur­round­ing a non-text ele­ment on the page.
  • To allow web video and audio to be acces­si­ble to those who do not have access to audio.

When using a cap­tion to give addi­tion­al con­text to an ele­ment, make sure you think about alter­na­tive text first — they shouldn’t be com­pet­ing with each other.

Captions for audio and video help peo­ple with hear­ing impair­ments inter­act with mul­ti­me­dia more eas­i­ly. Captions also ben­e­fit non-native lan­guage speak­ers, users in sound-sen­si­tive envi­ron­ments, and peo­ple who have trou­ble focus­ing or remem­ber­ing infor­ma­tion. Most of all, they ben­e­fit any­one view­ing video with­out the sound turned on — and that’s a large major­i­ty of mobile device users today.

In order for cap­tions to be help­ful, they need to be syn­chro­nized and accu­rate. Make sure they direct­ly match the spo­ken word and are rel­e­vant to the time frame of the sound avail­able. Including a tran­script along with mul­ti­me­dia con­tent nev­er hurts either.

Last Updated: 26 May 2020 at 2:42pm CDT