Using images or pictures accessibly

How to use images accessibly

• Use images to support your text, not replace it, and always explain what the image shows.
• Photographs are helpful for realistic content and using illustrations to help explain complex tasks.
• Avoid using icons, symbols, and emojis. They may not be understood by all users or assistive technologies and can be treated as inaccessible images.
• Make sure images are clear and resized properly so they don't look blurry or too small. They should still be easy to see and read when zoomed in up to 200 to 250%, which helps people with low vision.
• Keep images in line with text, not wrapped. Place them after paragraphs with clear spacing.
• Do not put images inside text boxes or layer them, as this can confuse screen readers. If you need to group visuals, save them as one image (like a screenshot) and add clear alternative text (alt text).
• Avoid using images with embedded text. Screen readers and assistive technology cannot access or interpret the text, making it inaccessible.
• Don't share posters as images via email. Use accessible document formats instead.
• On social media, include all poster content in the post text to ensure accessibility.
• Do not hide hyperlinks behind images in documents or on webpages.
• Add an alternative text description to all images (photos, charts, diagrams, logos, and others).

Alternative text description (Alt text)

Alt text is a written description of an image that helps people who can't see it understand its content. It's essential for screen reader users, supports search engines, and appears when images don't load.

• Clearly describe the image's purpose in a concise, relevant way.
• Don't repeat descriptions already in the text or captions.
• Add alt text to all meaningful visuals; mark decorative ones appropriately.
• Avoid auto-generated alt text. It is often inaccurate.

Things you should not put in alt text

Do not include emojis, hyperlinks, hashtags and symbols, and nonessential information like credits, keywords, or promotional content that do not aid understanding.

Guidance on adding alt text across common platforms

Flow diagrams, charts, graphs and grouped images

• Save grouped visuals (like flowcharts and graphs) as a single image and use alt text to describe the image to ensure screen readers interpret them correctly and avoid confusion from individual elements. In Word, PowerPoint and Excel you can use the Snipping tool to take a screenshot of grouped visuals that creates a single image.
• Add data labels to charts and graphs with accessible sized fonts, style, and good colour contrast. Do not convey information using colour alone, so no colour coding.
• Also use long descriptions for complex images like charts or diagrams. These give more detail than alt text, explaining things like layout, colours, and meaning to help people understand the image without seeing it. Put the description in the main text or link to it near the image.

Resources

• Images – GOV.UK Design System
• Accessible Images - University of Reading
• Images Tutorial - Web Accessibility Initiative
• Images - Accessibility at Penn State
• How to write text descriptions (alt text) in BBC News articles - BBC GEL
• Images of text - BBC GEL
• Alternative text in action – Accessibility in government
• How to add alt text to images in Microsoft Word - WebAIM
• Image descriptions guide - Cambridge University Press