Using Alt-Text: Making Images More Accessible to Everyone
Imagine navigating a website where images, tables, and graphs are inaccessible. For sighted individuals, this may be a temporary inconvenience, but for the blind and visually-impaired community, it means being excluded from important information. Without alternative text (Alt-Text) – written descriptions of images – they are denied the same experience as a sighted person.
Every quarter, the UCSF Office of Disability Access and Inclusion holds an hour-long “Access Lunch and Learn Series” to educate on strategies and tips for making digital content more accessible. it is our responsibility to ensure that all users have equal access o the information and experiences provided online.
In December's “Access Lunch and Learn Series: How to Write Alt-Text,” a video with Mark Sutton, a blind consultant at the IT Web Services Department at UCSF, demonstrated how he uses a screen reader to access and navigate webpages. He also highlighted the importance of Alt-Text, which allows a screen reader to provide information about images and tables to users who are unable to see them. When Alt-Text is omitted, it can make the website inaccessible to users who rely on screen readers.
Alt-Text is typically visible only to people with screen readers, and with approximately 98% of websites reported as inaccessible, it is important to include this narrative content to be inclusive of the blind and visually-impaired community.
Following are some of the best practices from the “Access Lunch and Learn Series: How to Write Alt-Text.”
-
Describe the content of the image specifically and concisely, without using "image of" or "photo of"
-
Capitalize the first word and place a period at the end of the Alt-Text to notify screen readers it is complete. Don’t use quotation marks or apostrophes.
-
Keep alt-text concise, aiming for 140 words or less.
-
Pay attention to language use and be mindful not to perpetuate stereotypes: what words are being used, what are their connotations, and what is tone is being used?
-
Type out any words verbatim for images that contain words (within space constraints)
Resources
-
Read the “Guide to Using Alt-text to Make Images More Accessible” developed by the UCSF Office of Disability Access and Inclusion
-
Alt-text browser extensions/add-ons
For more information on future Access Lunch and Learns or Alt-Text, contact Cecile Puretz, Assistant Director Disability Access and Inclusion at [email protected]