Back to Blog

Images

Alt-text example of mountains at sunset

Summary: Images are often used to provide valuable information but tend to be inaccessible to those who are unable to see them. This can be due to many factors including, users who are visually impaired or blind, browsers with image display disabled, or broken image links.

Adding the required alt attribute to all image elements in your HTML and providing proper alternative text (alt-text), will ensure that all users are able to understand the meaning/purpose of an image, regardless if they can be visually seen or not. This is especially true for certain Assistive Technologies (AT) users like screen readers and braille displays, who solely rely upon alt text for images. When bad alt text — text that does not properly or succinctly describe the image — is used, the true meaning/purpose of the image is not properly conveyed to these AT users. The same is true if no alt attribute is present and the image’s file name is read instead. The importance of providing users with proper alt text cannot be overstated.

Relation to WCAG/Section 508

The World Wide Web Consortium (W3C) outlines the following WCAG 2.0 relationships between images and accessibility compliance:

Guideline 1.1 – Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations specified. (Level A)

1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, the text is used to convey information rather than images of text except for the situations specified. (Level AA)

1.4.9 Images of Text (No Exception): Images of text are only used for pure decoration or where a particular presentation of the text is essential to the information being conveyed. (Level AAA)

Did You Know? Good alt text also provides the added benefit of increasing your site’s traffic through image-based SEO results. Learn more about the different ways alt text impacts SEO from Google.

Make Images Accessible: Limit alt text to 125 characters, Categorize images as simple, complex or decorative

Making Images Accessible

Best practices dictate that alt text should be meaningful and concise. In a matter of fact, due to some nuances in the way the JAWS Screen Reader (prior to version 17.0.186) handles alt text, the character limit should be limited to 125 Characters (excluding spaces). While this issue was addressed with the release of JAWS version JAWS 17.0.1806 (April 2016), many users still rely on older versions of the software and, hence, authors are advised to take heed of the 125 limits.

Depending on the type of image, there are specific rules that should be followed when writing alt text. At the most basic level, images can be categorized as either simple, complex, or decorative, depending on the information (or lack thereof) that they are intended to relay.

Simple image alt text example for linked icon of mountains, link address: www.mountains.org

Simple Images

Images in this category consist of pictures, photos, logos, icons, images of text, and illustrations that relay simple concepts and information to users. The alt text should relay the meaning, purpose, and/or function of the image.

Code Example:

<img src=“src=“whateverTheSourceIs” alt=“Search” />

If the image is linked, the alt text should inform the user of the link destination. If there is room, a brief image description can follow the link destination text but is not necessary. If there is text present in the image, that text should appear in the alt attribute.

Complex image alt text example for chart showing 20% growth for shareholders vs 10% annual churn rate

Complex Images

Generally, images in this category include graphs, diagrams, maps, or charts, that relay detailed information/data where the use of alt text alone is insufficient or does not adequately convey the information being supplied, visually. To achieve accessibility, complex images often require the use of several different approaches that could include, long descriptions, data tables, accessible modal displays, and/or a link to a separate page that accurately depicts the information/data contained within the complex image.

It's recommended to make the text description you’d put in a long description available to everyone.

Decorative image alt text example showing decorative photo of mountains at sunset

Decorative Images

Images in this final category do not relay information, meaning, or purpose that will benefit the users understanding of the page. All images require an alt attribute; however, for decorative images, the alt text should be null (empty) alt=””. This will ensure that most AT devices will ignore the image.

Code Example:

<img “src=“whateverTheSourceIs” alt=“” />

Following the basic steps mentioned above will help content authors and developers properly configure their images to ensure an optimal user experience for those relying on assistive technologies, such as screen readers, to access the digital world. Accessible image description is a rich topic and there is not a shortage of valuable online resources on the subject. To learn more and further explore the many nuances in greater detail, check out the Supporting Materials provided below.

Web page illustration show four images with missing alt text

How AudioEye Makes Images Accessible

Through the AudioEye Ally Platform, site administrators can manually author and apply alternative descriptions through the system admin – all without having to write any code. For customers adopting and integrating the AudioEye Ally solution, which applies remediation, dynamically, via the AudioEye JavaScript, the AudioEye system provides users with a simple to use interface for applying alt text to images. In addition, as a managed service and with authorization, this authoring and manual application may be applied by AudioEye, eliminating the burden on client resources.

Separate from manual application, there are several different ways the AudioEye system is capable of automatically identifying image content and applying image descriptions through autonomous processes. From an automated standpoint, AudioEye is capable of making determinations to either remove alt text from decorative images that have incorrectly applied alternative descriptions that are redundant and non-compliant. Further, AudioEye can derive information from surrounding elements and apply that information as alternative text.

Similarly, in addition to these auto-remediation techniques, the system supplies site administrators with the option to view images that have been processed through a multi-step dynamic Artificial Intelligence (AI) lookup process. With the AudioEye Admin, users can apply the AI-generated description as the alt description for the selected image element. On a client-by-client basis, this solution can be turned on to auto-apply the AI-generated description, eliminating the need for manual assessment.

Ready to test your website for accessibility?

Scan your site now.

Share this post