Skip links
Tips and Tricks for Understanding Image Accessibility Standards and Alt Text Tips and Tricks for Understanding Image Accessibility Standards and Alt Text Tips and Tricks for Understanding Image Accessibility Standards and Alt Text Paradigm Marketing and Design
computer icons in the outline of a message bubble

Marketing Tips, Insights, and Trends

Tips and Tricks for Understanding Image Accessibility Standards and Alt Text

Author: Carolyn Menz Category: Web Design Date: May 31, 2019

computer icons in the outline of a message bubble

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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Have questions? Contact us

  • This field is for validation purposes and should be left unchanged.

You may also like

Small shopping bags on top of a shopping cart on a laptop
Author: Kaitlyn Partington
Date: June 10, 2021
What is the Difference Between Shopify and Shopify Plus? As one of the industry’s most widely used e-commerce website platforms, Shopify is well-known to most web-based business owners and marketers alike. It’s recognized for its reliability, security, ease of use, and top-notch customer support. But for those who are still trying to decide whether the platform is right for their site, one of the [...]... CONTINUE READING
Person building a new wordpress site on a laptop
Author: Michael Scorcia
Date: April 1, 2021
How to Speed up a WordPress Website Want to know how to speed up your WordPress website? We’ve got you covered! WordPress is by far the most popular content management system out there today due in large part to its ease of use. If you’re among the 40% that’s operating on a WordPress site, you’re likely already aware of its vast features [...]... CONTINUE READING
Return to top of page
Paradigm Marketing and Design Over the past 7 years, Paradigm Marketing and Design has evolved into a complete turnkey agency, but this award winning shop is still small enough to give clients the individual attention and hands-on, detail oriented services they need to be confident in their marketing effort and competitive in their industries.
330 Changebridge Rd. Suite #101 Pine Brook, NJ 07058, USA
Rachel Phone: 973-250-4995