216digital.
Web Accessibility

Phase 1
Web Remediation for Lawsuit Settlement & Prevention


Phase 2
Real-World Accessibility


a11y.Radar
Ongoing Monitoring and Maintenance


Consultation & Training

Is Your Website Vulnerable to Frivolous Lawsuits?
Get a Free Web Accessibility Audit to Learn Where You Stand
Find Out Today!

Web Design & Development

Marketing

PPC Management
Google & Social Media Ads


Professional SEO
Increase Organic Search Strength

Interested in Marketing?
Speak to an Expert about marketing opportunities for your brand to cultivate support and growth online.
Contact Us

About

Blog

Contact Us
  • Understanding Image Alt Text Descriptions

    Understanding Image Alt Text Descriptions

    Even though digital transformation is progressing rapidly, many online businesses still lag behind in making their websites accessible to people with disabilities. This is partly due to a lack of awareness or technical knowledge of different accessibility issues and how to solve them. 

    In this article, we will cover one of the most common accessibility barriers — providing alternative text descriptions for images. When done correctly, alt text can paint a complete picture for people who cannot perceive images visually. Unfortunately, many content creators and developers forget to provide alt text or write something that doesn’t quite hit the mark. 

    So, what exactly is Image Alt Text, and how should you integrate it into your website?

    What is Alt Text?

    Image alt text, also called image alternative text descriptions, is the written copy that appears in place of an image on a website if the image fails to load on a user’s screen. This text can also help screen-reading tools describe images to visually impaired users and allows search engines to better crawl your website.

    Alt text should be brief but vivid enough to clarify the image’s content to someone listening to the description. This includes any information contained within graphs or charts. Well-written alt text doesn’t just describe a photo but also communicates its purpose and context. 

    But how do you add alt text to images?

    How to Add Alt Text to Your Images?

    Image Alt Text is the descriptive text that is included in a website’s foundational HTML code to describe an image on a webpage.  

    However, adding Alt Text to images varies slightly depending on your web-building platform. Generally, when you upload a photo, there should be an ‘Alt Text’ or ‘Alt Description’ field where you can input your description. 

    For HTML users, you can add Alt Text to an image by including the ‘alt’ attribute within the ‘img’ tag:

    <img src="example.jpg" alt="A description of the image">

    Suppose you use a Content Management System (CMS) like WordPress. In that case, there’s a designated field for image optimization where you can create and change the image’s alt text.

    When Should I Use Alt Text?

    According to the World Wide Web Consortium (W3C), all images must have a text alternative that describes their function or the information they represent. However, that doesn’t mean every image should be treated the same.

    Follow these rules when writing alt text:

    1. Images of Text

    Does the image contain text?

    If readable text is presented within an image, the text alternative must contain every word in the image. However, it’s essential to mention images with text should be avoided, except in the case of logos.

    2. Functional Images

    Is the image used in a link or a button, and would it be hard to understand the function if it wasn’t there?

    Suppose an image is used as a link or button. In that case, the alt text must describe the functionality and destination, if it doesn’t already from the text or graphical content. For instance, a button to “download in App Store” image link would have an alternative text description stating: “Click here to download the Bittrex app on the App Store.”

    3. Informative Images

    Does the image contribute meaning to the current page or context?

    Informative images are images or illustrations that convey vital information to the context of information surrounding them. The text alternative for these images should include the image’s essential information. The description should be colloquial as if you are explaining it to someone sitting next to you. For example, suppose an image is of a truck driving. In that case, the alternative text should state: “A truck driving over rough terrain”.

    However, complex images such as infographics or diagrams used to convey data or detailed information should have a complete text equivalent to the data or information provided in the infographic or chart.

    4. Decorative Images

    Is the image purely decorative or not intended for the user?

    If an image’s only purpose is to add visual decoration, it does not require alt text. However, the image must then be explicitly marked as presentational so that it is ignored by screen reading software. It must still have an alt attribute, so give it “null” alt text, which is an alt attribute with no value, as seen below:

    <img src=”../img.jpg” alt=”” />

    Need help with how to treat a specific image? The W3C has developed an alt text decision tree to help you determine the right approach depending on the image’s purpose.

    Image Alt Text Best Practices

    Ultimately, image alt text needs to be specific and representative of the topic it supports. Just adding alt text isn’t enough. It’s essential to ensure it’s effective. 

    Here are some best practices to follow:

    Describe an Image and Be Specific

    Alt Text should accurately represent the content and function of an image. Use both the image’s subject and context to guide you. For example, instead of writing “dog” for an image, use a more specific description such as “A golden retriever playing fetch in the park.”

    Avoid Redundancy

    It might seem like a helpful cue, but remember not to include phrases like “picture of” or “image of” in your alt text. Screen readers and Search Engines will know from the preceding HTML tag to announce the alt text as an image. Including these phrases in your description will only disrupt the user’s experience and waste valuable characters.

    Write for People, Not Search Engines

    Many content creators make the mistake of trying to stuff keywords into their site’s alt text. While it’s true that alt text can contribute to SEO, your priority should be accessibility and user experience. If you can naturally fold a keyword into your alt text, excellent. But don’t fall into the trap of treating alt text like an SEO tool.

    Review for Spelling Errors and Punctuation

    Like all website content, proper punctuation makes information easier to understand. Ensure that your alt text is free of mistakes for a professional and clear description.

    In addition, when hiding decorative images, you should be aware of spacing when using a null or empty alt text. If there is a space between the quotes, assistive technologies may still pick it up as alt text, confusing the user.

    Image Alt Text Example

    Alt text that doesn’t appropriately describe the image and its purpose could prove detrimental or puzzling to website users relying on assistive technology.

    Follow alt-text best practices, and you’ll get a feel for what needs to be said. A more detailed description may be beneficial. However, there are instances when it can be redundant. Consider the example below.

    Cleveland Ohio's Detroit-Superior Bridge at night

    Bad Alt Text

    <img src= "example.jpg" alt="a city's bridge at night">

    The line of alt text above is technically descriptive — but it does not describe the image in a meaningful way for the user. Yes, the photo above shows a city’s bridge, and it is night. But this is also a picture of Cleveland, Ohio — and the Detroit-Superior Bridge. These are essential specifics that your users might need to comprehend the image if it’s on, say, a blog post about Cleveland landmarks.

    Good Alt Text

    With context in mind, a better alt text for this image might be:

    <img src= "example.jpg" alt="Cleveland Ohio's Detroit-Superior Bridge at night">

    Why is Image Alt Text Important?

    We’ve already alluded to several reasons why image alt text is essential. However, understanding these reasons will help you write the best alt text possible for your users. Below we’ll look at the significant reasons image alt text is essential.

    Web Accessibility and User Experience

    Image alt tags allow screen reader users to understand what is happening on a webpage besides the written basic text. Images may be the only form of instruction for some websites or other digital assets. Without alt text, these users may miss out on the information conveyed through images, affecting their overall site experience. It is, therefore, a key component in meeting the  World Wide Web Consortium (WCAG) success criteria for image alternative text descriptions. 

    Ignoring these standards could lead to potential legal consequences due to non-compliance with the Americans with Disabilities Act  (ADA). Such non-compliance limits your website’s audience reach and could result in lawsuits or hefty fines. Hence, incorporating alt text in your website design is an inclusive practice and a legal imperative.

    Search Engine Optimization

    Search engines like Google, unable to visually understand images, rely on Alt Text to determine their content. This information helps them provide relevant results for image searches, significantly boosting your website’s visibility.

    However, while Alt Text can contribute to SEO, it should not be used to manipulate search rankings by overstuffing keywords. Google can penalize such practices, leading to a decrease in your overall SEO performance.

    Learn more about Web Accessibility and SEO Optimization: A Powerhouse Combination.

    Take the Next Steps Toward Accessibility

    In a digital era where inclusivity and accessibility are of utmost importance, alt text is a vital tool for website owners and developers. If, until now, you were not aware of the importance of image alt text, don’t stress! You can add these elements at any time to increase the accessibility of your website. 

    If you’d like to talk further about your web accessibility initiative, Schedule a Complimentary ADA Strategy Briefing with the experts at 216digital. We will help you take the steps towards web accessibility on your terms by developing a strategy to integrate WCAG 2.1 compliance into your development roadmap.

    Remember, alt text is not just an option—it’s an essential step in building a successful and accessible online presence.

    Greg McNeil

    July 10, 2023
    How-to Guides
    Accessibility, ADA Compliance, ADA non-compliance, ADA Website Compliance, Alt text, Image Alt Text, Website Accessibility, Website Accessibility Tools
216digital Scanning Tool

Audit Your Website for Free

Find Out if Your Website is WCAG & ADA Compliant













    216digital Logo

    Our team is full of expert professionals in Web Accessibility Remediation, eCommerce Design & Development, and Marketing – ready to help you reach your goals and thrive in a competitive marketplace. 

    216 Digital, Inc. BBB Business Review

    Get in Touch

    2208 E Enterprise Pkwy
    Twinsburg, OH 44087
    216.505.4400
    info@216digital.com

    Support

    Support Desk
    Acceptable Use Policy
    Accessibility Policy
    Privacy Policy

    Web Accessibility

    Settlement & Risk Mitigation
    WCAG 2.1/2.2 AA Compliance
    Monitoring Service by a11y.Radar

    Development & Marketing

    eCommerce Development
    PPC Marketing
    Professional SEO

    About

    About Us
    Contact

    Copyright 2024 216digital. All Rights Reserved.