Use alternative information

A blind or visually impaired person can use a screen reader to hear a description of the image. If the written content contains the information needed to convey meaning, a very simple description in the image or perhaps even a null alt attribute will do. If not, make sure your alt tag information or surrounding body text is adequate to supply meaning that would be missed in its absence.

Applicable guidelines from WCAG 2.1

Alt attributes add an SEO boost

“Alt tag” is shorthand for the contents of the alt attribute of an image on a web page. Alt attributes provide a text alternative for an image or object on your page. They are important for users who are visually impaired, but they can also impact how robots like Google’s “image search” function indexes content — in that way, they provide an additional SEO (Search Engine Optimization) boost. Google officially confirmed it mainly focuses on alt attributes when trying to understand what an image is about. If you add an image - add an alt attribute.

Image with important information not otherwise conveyed on the page

When the user is assisted by a screen reader or the image is missing/broken or the web page is being searched, there needs to be an Alt tag/text that conveys the meaning or purpose of that image to the web page content. Giving a “text alternative” meets these needs. 

It should be accurate and succinct, but not redundant to the words already provided.  Avoid using phrases like “image of ...” or “graphic of …” to describe the image. Many screen readers prefer brevity when encountering images with using text-to-speech assistive technology.

Decorative images 

A decorative or non-informative image will need to have alt="” in the <img /> tag (this is called a “null alt tag” – note there is no space between the quotes*). A screen reader will skip this image. If there is no “alt” tag, a screen reader will read the name of the file, not helpful and possibly annoying. Choosing an image should include the process of determining the Alt tag information and caption, and possibly a title and credit.

Some WYSIWYG editors will require something in the input box for alt text (may be called title) to generate the alt attribute in the code. So, in that case, you try to see if the editor allows a space or has an option to “mark as decorative”. Some screen readers will work with this, others may not. Try it, and then look at your code and test with using a code sniffer. If you got it right, you will get a warning from the code sniffer that there is a blank alt tag.

Decorative Images do need an ALT Tag, but the ALT tag can be no space (ALT="”, best for The Web) or a blank space (ALT="" best for Microsoft Office or a CMS). Both are valid but produce slightly different results across environments.

For more information, read WebAIM's article on Alternative Text, especially the sections on functional images and decorative images.

Screenshots for “How To” documentation

Convey everything via text on the page (the “how to” instructions), organized by headings, etc. Any screenshots should be considered a bonus (for those who do benefit from a visual explanation), and not to be relied on for the explanations/instructions.

The best practice for alt text is to keep it simple since the text on the page does the heavy lifting, for example, “screenshot of [PROCESS] as explained on this page.”

This Standards for Writing Accessibly article from A List Apart suggests using behavioral action language such as “choose” or “select” instead of device-agnostic words like “click” or “tap”. See the heading “Describe the Action, Not the Behavior”.

September learning event: Considerations for Accessible Data Visualizations 

Please note that you must be signed in to MyAccess to view the slide deck links below.

• Presentation Slide Deck (PPT)

October learning event: Building Accessible Data Visualizations in Tableau

• Presentation Slide Deck (PPT)

Resources

• Alt Decision Tree from the W3C describes how to use the alt attribute of the <img>& element in various situations, such as when the image is functional or decorative.
• Alternative Text article from WebAIM uses a picture of George Washington to demonstrate how context is everything in how you write your image's alt text.