[Estimated read time: 12 minutes]

(header photo is the search result for "scene" in the Blind Photographers Flickr photo pool.)

In the first two posts in this series we covered site and page structure overlaps, and formatting and linking overlaps. In this final post we’ll cover accessibility and SEO overlaps when coding for media elements.

Images and non-text elements

As you can imagine, images online can be problematic for visually impaired visitors to decipher, but luckily we’re using technology here so you and I can help solve that issue with the proper coding on and around images and non-text elements.

Some examples of images and non-text elements are:

  • Images, including graphs and charts, word art, decorative and background images, webcam images, photographs
  • Infographics
  • Image maps
  • Animations
  • Graphical buttons
  • Captchas

Here are some of the things you can optimize around images and non-text elements for better accessibility.

Alt attributes

Image alt attributes in SEO are used to describe to search bots what the image is or what the image points to if the image is a link. If a link, the alt attribute acts like keyword anchor text, helping Google understand the context of the destination page.

Alt attributes on images are also read by screen readers. Here’s a quick example:

Alt attributes are a win-win optimization for accessibility and SEO, but there are some things to keep in mind, particularly these first two items below, when optimizing alt attributes for screen readers.

Alt attribute do’s and don’ts:

  • Don’t use alt attributes on decorative images: Decorative images of clouds on your health insurance website are not a hook for getting image search traffic and are not useful in providing context to screen readers. A decorative image can still look dreamy to sighted users but not get in the way of navigating through the page for visually impaired users by keeping the alt attribute as alt=”” (null), or by making it a background image.
  • Don’t use alt when there’s also a text link: If the image is a link and there is link text next to the image, both pointing to the same destination, the screen reader will read both and it sounds repetitive and weird. Use alt=”” (null) for the image alt and keep the anchor text pointing to the destination page about the topic. This may be contested by SEOs who want to put the alt attributes on the image to help it rank in image search. What I’d recommend in a case like this one is to use the alt attributes on the images on the destination page, since that’s the page you’d want to appear in SERPS anyway (probably a great topic to debate more in the comments).
  • Do keep it short or use captions: There are some traces of recommendations around the web that the JAWS screen reader doesn’t do well with alt attributes over 125 characters. Whether that’s true or not, it’s more user-friendly to keep alt attributes short. If you’d like to understand why, add a screen reader extension to your browser (like ChromeVox for Chrome or Fangs for Firefox) and navigate around a page with images that have long alt attributes. If you have a lot to say about an image, put it in caption text or describe it in text on the page instead of in the alt.
  • Don’t keyword stuff — write naturally. Let’s consider the health insurance website with decorative cloud images example again. An SEO may see five decorative cloud images on a landing page as five opportunities to stuff “health insurance, health insurance tools, health tools” etc. into the alt attributes. Don’t do it. It’s not only noise to screen readers, it can be confusing and annoying. Plus, realistically, no one is doing image searches for “health insurance” — and even if they were, the chances of them clicking on a picture of clouds in search results expecting to get what they’re looking for is pretty slim. Similarly, make sure your alt attributes are descriptive and make sense — write them for people, not just a bunch of keywords for bots.

Image captioning

Google can segment text near an image to attribute that text to the image and even create its own captions; therefore, text near an image can help provide context and could affect rankings. Image captioning also provides context for screen readers, often providing more context than an alt attribute might, or in place of an alt attribute if one is not known at the time of upload.

Image captioning do’s and don’ts:

  • Don’t use alt attribute if there is an image caption. Similar to the anchor text link, describing an image via alt attributes and a caption can be repetitive. This could also be a debatable practice, as SEOs would likely want to use both. In that case, consider how it will read by a screen reader that reads both a caption and an alt attribute, and try to make the best decision that will work for both
  • Do describe what you’re captioning. For example, use “Figure 1:” so that this captioning tag is properly understood by people using assistive technologies that may not recognize the tag.
  • Optional: Do use a <figcaption> tag: <figure> with <figcaption> tags can be applied to images or other page elements. Figcaption isn’t necessarily a known tag to optimize for SEO and they aren’t a must-do for screen readers, but it sounds like Google does try to index the text within a tag whether it recognizes the tag or not, and despite figcaption’s variable readability by screen readers, the text may be considered as a related element to an image for screen readers and hopefully helpful nonetheless.

Text-as-images

The reasons to avoid text as images are similar for SEO as accessibility: Simply avoid text within an image if you want the text to be able to be machine-read. Text as an image is also not always ideal for people needing to use magnifiers, since magnifying text in an image can be pixelated and hard to read.

Text-as-images do’s and don’ts:

  • Don’t use text as images for important information. If you must use text as an image, do use an alt attribute to describe the image text if it’s something that should be read by search bots and screen readers.
  • Do consider styling actual text as an alternative. If you need your text to look a certain way, style it using HTML + CSS or use SVG (Scalable Vector Graphics).

Infographics

Infographics have historically been popular among SEOs for attracting links that boost rankings. SEOs may also want to provide on-page context of the infographic and its parts to search engines.

For accessibility, the idea is to be able to easily determine what the infographic portrays. Screen readers, unlike search engines, can’t determine the infographic page’s context by using the link text and page content of the hundreds of pages linking to your infographic. For screen readers it’s all up to the on-page code signals, and you can imagine that describing a complex infographic would be weighty for an alt attribute. Also consider the use of color for colorblind users or the problem we encounter with text as images (not “readable,” scales pixelated) that we covered in part 2.

There is not a simple <infographic> tag that lets you add a lengthy, thorough description of the infographic like a long alt attribute (although you can consider longdesc below). Rather, I’d recommend you test out these tactics below to see what works best for you and your particular situation:

Infographic do’s and don’ts:

  • Don’t describe the whole thing in an alt attribute. It’s terribly user-unfriendly for screen readers (can’t navigate through the text, copy or paste it, etc). Use alts as they’re meant to be used, and choose another method for long descriptions.
  • Do adhere to color contrast requirements. Plan ahead when thinking about color for your infographic, and use colors that meet the minimum color contrast requirements. Use this tool to help you out.
  • Do consider ARIA-describedby. This ARIA (Accessible Rich Internet Application) attribute is read in addition to alt text on an image, and allows for a long description. Here’s a video example. Note that because describedby is announced in addition to image alt text, this can be repetitive.
  • The longdesc attribute: This image attribute allows you to provide a machine-readable link to long descriptions for images (either within the page or on a separate page), but isn’t well-supported and to my knowledge also isn’t a working SEO technique.
  • Do consider hidden text alternates: See the example in the previous post of an image infographic provided as an easily shareable piece within an iFrame with indexable text hidden in a CSS clip in the iFrame HTML.
  • Do create your infographic using CSS: This is a great solution. Below are two pages with the same infographic and how each of them look cached in Google. One is an image file with the text and links on the page below it. The other is an infographic with indexable text and links created via HTML + CSS.

Left: Infographic as image (the page also provides the infographic text on the page).

Right: Infographic provided as HTML styled with CSS (source here).

Left: image infographic. Right: HTML infographic.

You’ll notice they look incredibly similar.

Let’s look at the code. Here’s Google’s cache of the infographic text content of each page.

Top: Google cache (partial) of infographic text provided on the image infographic page.

Bottom: Google cache (partial) of infographic text in the infographic on the CSS infographic page.

Google cache (partial) of infographic text provided on the image infographic page

Google cache (partial) of infographic text in the infographic on the CSS infographic page.

Both provide indexable and screen readable solutions. The CSS version does it without having to also duplicate the information in text on the page for sighted visitors.

You may have noticed the CSS version also adds helpful invisible display:none section headers, which are seen by the screen readers but not visible in the infographic. See more on hidden text in the previous post.

Image & non-text element tools & resources

Video transcription, subtitling, and captioning

Video transcription

Video transcription is the text of the video provided alongside the video. Video transcription is helpful to hearing-impaired visitors who can’t hear the video, or to interpret words for people watching something in another language or strong accents. It’s also helpful to anyone watching a video with sound that’s tough to hear, when watching video in a loud room, or when you need to watch with no sound.

Similarly for search engines, video transcripts describe the content of a video via text.

Video subtitling and captioning

Subtitles and captioning provide time-synced text along with a video while it plays. Subtitles provide the dialogue, while captioning provides the dialogue and also describes other sounds like music, sound effects and speaker identification.

Options for providing text accompaniments for your video content include:

  • Add the transcript as text on the page. You can simply add the transcription as text on the same page as the video, like this example of the coral reef video text below the video on the page. You can type up the transcript yourself or use tools or services to do this for you (see resources section).
  • HTML5 <video> and <track>. The HTML5 <track> tag on a <video> or <audio> element allows you to add video to your page and specify a .vtt text file with your transcription text. From what I can tell, Google can index .vtt files, but I don’t see any clear examples of Google associating a .vtt text file with the page that sources it for the video.
  • Add an interactive transcript. Use a service that creates an interactive transcript, where the transcript is time-synced and can be used as navigation through the video, like these timed transcript TED talks.
  • YouTube transcripts, subtitles, and closed captions are automated by YouTube to various degrees of accuracy, but they’re incredibly convenient if you’re putting your video on YouTube. The automated transcription must be checked, though — it’s especially bad with accents, background noise, or this awesome example of YouTube’s automated transcript of a video of the ChromeVox screen reader that, in the video, reads “image. Spacer image. Image. Caption icon off image. Internal link. Privacy slash security. Link. Sponsor image. Search index page description” but is transcribed as “en españa en carnac o móviles en china se dirigen al cómico jim carrey algo”.

Screenshot of YouTube transcribing a video showing ChromeVox navigation as Spanish language text

Video accessibility do’s and don’ts:

  • Do provide video (and/or audio) transcripts. The time and effort it takes to provide text alternatives can help search engines and various viewers needing a text accompaniment to understand the content.
  • Do upload or correct YouTube transcripts & captions: YouTube’s automated transcripts are convenient but usually weird and wrong, and therefore need to be edited for correctness. Having the correct text is helpful for your transcript-dependent viewers and, when search engines do index the transcript text, that text content can help surface the video page in search results.
  • Do provide context. When it makes sense (especially in closed captioning), indicate speaker names, and other sound context like music, relevant sounds, laughing, cheering, shouting, crying, etc.
  • Don’t spam. Don’t use transcripts for keyword stuffing. It’s a terrible user experience, and depending on your platform, a transcript may not be indexed by search engines anyway, so keep it real.

Video accessibility tools & resources

Recap & thank you’s

In case you missed the previous posts, here’s what we’ve covered:

And I want to extend a huge thank you to the folks below for taking the time for fact-checking, providing references, for some great discussions while creating this series, and for their commitment to making the web accessible. THANK YOU!

Ted Drake (website | twitter)

Ryan Burgess (website | twitter)

Vincent François (website | twitter)

Jennifer Sutton (website | twitter)