Images can be used to improve the design and aesthetics of a web page. When implementing an image, it’s important to consider how it will impact the user’s experience of their website visit.
To maintain a satisfying experience regardless of our users circumstances, we can follow the below best practices:
To maintain a satisfying experience regardless of our users circumstances, we can follow the below best practices:
- Informative images should help the user achieve their goal within the context of their current journey.
- Images should be optimised for loading, search engines and user interaction.
- Images should reflect the brand, be universal, authentic and inclusive to all users.
- Images must work within the constraints of the interface.
- Decorative images should not obstruct a user's goal
- Images must be accessible, this can be done with appropriate alt text.
- Images should adhere to graphic principles as set by our visual identity
Alt text
Images make content engaging and easier to understand for our users, in particular for users with cognitive and learning disabilities. Images support those with visual impairments by building recognisable components that aid the navigation through content.
Extensive image use can detract from the user experience if they are not accessible to all user types. These includes:
- People using screen readers
- People using speech input software
- Mobile web users
- Users on poor network connections
- Users with limited understanding of the english language
- Search engines
Writing alt text
To better understand your images context, try describing the image as if by over the phone. This mindset helps write descriptive, yet accurate alt text.
Alt text length
When considering the length of your alt text, aim to describe the meaning of your image in the most concise way possible. Accessing content through a screen reader can be time consuming and we must value our users time.
Superfluous information
Alt text should not include information that is unnecessary to the user’s understanding of the content. This includes describing the images format, metadata or component name. Try not to include words such as “Thumbnail”, “News item”, “Logo” etc.
Alt text decision tree
When deciding whether or not to write alt text for your image, you can use this handy decision tree.
