digitalservices.maidstone.gov.uk

Framework Accessible Online Documents


5 - Images

Accessible images and charts

Use alt text

People with visual impairments, whether they are blind or have partial sight, may lose out if you use a lot of images, charts, shapes, photographs, or clipart in your documents. This doesn’t mean you have to skip those features – you just have to add some alternative (or “alt”) text or captions to explain what they are. Screen reading software will read Alt text or captions aloud to make sure users with visual impairments don’t miss out.

Your alt text should be descriptive of the content (just like you would describe it to someone who cannot see it) but also concise.

How do I add alt text or captions on the images and charts in my document?

After you inserted your image or chart in your document, right click on it and select ‘Edit Alt text…’ (or ‘Insert Caption…). A pane will open on the right of the document where you can add your alt text. We strongly recommend that you add alt text to all images and do not use the ‘Mark as decorative’ function.

For more information you can use this Microsoft guide to adding alt text

What is the difference between alt text and captions?

The alt text is used to describe the image for search engines and screen readers. On the other hand, the caption is used to describe the image for all users.

Alt text is not visible on your document while captions are visible below your images.

The alt text is crucial for accessibility. The caption is optional and can be used only when you need to provide additional information about the image.

Avoid floating objects

When you add images, charts, or other objects, be careful with your text wrapping. If you use floating objects, screen reading software may ignore them altogether or read their Alt text in the wrong order.

Instead, use the “top and bottom” or “in line with text” text-wrapping options.

How do i choose the correct wrapping option for my image?

After you inserted your image or chart in your document, right click on it and select ‘Wrap Text’. In the next menu that opens up you will see all the different options for wrapping text. Hovering the cursor over each one, will change the text wrapping ‘on-the-fly’ and give a visual example that will help you choose the correct option.

(click image to enlarge)

.
If you wish to learn more about wrapping text around images in MS word, this article by Microsoft is a good start.


Digital Services

The Digital Service team at Maidstone Borough Council lead on the research, design and development of user centered services for residents in Maidstone

Find out more about the team

Recent posts

TADS Get Human-Centered
Keeping residents updated about their bin collections
TADS Weeknote #2