Guide to Web Publishing

All t4 users need to understand how to apply Alternate text ('Alt text') to the images they use on the website. We do this to meet accessibility standards and to provide a good experience for all.

To do this well (and legally), always consider the experience of a visitor who:

• can't view your images clearly
• may have to use a screen reader
• may not be able to download your images quickly. 

Firstly, avoid adding text directly within an image file. There is almost always a better way. You should be able to do it directly within the existing t4 templates: see Content types

Images of flowcharts and complex diagrams

If you need to publish a diagram or flowchart image that conveys a lot of information (and may also have text embedded in it), do not use alt text in ways like:

• (Alt:"flowchart")
• (Alt: "diagram of the steps required to complete this process").

The diagram or flowchart has to be described completely. A user who can't view it has to be able to understand its content just as well as someone who can view it.

In most cases, the best way to do this is to describe the diagram within the page copy itself. Or create a link under the image to another page containing a full description of it. Only use 'alt text' if the description can achieved with a short paragraph. This is unlikely with a information-heavy diagram.

The best way to write an accessible alternative for a diagram is to:

1. imagine you are describing the ideas or information in the image to someone over the phone
2. send the description you write to someone who hasn't seen the image and see if it makes sense to them. 

This is a good reference for using alt text: https://webaim.org/techniques/alttext/

Too many images on our website are unnecessarily large. This 

• frustrates users by slowing down the time a page takes to load
• adds to the carbon cost of data storage
• will attract penalties for how your pages rank on search engines like Google.  

Check your images before you upload them to the media library and resize when necessary. Use our recommended pixel dimensions as a guide. 

You may not notice you've uploaded a massive image, even after you upload/preview it. This is because a navigation tile will shrink the image to fit within its designated dimensions. But this doesn't mean the file itself is small. 

We recommend that web images are kept under 100Kb in size (anything over 200Kb has a likely problem). If you are uploading images that exceed this by a lot, check them to see if the pixel dimensions match our recommendations,

There are free tools you can use to resize your images, so that their file sizes are no bigger than they need to be. 

Note: You should not use the tools included within the t4 Media Library to resize your images, as they will not reduce the file size.