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

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

Contrast ratio between your text and background is at least 4.5: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.

What do to

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

Do this by:

Tips

  • Picking a contrast of at least 7:1 will also fulfil Guideline 1.4.6.
  • 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 3:1.
  • If the text is purely decorative.
  • If 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

Don’t play audio automatically

Automatically playing sounds doesn’t help your users. Your users don’t need audio distractions when visiting your website. You have a hard enough time getting them to do what you want. Some of your users will have problems focusing and unexpected sounds can distract them further.

What to do

  • Don’t have any audio that plays automatically.
  • Have all the audio you want, just let your users choose when they want to hear it.

Exceptions

Although you can pass this guideline by adding a pause, mute or stop function to automatic audio, that’s a bad idea. You don’t want your users frantically searching around your website for the audio control.
Users shouldn’t have to take action for a better experience, you need to provide it to them by default.

There’s a further exception on audio that plays for less than three seconds. Ignore this too. Three seconds of audio can still distract users, especially those who have problems maintaining focus.

See also

Understanding Success Criterion 1.4.2 (W3C)

Don’t use presentation that relies solely on colour

Your users with visual impairment need help when you use colour on your website. As many as 1 in 12 men have some degree of colour blindness. That means that somewhere around 8% of your male users will struggle with your website if you don’t use colour correctly.

What to do

Using colour is mainly a case of using your common sense:

  • Instructions must not rely on colour alone.
  • Other information (like charts and graphs) must not rely on colour alone.

Tips

Check for colour issues by viewing your website in black and white. Are there any instructions you can’t follow or is there information you can’t understand? (Note: Black and white isn’t the same as colour blindness but this is a good start).

Making your website accessible to colour blind users is pretty simple. The main area to focus on is giving instructions. Saying things like ‘Click the green button’ or ‘Required fields are red’ is useless to users who can’t see green or red. Back these kinds of instructions up with at least one more identifying remark.

Another point is to make sure that important graphics are not dependent on colour alone. For example, your users might not understand a pie chart where only colour separates the segments. In this case, you should add clear labelling and patterns to the segments.

There’s an overlap here with Guideline 1.3.3. Instructions should always be clear and give your customers the detail they need.

This guideline is not about removing all traces of colour from your website, far from it. It just means that colour must not be the only way of conveying the information or instruction. A common misconception is that web accessibility means making your website black and white, and making it completely boring. Web accessibility is about improving websites, not taking away from them.

See also