Skip to main content
University of California San Francisco Give to UCSF

UCSF IT Technology

Main navigation

  • Status
    • Security Announcements
  • Services
  • How To
  • News & Events
  • About Us
  • Log In
Open Close Search
Open menu
Give to UCSF

Breadcrumb

  1. Home
  2. How To
  3. Accessible Images Best Practices

This content is viewable by Everyone

Accessible Images Best Practices

Save

Log in via MyAccess to save.

  • Audience: Affiliate, Faculty, Staff, Student, Technical Partner, Volunteer
  • Service Category: Web Services
  • Owner Team: Web Services
  • Service:
    Digital Accessibility Program

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.0

Perceivable

 

1.1.1 – Non-text Content

Provide text alternatives for non-text content

1.4.5 – Images of Text

Don’t use images of text

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.

If you add an image - add an alt attribute (tag) 

Dr. Gorge Campbell of the Children’s Hospital Diabetes Center at UCSF examines a patient.

Example of a UCSF image with a descriptive "Alt" tag that reads "Dr. George Campbell of the Children’s Hospital Diabetes Center at UCSF examines a patient."

Every image you embed in your website must include an alt attribute. Not only is this a requirement of the HTML standard, but it also ensures that image content, or the ability to skip it, is available for screen readers. The rule applies whether the image conveys important information or is purely decorative. 

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 use 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 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, test with code sniffer. If you got it right you will get a warning from 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.

Screen shots 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), not to be relied on for the explanations/instructions.

Best practice for the 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".

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 using a picture of George Washington to demonstrate how context is everything in how you write your image's alt text.

Related Information

  • Accessible Color Best Practices
  • Accessible Documents Best Practices
  • Accessible Forms Best Practices
  • Accessible JavaScript Best Practices
  • Accessible PDF Best Practices
  • Accessible Structure Best Practices
  • Accessible Videos Best Practices
  • Accessible Virtual Events Best Practices
Section Menu
Digital Accessibility Program
  • Digital Accessibility Awareness and Outreach
  • Introduction to Digital Accessibility at UCSF
  • Digital Accessibility Consultations for Online Content
  • Testing for Digital Accessibility
  • Accessible Color Best Practices
  • Accessible Documents Best Practices
  • Accessible Forms Best Practices
  • Accessible Images Best Practices
  • Accessible JavaScript Best Practices
  • Accessible PDF Best Practices
  • Accessible Structure Best Practices
  • Accessible Videos Best Practices
  • Accessible Virtual Events Best Practices
  • Software Purchasing Guidance for Accessibility
Home

Footer Col 1

  • Status
  • Services
  • How To
  • News & Events

Footer Col 2

  • About
  • IT Directory
  • Standards & Guidelines

Footer Col 3

  • Get Help
  • Recognize IT Staff
  • Submit a Support Inquiry

    For emergencies and high priority issues please call the IT Service Desk (415) 514-4100

    • Facebook
    • Twitter
    • YouTube
    • Instagram

    © 2023 The Regents of the University of California