Distinguishable Archives

When hover or focus triggers content to appear, it is dismissible, hoverable and persistent.

Introduction

Additional content triggered by keyboard focus or mouse hover can cause accessibility issues for users with visual or cognitive impairments. Additional content can surprise users, prevent them completing a task or obscure content.

To overcome these issues, users must be able to understand when additional content appears and dismiss it.

How to Pass ‘Content on Hover or Focus’

Where keyboard focus or mouse hover triggers additional content to appear, the content must be:

Dismissible by the user without moving keyboard focus or mouse hover (for example by pressing the ‘escape’ key or closing on click);
Hoverable by the mouse pointer so the pointer can be moved over the content; and
Persistent until the user changes keyboard focus or mouse hover, dismisses the content or the content is no longer valid.

Exceptions

Where the content communicates an input error
Where the content doesn’t obscure other content
Where the additional content is controlled by the user, for example tooltips or sub-menus that appear on mouse hover which are controlled by web browser settings

‘Content on Hover or Focus’ Tips

Try not to use this type of content if you can avoid it – add your additional content to the page.

Introduction

Users with visual or cognitive impairments may wish to amend the default spacing around text content to make it easier for them to read and understand. When they do so, the content should remain visible in full.

How to Pass ‘Text Spacing’

Content and function remain intact when a user changes:

Line height to at least 1.5 times the font size;
Paragraph spacing to at least 2 times the font size;
Letter spacing to at least 0.12 times the font size; and
Word spacing to at least 0.16 times the font size.

Exceptions

Video captions

Image of text

‘Text Spacing’ Tips

For the most part, a website written in good HTML and CSS will comply, the key here is not having anything that prevents the user from making the changes to spacing.

Introduction

All users benefit from a good contrast between the components on your website and the colour around them.

Some users with visual impairments need a stronger contrast than others to fully distinguish and use components such as input fields, buttons and controls, so getting your colour choice right is essential.

How to Pass ‘Non-Text Contrast’

Ensure user controls have a contrast of at least 3:1 to the colour around them;
Where controls change colour on focus or use, ensure the colours used have a contrast of at least 3:1; and
Ensure all graphics (for example icons, graphs and charts) have a contrast of at least 3:1 to the colour around them.

Exceptions

Where a user interface component is visible but inactive (for example, a disabled button)
A graphic is not required for understanding (for example, a chart where labels give the same information as the coloured lines or a decorative graphic)
Brand logos
Representations of other things, such as a screenshot of a website or a heat map

‘Non-Text Contrast’ Tips

Remember the different states a component may have and ensure they all comply.

Where form fields use an indicator (for example for missing information), use a colour that meets the contrast criteria.

Where fields or controls use a border, ensure the border meets the criteria.

For graphs, ensure each line or bar has a 3:1 contrast with both the background and the other lines or bars.

For pie charts, ensure each segment as a 3:1 contrast with both the background and the segment either side of it.

Introduction

Some users with visual impairments need to resize text to read it comfortably.

When users enlarge content up to 400% of the default size, they should not have to scroll in their browser in more than one direction – horizontally and vertically.

How to Pass ‘Reflow’

Ensure vertical content doesn’t require a horizontal scroll at a width of 320 CSS pixels
ensure horizontal content doesn’t require a vertical scroll at a height of 256 CSS pixels

Exceptions

Where multi-directional scrolling is essential for meaning or function (for example images, maps, diagrams, games and components that require toolbars remain in view)
Complex data tables

‘Reflow’ Tips

Responsive web design, where content reflows to fit the user’s viewport, may already mean your website complies with this guideline.

It’s best not to use horizontal scrolling when writing in most languages, as we are accustomed to reading columns of text vertically. Reflow your content into a single vertical column when enlarged.

320 CSS pixels is the same as a default viewport of 1280 pixels enlarged 400%.

256 CSS pixels is the same is a default viewport of 1024 pixels enlarged 400%.

Introduction

Users with visual or cognitive impairments may rely on changing font size, colour, alignment or spacing to enjoy your content.

Text allows for this kind of personalisation, but images almost always don’t.

How to Pass ‘Images of Text’

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

Exceptions

If using an image is essential because you can’t achieve the effect with text (for example, presenting a particular example of typography).
If the text is part of an image that contains other visual content, such as labels on a diagram.
Purely decorative text.
Brand logos.

‘Images of Text’ Tips

You may already comply with this guideline, depending on how you addressed Images of Text.

Images are subject to guidelines on colour contrast – see Contrast (Minimum) and Contrast (Enhanced).

Introduction

Users with visual or cognitive impairments may need to customise the presentation of your website to understand and enjoy it.

Some users require a certain background and foreground colour to comfortably read text. Others find long lines or justified text difficult to follow and some find it hard to read text where the lines and paragraphs are close together.

As each user has different needs, providing a range of user-selectable options helps the most people.

How to Pass

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

Users can select background and foreground colours; and
Text blocks are no wider than 80 characters; and
Text is not justified to both sides of the webpage; and
Line spacing is at least space-and-a-half within paragraphs and
paragraph spacing is at least 1.5 times larger than line spacing
Text can be resized in a browser up to 200% without requiring the user to scroll horizontally

Tips

Add all visual presentation options to the header of your website, so they are some of the first things users interact with.

The BBC’s accessibility page has a good range of colour and spacing options to cover features 1 and 4.

Feature 4, concerning line and paragraph spacing, can be difficult to understand, so here’s a more detailed breakdown:

Text height must be changeable up to 150% of the default
Spaces between paragraphs must always be 150% of the spaces between lines of text
A good option is to give users some presets (like the ‘AAA’ element on the BBC’s accessibility page) of:
- Default text height, line and paragraph spacing
- 150% default text height, line and paragraph spacing
- 200% default text height, line and paragraph spacing

You probably fulfilled feature 5 when you completed 1.4.4 – Resize text.

Introduction

Some users have difficulties with their hearing and won’t be able to hear your audio content as clearly as others, especially separating speech from background audio.

You can help by ensuring that 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.

How to Pass

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

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 spambots and is often used in forms)
The audio is you “singing or rapping” (seriously, this is a direct quote)
The background sound can be turned off (but it’s better just to comply than add complexity)

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).

Only use good quality audio (you should be doing this anyway if you care about your website).

Introduction

All users benefit from a good contrast between the text on your website and the background colour.

Some users with visual impairments need a stronger contrast than others to understand your content, so using the right colours is essential.

While the minimum contrast for Level AA was 4.5:1, for Level AAA it’s 7:1. This higher standard of contrast helps a wider range of users read your content.

How to Pass

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.

Exceptions

Text that is 18 points or larger (or 14 points or larger, if bold) has a lower minimum contract ratio of 4.5: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

Tips

You may have fulfilled this guideline when you completed 1.4.3 – Contrast (Minimum).

In CSS pixel terms, 14 points is 18.5 pixels and 18 points is 24 pixels.

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 the 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 1.4.5 – Images of Text).

Introduction

Users with visual or cognitive impairments may rely on changing font size, colour, alignment or spacing to enjoy your content.

Text allows for this kind of personalisation, but images of text almost always don’t.

How to Pass

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 as text
Use CSS to style navigation menus as text

Exceptions

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 build the website
If the text is part of an image that contains other visual content, such as labels on a diagram
Purely decorative text
Brand logos

Tips

Images of text are subject to guidelines on colour contrast – see 1.4.3 – Contrast (Minimum) and 1.4.6 – Contrast (Enhanced).

The exception of the website being built in a technology that doesn’t allow the text to be presented as text is removed in the Guideline 1.4.9 – Images of Text (No Exception) at Level AAA.

Introduction

Some users with visual impairments need to change the size text to understand it fully.

To help these users, your website should allow for up to a 200% resize without dropping any content or functions. This should be accomplished in a browser and therefore not require any assistive technology.

How to Pass ‘Resize Text’

Users can resize the text content in their web browser up to 200% without loss of meaning or function.

Exceptions

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

‘Resize Text’ Tips

As all modern browsers allow for changing of text size, 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 (by CSS) based on three or four predetermined options, including 200%.

Check your website by resizing to 200% in a variety of browsers.

Make sure text doesn’t require the user to scroll horizontally and you fulfil part of Visual Presentation for Level AAA.

Introduction

How to Pass ‘Content on Hover or Focus’

Exceptions

‘Content on Hover or Focus’ Tips

See Also

Introduction

How to Pass ‘Text Spacing’

Exceptions

‘Text Spacing’ Tips

See Also

Introduction

How to Pass ‘Non-Text Contrast’

Exceptions

‘Non-Text Contrast’ Tips

See Also

Introduction

How to Pass ‘Reflow’

Exceptions

‘Reflow’ Tips

See Also

Introduction

How to Pass ‘Images of Text’

Exceptions

‘Images of Text’ Tips

See Also

Introduction

How to Pass

Tips

See Also

Introduction

How to Pass

Exceptions

Tips

See Also

Introduction

How to Pass

Exceptions

Tips

See Also

Introduction

How to Pass

Exceptions

Tips

See also

Introduction

How to Pass ‘Resize Text’

Exceptions

‘Resize Text’ Tips

See Also

Start here

Boring pages

Security

Search Wuhcag