Digital Accessibility Knowledge Base

    alt-text-is-too-long

    Alt text should not be longer than 140 characters.

    Who might be affected
    Screen Reader
    Braille

    Description

    Alt texts are essential for screen reader users to perceive the content and purpose of images and graphic elements on the page. However, having a very long alt text is considered to be a bad practice for a few reasons:

    1. Some screen readers may not read the entire text if it is too long
    2. In contrast to body texts, alt text usually can not be paused or be read word by word but only in one sequence.
    3. In many cases when alt text is very long it tends to be “too descriptive”.

    Note that there is no official recommendation for the length of alt text characters. We are suggesting the maximum length of 140 characters because it is an average of various recommendations on the web, and it is a reasonable length to perceive in a single sequence.

    Quick Fixes

    1. Try to remove unnecessary words or phrases that are not essential for understanding the meaning and purpose of the image in the page’s context.
    2. In cases where a long description is essential you can add a describing element using the aria-describedby attribute
    1<style>
    2	#describing-element {
    3		Display: none;
    4	}
    5</style>
    6

    7<img src="path/to/image/file.jpg alt="the short alt text" aria-describedby="describing-element" />
    8<div id="describing-element">
    9	<!-- here you can add a full description with all the relevant details -->
    10</div>

    However there are a few important things to take under consideration if you are using aria-describedby:

    1. Alt text is still required.
    2. The describing element should be excluded from the accessibility tree (e.g., display: none;), otherwise screen readers will announce its text twice, first time as the image description, and second time as the element’s text.

    How Users Are Affected

    Screen reader, and braille keyboard users may not be able to perceive the complete description or may find it too wordy and tedious.

    WCAG Success criteria

    N/A (Best Practice)