Images

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:

Success Criteria:

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

Making Images Accessible

Best practices dictate that alt text should be meaningful and concise. In 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 limit.

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

Code Example:

<img src="dog-bone.png" alt=”Dog burying a bone">

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.

Read our post on best practices for Long Descriptions for more information and techniques on making complex images accessible.

Code Example:

<img src="global-warming-chart.png" alt="One Thousand Years of CO2 and Global Warming Chart" longdesc="#currentpage.html#longdesc"/>

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="desert-sunset.png" 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.

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

AudioEye Web Personalization Tools Solution

The AudioEye Ally Tools utilize images in various ways.

The Reader visibly displays images (except background / decorative images) and the associated alt text.

The Player reads aloud the presence of an image and then announce its alt text.

Images are also listed by their alt text within our Page Elements Menu for easy identification and navigation of the page.

Supporting Materials

H37 Technique - Using alt attribute on img elements

W3C image concepts

W3C Techniques for providing useful alternatives

WCAG 2.0 SC 1.1.1

Technique h67 - using null alt text for decorative images

Damien Carrillo

Read more posts by this author.

Subscribe to the AudioEye nClusion Newsletter

Get the latest industry news & insights delivered right to your inbox.

  or subscribe via RSS with Feedly!