Functional Images are images used in buttons, links, and other interactive elements. These images are used to initiate action rather than convey information. Hence, their text alternatives should convey the action that can be initiated (buttons) or the action’s destination (links) rather than the image itself.
How to Implement
This section lists the techniques that need to be implemented to ensure that textual descriptions are provided for Image links and buttons.
Designers Need to…
Supply a brief description of the action or destination the image is used for.
Content Writers Need to…
Supply unique and brief alternative text for images used within links and buttons.
Describe the function the image displays.
Avoid including actions, i.e. click, enter, Tap, etc. within the description.
Avoid including element role, i.e. link, button, etc. information within the description.
Practices to Apply & Avoid
Use accurate and descriptive text alternative for specifying the purpose of the image link/button. For example, on the Pearson website, the “Print” image link has a correct text alternative.Alt text = Print
Alt text = Announcement
How to Test for Accessibility?
To test a web page for functional images, perform the following steps:
Open the page in Google Chrome web browser.
Open the console by pressing F12 in the elements pane, and left-click on the interactive element (button or link) containing the functional image.
In the right pane of the console, click on the Accessibility pane.
Check that the interactive element has a name in the accessibility pane and that it accurately describes the purpose of the element.
If the condition in step 4 fails, then it is an accessibility violation as per WCAG 2.1 success criteria 1.1.1 at Level A.
