Tips and Tricks for Understanding Image Accessibility Standards and Alt Text
There is a fine level of detail that goes into building a fully accessible, ADA compliant website, and one of the most critical parts of that process is establishing image accessibility. It also happens to be one of the most difficult to implement properly.
Think about how much of your web browsing experience is driven by graphics and imagery. Now imagine you were visually impaired and couldn’t see or otherwise decipher the images on your most visited websites. Your browsing experience would feel a bit lacking, and probably be quite confusing. To avoid that scenario and ensure an equal browsing experience by individuals of all abilities, a series of image accessibility standards has been developed by a combination of the Americans with Disabilities Act (ADA), the Web Content Accessibility Guidelines (WCAG) 2.1 and Section 508 of the Rehabilitation Act. The current image accessibility standards require web developers to code text descriptions, called alt text, into all images so that the content and function of the image can be determined by anyone, even if they cannot see the image itself.
Ensuring ADA, WCAG and/or Section 508 compliance with alt text usage is a complicated process, and one that puts a lot of responsibility on the shoulders of web developers and designers. But the hope is that by enforcing these image accessibility standards across the board, all internet users will get to enjoy all websites with the same level of usability.
Below we have outlined a handful of tips and tricks for creating an accessible website, but first we start with the answers to some of the most common questions regarding website and image accessibility.
Image Accessibility Q&A
Q: What are accessibility standards?
A: In short, accessibility standards are the rules that govern the usability of websites to ensure they are accessible to individuals of all levels of ability. Likewise, image accessibility standards regulate the usage and treatment of the images used throughout a website.
Q: What is alt text on images?
A: For images to be accessible – that is, for them to be discernible to individuals with varying degrees of ability, usually via the use of screen readers or other digital accessibility tools – they must be labeled, or tagged, with alt text.
Alt text is a short description of an image, which then gets coded into the image so that a screen reader or other device can decipher both the content and function of that image.
Q: Can screen readers read images?
A: No, screen readers cannot read images. It is impossible for them to scan an image and determine the value of that image, which is why alt text carries so much weight. Even though a screen reader can’t read the image, it can read its tags.
Image Accessibility Tips & Tricks
- Writing successful alt text
When creating your alt text, according to the World Wide Web Consortium (W3C), the organization that created WCAG, images should be described by imagining that you are interpreting the image to someone over the phone who cannot see what you’re seeing. Your description should include not only the content of the image, but also how it is being used on the page. It should also be concise, with the most important information coming at the beginning.
- Knowing when to use alt text vs. description
Alt text for images that are fairly simple and straightforward in nature should be short, sweet and to the point. For more informative images, like graphs, charts or other graphic elements that may be too complex to describe in just a few words, long descriptions can be used. But unlike alt text, which gets coded into the image itself, long descriptions are coded into to the page.
- Avoiding unnecessary words
W3C notes that using descriptors like “image,” “icon” or “picture” is unnecessary in alt text because screen readers announce the presence of an image by default.
- Handling unimportant images
For images that have no purpose on a page other than to look pretty – typically referred to as decorative images – they can, and should, be coded to be ignored by screen readers and other tools.
- Understanding issues of accessibility with background images
The general rule of thumb is to avoid the use of background images. When images are turned off, or high contrast mode is enabled, background images disappear; and if these images contain graphic text or other meaningful imagery, their relevance becomes lost.
For more in-depth information about image accessibility standards and the use of alt text, or for help optimizing your own site for ADA compliance, contact Paradigm Marketing and Design today to schedule a consultation.