When it comes to web accessibility for the visually impaired, one of the top features you can incorporate on your website or web page is image alt text. When hovering your cursor over an image, the image alt text is the descriptive information that appears. By being compatible with screen readers and other software, this feature can go a long way toward helping the visually impaired better understand the content they’re looking at.
Please keep reading to learn more about image alt text as an accessibility best practice, including its purpose, benefits, and best practices, along with tips on optimizing search engine visibility and other good ideas.
The Role of Image Alt Text in Web Accessibility
When deciphering images for the visually impaired, image alt text means everything.
In essence, alt text provides a written description of the image, serving as a viable alternative for individuals with disabilities or those with slow internet connections who cannot immediately interpret an image. Without alt text, more complex graphics such as infographics and diagrams would remain inaccessible. Descriptive text plays a crucial role in promoting inclusivity within web development.
Alt text also serves as an excellent search engine optimization (SEO) technique. Search engines like Google and Bing scan entire websites and utilize alt text effectively.
In short, image alt text provides a written description of the image, a viable alternative for individuals with disabilities or those with slow internet connections who cannot immediately decipher an image. Without alt text, more complex graphics such as infographics and diagrams would not be accessible. Descriptive text is an excellent way for web developers to promote inclusivity.
Alt text also serves as an excellent search engine optimization technique. Search engines like Google and Bing scan your entire website and use alt text well. If alt text adheres to SEO best practices regarding keywords, then you can expect to rank higher in search engines for all queries related to your website content.
The Basics of Writing Alt Texts
When writing image alt text, it’s crucial to be as descriptive as possible. Rather than simply stating “dog jumping over a log,” it’s much more accurate to say, “Shaggy black dog jumping over a brown log submerged in water,” or something similar.
Apart from the descriptive element, there are also guidelines on using empty alt tags to let assistive technologies like screen readers know that no written caption or narration is needed on important image content like decorative graphics.
This is a fundamental principle within the Web Content Accessibility Guidelines (WCAG), which mandate how all non-text content is presented, ensuring that it is perceivable and understandable by a large portion of the population, approximately 15% of which have a partial or total disability.
Talk to Me About The Web Content Accessibility Guidelines (WCAG)
Invented by the World Wide Web Consortium (W3C), the Web Content Accessibility Guidelines (WCAG) are a series of guidelines and best practices that govern web accessibility principles on websites and mobile applications. It is a framework for ensuring that individuals with disabilities can enjoy full and equal participation by removing accessibility barriers to content.
In essence, four fundamental principles—perceivable, Operable, Understandable, and Robust—guide the interpretation and implementation of web accessibility programs.
Plus, the ADA and alt text go hand in hand. The Americans with Disabilities Act (ADA) states that physical and online services must provide equal and fair access to all populations. For example, brick-and-mortar locations must be responsible for installing wheelchair access ramps or modifying and widening entryways for wheelchair users.
This requirement extends to the banking sector, where regulators require banks to adhere to accessibility standards for ATMs, ensuring that people with disabilities can enjoy more straightforward navigation, screen options, and much more.
Complying with WCAG guidelines is all about inclusivity and equity. Not only does it help you meet legal requirements, but it can also enhance your brand perception, increase your revenue, and boost your SEO, organic search traffic, and many other key performance indicators.
Understanding the Purpose and Benefits of Image Alt Text
Here are our top three purposes and benefits of image alt text for your website or mobile application:
Solid UX
Image alt text helps enhance the overall user experience for visually impaired users. If accessible images are difficult to load due to limited bandwidth or a slow computer, alt text provides an excellent way to catch up, enabling users to enjoy the website more. Neglecting this essential WCAG guideline can result in a less friendly and broken user interface.
SEO Purposes
When it comes to how accessibility affects SEO, one of the main advantages of image alt text is its impact on SEO. The more search engines like Bing index alt text to associate with images, the better the chances of a higher rank, making it easier for users to find you.
Accessibility and Legal Compliance
For visually impaired users, image alt text makes it easier to understand images with the use of written captions. Plus, tagging all of your website images with alt text is one of the Web Content Accessibility Guidelines core guidelines.
Best Practices and Mistakes to Avoid When Writing Descriptive Alt Text
If you want to be an alt text pro, keep the following ideas in mind:
- Focus on the Details: Go all out in being as descriptive as possible! Instead of simply stating “big umbrella under a tree” or “bright street light,” opt for more detailed descriptions like “7-foot black umbrella under a brown and yellow tree” or “bright street light pointing North with skyscrapers in the distance.”
- Integrate Keywords for SEO: One smart idea is to integrate as many keywords into your image alt text as possible. Remember, search engines pick up alt text and classify your site accordingly.
- Don’t Go Overboard: To avoid a poor user experience, limit the alt text to no more than one or two short sentences, even for complex images.
- Stay Objective: Try not to inject any opinions in any alt text. Remember the goal is to be descriptive with actual factual information, not opinion, hearsay, or suggestions.
- Use Empty Alt Attributes: One of the best ways to let assistive technologies like screen readers know not to provide a written caption for images is with the strategic use of empty alt attributes. This unique snippet of code is useful for screen readers in that it tells them that they could skip certain decorative and navigation images, which have no context behind them.
What About Alt Text For Decorative Images and Complex Images/Infographics?
More complex images like decorative elements and infographics often pose significant challenges regarding web accessibility. While they are harder to describe, there are best practices for providing alt text for these types of images:
Correct Use of Attributes
Familiarize yourself with empty alt tags/attributes like alt=”” to indicate to the system that an image is decorative and does not require a written caption. Ensure that decorative photos are kept to a minimum. Examples of decorative images include borders and icons that do not convey essential information. Use correct HTML semantics by employing empty alt attributes to signal screen readers to skip interpreting decorative photos.
Infographics
When it comes to image alt text, infographics often pose challenges for web developers and business owners, as they are harder to describe. We encourage a brief description of the information contained on the image without going overboard. The opposite goes for borders, icons, and any other imagery that does not convey any information – use an empty alt tag in those cases.
Great Examples of Alternative Text
Here are some examples of well written alt text/alt descriptions/image descriptions across different contexts:
“Languages Spoken Infographic”
“Infographic depicting languages spoken across Asia and Oceania. The image includes a line chart illustrating languages spoken by percentage of total population within each region.”
Process Map
“Process flow diagram illustrating the steps in approving an essential legislation piece. The image features a timeline, text labels for each milestone, and visual icons representing each step.”
Infographic on Milk Delivery
“Infographic that describes a milk delivery route. The image includes labeled components such as roads, delivery route, truck, and number of milk cartons delivered.”
Implementing Image Alt Text on Various Platforms (e.g., HTML, WordPress)
To ensure web accessibility, correctly implement image alternative text across all platforms and maintain code integrity across different sites like WordPress and Joomla.
For HTML, include the alt attribute to provide a written description. Even if an image cannot be seen, screen readers can verbally read out the alt text on a web page, ensuring that visually impaired individuals can understand the content.
With CMS’ like WordPress, users can enter alternative text using dedicated fields. They can access the library, view all uploaded images, and edit/change any alt text.
Ensure that alt text is descriptive while keeping it to a maximum of 125 characters. Avoid using unnecessary words and provide only relevant information. Be objective to ensure screen readers can correctly interpret the alternative text for fair and equal participation by individuals with disabilities.
A Word on Accessibly
The journey to increasing WCAG 2.1, ADA, Section 508, and EN 301549 compliance begins with accessibility widgets. Once you’ve downloaded and installed the widget (take advantage of a 7-day trial), visitors with disabilities can access various navigational and visual options, including enlarging text, highlighting links, and more.
The benefits of WCAG compliance include better search engine visibility due to semantic HTML, which leads to higher rankings. Accommodating more people with disabilities can naturally boost organic traffic and revenue.
The Accessibly accessibility app supports integrations with the following platforms: Shopify, Squarespace, Weebly, Wix, BigCommerce, Joomla, WordPress, Magento, Elementor, WooCommerce, Drupal, Webflow, and Duda. It can also be used as a standalone app via custom code.
Sign up for Accessibly today and experience the benefits of an accessible site!
