Web accessibility

Accessibility is important for everyone, not just people with disabilities. Trying to read a non-responsive website on a phone with a terrible data signal shows that accessibility can also be situational. We make our content accessible because we care about equity and social justice. We also do it because it improves our content and makes stronger campaigns.

There are lots of good accessibility resources on the web, including the official W3C guidelines.

Content design

Break up text into short paragraphs to and make it easy to scan. Use subheadings and bullet points to guide readers through the text.

Plain English

Use simple language when you can, and explain what you mean, or link to an explanation when you can’t. Avoid jargon and slang. If you need to use an abbreviation or acronym that people may not understand, explain what it means on first reference.

The Upgoer text editor restricts you to the 1000 most commonly-used words in the English language. Try writing a paragraph of your next email or article in it.

Use Hemingway App or Typely to check for readability issues.

Links

Make sure the text of the link describes the thing it links to. This is especially important for people using screen readers, who might skip between the links on the page looking for something specific. Using “click here” won’t tell them anything.

Read the full guidance on using links like a pro.

Images

Alt text

Alt text is a way to label images. It's especially important for people who can’t see the images on our website and rely on screen readers to understand our content.

If an image is essential to understanding the overall meaning of the content (eg a map or diagram), use alt text to describe the image in a brief sentence or two so that people who don’t see the image should come away with the same information as if they had. You don’t need to say ‘image of…’ at the start of your description.

If the image is purely decorative, use an empty alt text tag (<alt=“”>) to tell screen readers to skip it.

Never omit the alt tag entirely, as some screen readers will read out the full image url instead, which is about the worst user experience you can imagine.

Contrast

We create a lot of images with text over the top. Make sure there’s enough contrast on the text so it’s easy to read.

Use a contrast checker to make sure your text is readable.

File size

Keep the file size of your image as small as you can, so people using slow connections don’t have to wait too long for it to load.

Photoshop has a whole range of options to help you export small image files – use your judgment (and Photoshop’s side-by-side comparison tool) to decide where to draw the line between image quality and file size.

Don’t over-compress JPEGs, as this results in poor quality images. Each image is different – images with large areas of flat colour will compress more easily than complex, busy images. As a general rule of thumb, avoid compressing JPEGs to anything less than 60%.

File type

Use the appropriate image type: JPEGs for photos, PNGs or vector files for graphics.

Video

Text alternatives

Help people with limited vision or a slow internet connection by providing a text alternative to a video wherever possible. This could take the form of an embedded subtitle file, a transcript, or an accompanying article that summarises the key arguments. Note that burned-in subtitles can’t be interpreted by screen readers.

Flashing images

Avoid flashing images, or if they’re unavoidable, add a clear warning to the start of the video.