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, 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.
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.
<img src="dog-bone.png" alt=”Dog burying a bone">
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.
<img src="global-warming-chart.png" alt="One Thousand Years of CO2 and Global Warming Chart" longdesc="#currentpage.html#longdesc"/>
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.
<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
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.