Don’t use images of text

Some of your users will visit your website using a text-only browser, or might have images turned off in a regular browser. Images of text cause problems, as they are harder for those users to understand.

Images of text also cause problems for your users if they like to resize websites to read them more clearly, because images do not work well this way. They also add to the time it takes your website to load, another key reason users will leave your website.

What to do

  • Don’t use an image of text when you can use plain text.
  • Display quotes as text rather than images.
  • Use CSS to style headings.
  • Use CSS to style navigation menus as text.

Exceptions

Despite the title of Guideline 1.4.9, some exceptions allow you to use images of text on your website:

  • Brand logos.
  • If using an image of text is essential because you can’t achieve the effect with text (for example, presenting a particular example of typography).
  • If the text is purely decorative.

Tips

  • You may already comply with this guideline, depending on how you addressed Guideline 1.4.5.
  • Images of text are subject to guidelines on colour contrast. See Guideline 1.4.3 and Guideline 1.4.6.

See also

Offer users a range of presentation options

Some of your users will have difficulty viewing your website with the same clarity as others. There’s no way you can guess every combination of colours and sizes your users prefer, but you can offer ways for them to customise their view.

Allowing your users to select from a range of visual presentation options will help them to get the best from your website.

What to do

The following five features are cumulative, as all must be in place to pass Guideline 1.4.8:

  1. Provide a tool that enables your customers to select from a number of background and foreground colours; and
  2. Text blocks must be no wider than 80 characters (make sure resized browser windows do not need horizontal scrolling); and
  3. Text is not justified to both sides of the webpage; and
  4. Provide a tool that enables your users to select from a number of line and paragraph spacing options – one of the options must give line spacing that is at least 1.5 in text blocks and spaces between paragraphs are at least 1.5x line spacing; and
  5. Text can be resized in a browser up to 200% without requiring the user to scroll horizontally (you may have fulfilled this when you complied with Guideline 1.4.4).

Tips

  • The W3C’s in-depth colour picker will cover feature number 1 noted prior.
  • The BBC’s accessibility page has a good range of colour and spacing options.
  • Add all visual presentation options to the header of your website, so they are some of the first things that your users see.

See also

Your audio is clear for listeners to hear

Some of your users will have difficulties with their hearing. They will not be able to hear your audio content as clearly as other users. You can help by ensuring that all of your audio is clear.
If you have pre-recorded audio-only content, keep background noise to a minimum so that the speaking voices can be heard.

What to do

  • Make sure your pre-recorded audio does not contain any background noise; or
  • If there has to be some background noise, it is generally 20 decibels lower than the foreground noise. That’s about four times quieter.

Tips

  • Record your audio in a place you know will be quiet (a room with lots of soft furnishings is best if you haven’t got a studio).
  • Embed good quality audio (you should be doing this anyway if you care about your website).

Exceptions

Background noise is acceptable if:

  • The audio isn’t mainly speech (for example, in an audio play, an action scene might have a helicopter blown up by a car).
  • The audio is part of a CAPTCHA element (CAPTCHA is a test that separates humans from spam bots and is often used in forms).
  • The audio is you singing or rapping.

See also

Contrast ratio between your text and background is at least 7:1

All of your users will benefit from a good contrast between the text on your website and the background colour. Some of your users with visual impairments need a stronger contrast than others, so getting your colours right is essential.

While the minimum contrast for Level AA was 4.5:1, for Level AAA it’s 7:1. This higher level of contrast makes it even easier for everyone to read your content.

What to do

Make sure the contrast ratio between your text and background is at least 7:1.

Do this by:

  • Using a light background and dark text; or
  • Using a dark background and light text; and
  • Using a colour contrast checker to verify your choice.

Tips

  • You may have fulfilled this guideline when you complied with Guideline 1.4.3.
  • Remember to ensure that all colours used conform. This includes links that change colour after being used once, and headings in menus and sidebars, as well as main content.
  • Make sure that any embedded charts or images of charts have the minimum contrast between elements (for example, bars, axes and labels).
  • This guideline also applies to images of text (but you shouldn’t be using images of text – see Guideline 1.4.5).

Exceptions

  • Text that is 18 points or larger (or 14 points or larger, if bold) must have a contrast of at least 4.5:1.
  • Where text is purely decorative – so you could have a block of different coloured words on a blue background if it didn’t mean anything to your users and their order was random.
  • Where the text is an incidental part of an image (for example, a man who is reading a newspaper or a landscape that happens to include a street sign).
  • Brand logos.

See also

Provide alternatives for live audio

When broadcasting live audio-only content, such as a live podcast or radio stream, some users will rely on an alternative to the audio to understand your content.

What to do

  • Add closed captions to live audio; or
  • If the live broadcast is from a prepared script, make the script text available from near the original content.

Tips

  • To add live captions to an audio broadcast you will need professional software.
  • You may also want to hire a professional subtitler to get the best results.

See also

Broken television

Provide a text alternative to your videos

While you may have produced captions or audio description to enhance your videos, some users will rely on a text alternative to get the information. Providing a full text transcript of a video, including links to any calls to action, can help make it more accessible.

What to do

  • Provide a full text transcript for your video and link to it from near the original content.
  • If the video needs audio description, make sure that is also in place.

Tips

  • You may have fulfilled this Guideline if you chose to meet Guideline 1.2.3 with a text transcript and then fulfilled Guideline 1.2.5 with audio description.
  • A good transcript contains all information in the video, such as visual cues, description and dialogue attribution.

Exceptions

If the video is itself an alternative, you don’t need to add a transcript.

See also

Featured image edit

Drawing of a cassette

Provide extended audio description for videos

Your users who value audio description need to receive the same information that other users get from your video. Extended audio description can help where your video conveys large amounts of information without enough pauses in the regular soundtrack for audio description to work. Extended audio description is simply pausing the video to give a narrator enough time to convey the information in the video.

What to do

Make an alternative version of your video with an extended audio description soundtrack and link to it from near the original content.

Tips

  • Hire a video editor to get the timings right and synchronise the audio and video.
  • If you chose to use audio description to fulfil Guideline 1.2.3, you may have already satisfied this guideline.

Exceptions

  • No audio description is needed if all of the information in the video is provided in the regular soundtrack. Something like a straight face-to-face interview, or a speech to-camera would probably not need audio description.
  • You don’t need extended audio description if regular audio description can provide all of the information in the video.

See also

Featured image credit

Sign language

Provide sign language translations for videos

Some of your users will want to view sign language interpretations of your videos. Adding this feature offers those users the same information as others.

What to do

Make an alternative version of your video with a sign language interpreter embedded and link to it from near the original content.

See also

Featured image credit

Don’t use images of text

Some of your users will visit your website using a text-only browser, or might have images turned off in a regular browser. Images of text cause problems, as they are harder for those users to understand.

Images of text also cause problems for your users if they like to resize websites to read them more clearly because images do not work well this way. They also add to the time it takes your website to load, another key reason users will leave your website.

What to do

  • Do not use an image of text when you can use plain text.
  • Display quotes as text rather than images.
  • Use CSS to style headings.
  • Use CSS to style navigation menus as text.

Tips

Images of text are subject to guidelines on colour contrast. See Guideline 1.4.3 and Guideline 1.4.6.

Exceptions

  • Brand logos.
  • If using an image of text is essential because you can’t achieve the effect with text (for example, presenting a particular example of typography).
  • If the presentation can’t be achieved with the technology used to design the website. However, this exception is removed in Level AAA Guideline 1.4.9.
  • Purely decorative text.

See also

Text can be resized to 200% without loss of content or function

Some of your users with visual impairments will need to resize text in order to understand it fully. You should allow for up to a 200% resize of text without dropping any content or functions.

What to do

As all modern browsers allow for resizing text, a website based on good HTML and CSS should comply.

If your website doesn’t resize correctly to at least 200% in a browser, add a feature that enables users to resize text (by CSS) based on three or four predetermined options, including 200%.

Tips

  • Resizing text is different to zooming (which enlarges text, images and layout without preserving formatting).
  • Check your website by resizing to 200% in a variety of browsers.
  • Make sure your resized text doesn’t require the user to scroll horizontally and you fulfil part of Guideline 1.4.8.

Exceptions

  • Images of text (but don’t use images of text, because they don’t resize well).
  • Captions.

See also