Web Accessibility Best Practices for Content Authors: Alt Text

Web Accessibility Best Practices for Content

As many of our customers are working toward implementing ADA compliant sites, our experience has led to some valuable lessons for content authors who need their properties to continue to meet accessibility standards that are widely accepted in the digital space.

An important thing to remember as you take on accessibility is that there are no U.S. Government approved accessibility standards for websites as it pertains to the Americans with Disabilities Act (ADA). However, sites are getting and have been successfully sued for not providing accessibility. Right now the best standard we have is the WCAG 2.0 guidelines. Those are what we base our best practices on.

We encourage everyone to do your own research and due diligence as it’s important to understand the whole landscape.

Accessible Text Alternatives for Images

What is an Alt Text for an Image?

The alt text attribute on an image serves as a text equivalent to the experience of viewing the image; it isn’t just a written description of the image. To meet the W3 standards, EVERY image MUST have an alt attribute applied to the <img> element.
There are three primary variations on how an alt attribute should be handled for an image:

  1. For images that convey meaning or serve a purpose to sighted users, that same meaning or purpose should be provided through a text alternative added to the alt attribute in the image tag.
  2. For images that are purely decorative or that add no meaning or serve no real purpose to the sighted user that is not already conveyed through text elements on the page, the alt text should be left intentionally empty so that the image is ignored by assistive technology, such as screenreaders.
  3. Images that are linked, that have no other link description, should have alt text that not only is a text alternative to the image, but also describes the purpose and destination of the link.

Example:

Let’s look at a complex situation to illustrate our points.
Consider a typical recipe site. Their pages usually have a text element at the top holding the recipe’s title and right below that there will be a large ‘hero’ shot of the finished recipe.

The first question we need to ask when considering what alternative text we should use for the image is: What does the experience of viewing the image communicate to the viewer?

A basic description of the image content doesn’t provide anything that the text recipe title above the image (which likely would have already been communicated to the user by assistive technology) is already telling them. Instead, think about how the experience of viewing the image is meant to entice the user to become drawn to it.

Remember the reason you chose the image, it’s not just a picture of the recipe, its job is to get the user to make it!
So, that means that we need a high-quality text alternative if we want the same experience to be conveyed to the non-sighted user.

We dive into ADA web compliance for digital commerce with ADA experts on Blue Acorn iCi’s The Funnel: An Experience Driven Commerce Podcast. Listen here.

In this case, perhaps we have a recipe titled, “Herb-Roasted Chicken.” We certainly can’t just repeat the image title; that is incorrect on a number of levels. Instead, consider this text alternative:“golden brown, herb-roasted chicken served in a cast iron pot”

The above text alternative provides a description of the contents of the image that attempts to provide the same experience of an enticing image that serves to get the user to engage further with the content.

SEO Considerations:

Search engines place significant value on alt text to score your page rank, however, they also draw a line that you do not want to cross where their algorithms will start to classify your site as spam. They value quality alt text. In the example found at this link: https://support.google.com/webmasters/answer/114016?hl=en, Google shows a clear example of the scale of alternative text quality.

In Google’s example, for an image of a puppy, alt=”puppy” is an ok alternative text. The better alternative text they present is: alt=”Dalmatian puppy playing fetch”. If you were a screen reader user, the second example gives you a much richer experience of that image’s content than “puppy” and probably more accurately describes what is going on in the image. Their example to be avoided is a long list of keywords related to dogs and puppies that would probably result in negative page rank.

SEO conclusion: even for SEO purposes, using a text alternative to the meaning and purpose of an image will net the best results for your site’s content.

Basic Do’s and Don’ts:

Text alternatives are critical for accessibility, however, they are also very contextual and what is “good” or “great” alt text is very subjective. That being said, there are some clear do’s and don’ts provided below that can help guide you when authoring accessible alt text.

Easy Fails:

(and links to more information)

For more information about web accessibility, read the other article in this series, Web Accessibility Best Practices For Content Authors: Color Contrast

Does your site need an ADA audit? We can help. Contact us today to get started.

fragment
https://main--site-blueacornici--blueacorninc.hlx.page/profile/JoshWoods