User Tools

Site Tools


Text Alternatives to Images and Icons

Images without alternative text and buttons without text are two of the most common accessibility problems. People with vision loss rely on text alternatives to understand the information conveyed by the image.

Images that contain text, like promotional banners, must have an alt attribute containing the same text. The alt text does not have to describe everything in the image, as long as it conveys the same message.

Images that are purely decorative should have empty alt attributes. Do not leave out the alt attribute altogether, or accessibility testing tools will flag the image as an error.

Buttons that use icons or images instead of words must have a text alternative, using either a visually hidden span, an alt attribute, or an ARIA attribute.

If an image containing text is part of a button or a link, its accessible name _must _match the words that are visible in the image. Sighted people using dictation software like Dragon Naturally Speaking to navigate the page might instruct the software to “click the ‘Select’ button,” and if the alt text is “choose” instead of “select,” the user will not be able to complete the action. Do not use the “visually-hidden” style or ARIA labels to add text to buttons and links, as this will create a mismatch that prevents voice recognition users from accessing the element.

See also

Accessible Material Icon Buttons

Copying Material Icon code from Google's website will result in accessible buttons, because their site does not provide alternative text. This results in screen readers announcing the icon keywords rather than the intent of the button ("keyboard underscore arrow underscore down" instead of "Expand," for example).

See this working branch for correct examples of icons in buttons.

accessibility/common_issues/alt_text.txt · Last modified: 2023/08/07 18:02 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.