Images are very helpful for giving users information, but this information must always be available to users who cannot see or understand the image.
Pages should:
- never place important text within an image
- always have a way for users who cannot see the image to understand what it shows
- use alt-text appropriately
Where particular emphasis is required on information, such as an infographic, this should be created in HTML and styled in the CSS so that all users can read and understand it.
If using a photograph, this should be in JPG format, and have descriptive alt-text which gives detail about what the image contains. Good alt-text would be "A doctor shares a tablet computer with a patient, and is pointing at the screen", where bad alt-text would be things like "doctor and patient" or "picture1.jpg".
When graphs and charts are required, consideration should be given to using an accessible tool for visualisation, which can be navigated using things like screen readers. If this is not possible, then they should be in scalable vector graphic (SVG) format, with all text rendered as text. A properly constructed SVG will have relationships between objects which allow users to navigate and read them
The same applies to architectural, flow, and process diagrams, where using a properly constructed SVG can allow all users some level of understanding.
When the image format is not fully accessible, and as good practice when it is, pages should also include a full description of when it being shown. This can be a collapsed element within the page for most users (and ARIA labelled for accessibility users) to avoid cluttering the screen.
You should also consider providing source data in an accessible spreadsheet.