Functional images on a web page are images that serve a specific purpose beyond just being decorative. They are used to initiate actions rather than to convey information.
Functional images should be chosen with care and purpose, ensuring that they support the website's goals and enhance the user's experience.
In terms of web accessibility, functional images need to be properly labelled and described so that users who rely on assistive technologies like screen readers can understand their function.
This means that each functional image should have an alt text attribute that describes the image in clear and concise language.
The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.
Examples of functional images
Logos
UL Logos are automatically added to the top of a webpage when a new page is created. In the case that another logo is needed for a page eg. an external company logo, please ensure that the image is good quality and ideally a png format. When adding alternative text to a logo, writing the text that appears in the image (typically, the company’s name) is sufficient.
Buttons
Images can be used to represent buttons that users can click on to perform an action, such as submitting a form or navigating to a different page.
Icons
Icons are small images that represent an action or concept, such as a magnifying glass icon for search, a trash can icon for delete, or a heart icon for favourite.
Maps
Images of maps are functional as they help users find locations and get directions. However, they are often uploaded in poor quality and are difficult to read. Before uploading an image of a map to your site please ensure it meets UL image standards and is high quality. Please also see the section on images of text and consider an alternative eg. a link to Google Maps.
Infographics
Images can be used to display complex information in a visual and easily understandable format, such as charts, graphs, and diagrams. Please ensure graphics are uploaded in high quality.
Thumbnails/ Teaser Images
Thumbnails are small images that represent larger images or videos. They help users preview content before clicking through to the full-size version. When uploading a teaser image to an event or news item please ensure there is no text information on your image as it may be cropped out when published.
Illustrations
Illustrations can be used to add personality and style to a website, but they can also be functional if they convey a message or guide the user's attention. Please ensure that you have permission to use an illustration.