Tag: Perceivable

Content on Hover or Focus (1.4.13 – Level AA)

Posted on February 24, 2021| By | In Intermediate (Level AA)

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. 

See Also

Text Spacing (1.4.12 – Level AA)

Posted on February 24, 2021| By | In Intermediate (Level AA)

Content and function retain meaning when users change elements of text spacing.

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. 

See Also

Images of Text (No Exception) (1.4.9 – Level AAA)

Posted on February 21, 2014| By | In Advanced (Level AAA)

Don’t use 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 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).

See Also

1.4.8 – Visual Presentation (Level AAA)

Posted on February 19, 2014| By | In Advanced (Level AAA)

Offer users a range of presentation options for blocks of text.

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:

  1. Users can select background and foreground colours; and
  2. Text blocks are no wider than 80 characters; and
  3. Text is not justified to both sides of the webpage; and
  4. Line spacing is at least space-and-a-half within paragraphs and
    paragraph spacing is at least 1.5 times larger than line spacing
  5. 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.

See Also

1.4.7 – Low or No Background Audio (Level AAA)

Posted on February 17, 2014| By | In Advanced (Level AAA)

Audio-only content is clear with no or minimal background noise.

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

See Also

1.4.6 – Contrast (Enhanced) (Level AAA)

Posted on February 14, 2014| By | In Advanced (Level AAA)

The contrast ratio between text and background is at least 7:1.

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

See Also

Audio Only (Live) (1.2.9 – Level AAA)

Posted on February 12, 2014| By | In Advanced (Level AAA)

Provide alternatives for live audio.

Introduction

Some users with hearing impairments may rely on alternatives to enjoy live audio-only content.

How to Pass ‘Audio Only (Live)’

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

‘Audio Only (Live)’ Tips

To add live captions to an audio broadcast, you will need professional software and a trained operator. This isn’t a job you can accurately perform without training.

If you can use live video instead, many live streaming platforms now offer auto captions.

See Also

1.2.8 – Media Alternative (Pre-recorded) (Level AAA)

Posted on February 10, 2014| By | In Advanced (Level AAA)

Provide text alternatives for pre-recorded videos.

Introduction

Users with visual and/or hearing impairments may not be able to perceive the information in a video from its soundtrack or captions.

How to Pass

Provide a full text transcript for your video and link to it from near the original content

Exceptions

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

Tips

You may have fulfilled this Guideline if you chose to meet 1.2.3 – Audio Description or Media Alternative (Pre-recorded) with a text transcript.

A text transcript is a document that includes all information present in the video, essentially a script for the video. This means including any visual cues (for example, ‘The fisherman holds up a large bass.’) as well as dialogue and non-speech sounds.

See Also

Extended Audio Description (Pre-recorded) (1.2.7 – Level AAA)

Posted on February 07, 2014| By | In Advanced (Level AAA)

‘Extended Audio Description (Pre-recorded)’ requires you to provide extended audio descriptions for pre-recorded videos.

Introduction

Users with visual impairments or cognitive limitations may rely on audio description to enjoy videos. Adding an audio description soundtrack to videos means these users get all information from the content.

For videos where there’s more information to convey than the natural pauses in the soundtrack allow you, those users need an extended audio description soundtrack.

How to Pass ‘Extended Audio Description’

  • Provide an extended audio described version of a video’s soundtrack, selectable by the user; or
  • Provide an alternative version of your video with extended audio description.

Exceptions

  • You don’t need to add an audio description at all if your video conveys all its information through 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 to extend your audio description if a regular audio description can provide all of the information in the video during the natural pauses in sound.\This guideline doesn’t apply to live videos or streaming.
  • Live videos and streaming.

‘Extended Audio Description’ Tips

This builds on audio description by effectively pausing the video to give the soundtrack enough time to pass on all the information from the video. This might mean narrating movements that are not audibly explained in the video, identifying speakers or explaining visual information.

You can provide this to users by letting them select an audio track within the video player or having links to both versions of the video.

Keep this guideline in mind when creating videos to reduce your workload.

See Also

Sign Language (Pre-recorded) (1.2.6 – Level AAA)

Posted on January 06, 2014| By | In Advanced (Level AAA)

Provide sign language translations for pre-recorded videos.

Introduction

Users with hearing impairments can benefit from seeing a signed translation of your video soundtracks. In fact, those whose first language is a signed language may have limited reading ability, meaning captions can be difficult to follow.

Sign language is also faster to interpret than written captions and can convey emotion and tone much better.

How to Pass ‘Sign Language (Pre-recorded)’

Make an alternative version of your video with an interpreter either present in the main video or embedded as picture-in-picture and link to it from near the original content.

‘Sign Language (Pre-recorded)’ Tips

An obvious issue is the question of which language to use. Forms of signing are often exclusive to a particular country; even British and American are completely distinct, despite the similarities of the written language.

The best bet is to provide signing in the language of the country that you are targeting, or if you are multi-national, in the language of the country of the highest proportion of your visitors.

You’ll need to find and hire an interpreter for your videos.

See Also