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.

• Alt text decision tree will help determine when to use an alt attribute
• Alt text best practices describes how to write the alt text

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.

• Accessible Icon Buttons, Sara Soueidan
• Accessible names for buttons, Harvard IT

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

• Composing Effective and User-friendly Accessible Names – W3C ARIA Authoring Practices Guide

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.