WCAG 1.1.1 Non-Text Content requires us to provide text content for those who can’t use non-textual content.
Icons usually have short descriptions, such as “Warning” or “Delete”.
Charts and infographics, on the other hand, can rarely be summed up in a short sentence without losing meaning.
Writing a long description into the alt attribute of an image sounds like it would be the right answer, except that screen readers don’t let a user pause in the middle of listening to the alt text. Worse, the JAWS screen reader will stop reading after 150 characters and require the user to take action to complete the alt text.
Since we can’t put long descriptions in the alt attribute, we must plan for long descriptions to be somewhere else on the page or easily accessible.
How to implement
Work with your Writer as early as possible to identify content that may need a long description. Draft the content early so that you know how much text content you may need to describe the non-text content. (The length of the description may impact which implementation solution you choose.)
Work with your PM and Developer to ensure that everyone understands why the content is necessary and how it serves the business and user goals.
Wireframe or prototype the long description into your designs.
Deque University recommends the following ways to provide a longer description:
- Provide the long description in the context of the HTML document itself.
- Provide a button that expands a collapsed region that contains the long description. (For example, use an accordion.)
- Provide a button to open a dialog that contains the long description. (One example might be an information icon.)
- Provide a link to a long description on another page via a normal link text.
- Provide a link to a long description on another page via the
longdescattribute.
longdesc attribute is not well supported, and does not provide a sighted user with access to the description, so it is not recommended. For more information about support, see Longdesc Test Cases by WebAIM. - If the image will be implemented as an inline SVG, provide a
<desc>element in the SVG that describes the image, and include the<desc>ID as part of the<svg aria-labelledby> attribute’s value.
longdesc, <desc> does not provide a sighted user with access to the description, so it is not recommended. If you do use this method anyway, the combined title and description must be under 150 characters.How to document
No special documentation is required for this accessibility need. Your usual wireframes or prototypes will suffice. Call out the specific goal of providing a long description in the documentation or Agile story if necessary.