Tag: Perceivable

1.4.5 – Images of Text (Level AA)

Posted on August 14, 2013| By | In Intermediate (Level AA)

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

See also

Resize Text (1.4.4 – Level AA)

Posted on August 07, 2013| By | In Intermediate (Level AA)

Users can resize text to 200% without loss of content or function.

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.

See Also

1.4.3 – Contrast (Minimum) (Level AA)

Posted on July 31, 2013| By | In Intermediate (Level AA)

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

How to Pass

Make sure the contrast ratio between your text and background is at least 4.5: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 3:1
  • Text that is purely decorative
  • Text that 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

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

Picking a contrast of at least 7:1 will also fulfil Guideline 1.4.6 – Contrast (Enhanced) at Level AAA.

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

1.2.5 – Audio Description (Pre-recorded) (Level AA)

Posted on July 24, 2013| By | In Intermediate (Level AA)

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

How to Pass

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

Exceptions

You don’t need to add audio description 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.

Tips

Audio description is an edited version of a video’s soundtrack that adds more information than the regular soundtrack offers during pauses. 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.

If you provided audio descriptions for videos to meet 1.2.3, you’ve already fulfilled this guideline.

This doesn’t apply to live videos or streaming.

See Also

1.2.4 – Captions (Live) (Level AA)

Posted on July 15, 2013| By | In Intermediate (Level AA)

Add captions to live videos.

Introduction

Users with hearing impairments may rely on captions to enjoy your video content. Adding captions to live videos helps people use your website when you’re streaming live video.

How to Pass

Add captions to live video.

Tips

Include presenter cues and important sound effects as well as dialogue.

Depending on the software you’re using to stream, it may have a built-in auto caption option or you may need to link up some 3rd party captioning software.

This is a difficult and potentially expensive guideline to meet. Broadcasters like the BBC hire professional subtitlers to add captions to live television.

See Also

1.4.2 – Audio Control (Level A)

Posted on October 22, 2012| By | In Beginner (Level A)

Don’t play audio automatically.

Introduction

Automatically playing sounds can distract and disorientate users, especially those with cognitive impairment or relying on a screen reader.

How to Pass

Don’t have any audio that plays automatically.

Exceptions

Although you can technically pass this guideline by adding a pause, mute or stop function to automatic audio, that’s a bad idea. You don’t want users searching around your website for the audio control.

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.

Tips

Don’t be afraid to use audio! It can be great on a website, just let users choose when to play it.

See Also

Use of Colour (1.4.1 – Level A)

Posted on October 15, 2012| By | In Beginner (Level A)

Don’t use presentation that relies solely on colour.

Introduction

Users with visual impairments, including difficulties perceiving colour, may need help where colours on your website present information.

You can solve this by using other identifiers such as labels, shapes and patterns, issue.

How to Pass ‘Use of Colour’

  • Ensure no instructions rely on colour alone
  • Ensure that no information (like charts and graphs) relies on colour alone

‘Use of Colour’ Tips

Check for 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?

Making your website accessible to colour blind users is 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. Reinforce these instructions with at least one more identifying remark.

A common failure is link text. Marking this out with a change of colour alone isn’t good enough, use an underline, bolding or a symbol too.

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

There’s an overlap here with 1.3.3 – Sensory Characteristics. Instructions should always be clear and give your users the detail they need.

See Also

1.3.3 – Sensory Characteristics (Level A)

Posted on October 08, 2012| By | In Beginner (Level A)

Instructions don’t rely solely on sensory characteristics.

Introduction

“Sensory characteristics” is an important but complicated-sounding phrase in web accessibility. It’s actually far less complicated than it sounds. The sensory characteristics of components are things like shapes, sounds, positioning, orientation, sound, colour and size.

You’ll often come across sensory characteristics in instructions to users. Saying things like “Use the search bar on the right” isn’t helpful to a user who doesn’t understand what ‘right’ is and “Click the green button” doesn’t help users who can’t see green.

How to Pass

Getting sensory characteristics right is mainly a case of using your common sense. There are no technical requirements, just good and sensible copywriting:

  • Use text labels to elements in addition to sensory characteristics
  • Don’t user instructions that only use sensory characteristics
  • Avoid instructions that rely on sound

Tips

Creating accessible instructions is great for everyone. The clearer your instructions are, the more likely users will follow them.

Good instruction will use several sensory characteristics. Consider the accessibility of these examples:

  1. ‘Use the search box’
  2. ‘Use the search box on the right’
  3. ‘Search by using the green rectangular box labelled ‘Search’ at the top right of the page’

The first two won’t pass, they don’t give users enough sensory information. The third uses text labelling to help the user.

We often have an aversion to adding words, feeling that they can confuse users. In this case, the opposite is true. When you need instructions, make them count.

Avoid sound for instructions. It’s always hard to tell what the sound means and what a user did to make it happen. A prime example is if you use sounds to alert users to errors on a form. The user can’t tell exactly what made the error, they can’t even be sure the sound indicated an error. Use visual cues instead such as colour and symbols.

By making sure you don’t rely solely on colour in your instructions, you can work towards Guideline 1.4.1.

See Also

1.3.2 – Meaningful Sequence (Level A)

Posted on October 01, 2012| By | In Beginner (Level A)

Present content in a meaningful order.

Introduction

The meaning of content on your website relies on the order you present it. For example, in English we read from left to right and read a left-hand column before a right-hand column.

Users who rely on assistive technology (such as a screen reader) to interpret content, require content to be presented in a meaningful order. If this is presented out of sequence, users may become disorientated and may not understand the content.

How to Pass

Ensuring you present your content in a meaningful sequence is a wide-ranging part of web accessibility. It applies to all elements of all pages, so is as big or as small a task as your website.

A sequence is “meaningful” if the order of the content within it cannot be changed without altering its meaning.

Make sure you:

  • Present all content in a meaningful order
  • Separate navigation menus from the content
  • Use paragraphs in order
  • Nest headings from H1 downwards to show their relative importance
  • Choose whether a list needs numbering or not
  • Use valid HTML

Tips

Invest in some assistive technology and use it to browse your website.

Not all content has a meaningful sequence – for example, a sidebar next to the main article where it doesn’t matter if the user reads the sidebar or the article first

Turn off the site’s Cascading Style Sheet (CSS) and check that your web page displays in the correct order.

Using headings to show importance isn’t always straightforward. Headings on a web page are a great way to break up content and show your users the relative importance of each section. Headings in HTML range from H1 (the most important) to H6 (the least important). It’s best to have just one Heading1 (H1) on a web page, to show the title of that page.

However, headings don’t need to descend from 1 to 6 each time you use one. As well as headings that share levels, you can skip levels altogether if that fits your content.

See Also

1.3.1 – Info and Relationships (Level A)

Posted on September 24, 2012| By | In Beginner (Level A)

Content, structure and relationships can be programmatically determined.

All users benefit when your website structure is logical and each section of content has a clear relationship with the content around it. Visual cues like headings, bullet points, line breaks, tables, bolding, underlining links and other formatting choices help users understand the content.

Assistive technology often relies on correct formatting and logical structures to work. When a user experiences the site through a screen reader, other assistive technology or without CSS they should still understand the content.

How to Pass

Complying with the need for good structure and formatting is a wide-ranging target. Half-measures don’t work, so you can’t use subheadings properly and then throw random bullet points all over the place.

Amongst other things, you must:

  • Break up content with subheadings for new sections
  • Mark headings with HTML header tags
  • Use lists, tables and other formats where needed
  • Use the correct HTML for all structural elements
  • Use valid HTML everywhere
  • Use clear labels and alternative text on forms

All these elements must be programmatically determinable – which means that a web browser or assistive technology can understand them. For example, don’t just use bold for headings but use the correct heading tag such as H1.

Where this can’t be achieved programmatically, you must provide a text description. For example, “* indicates required fields”.

Tips

Ensuring that your web pages have an accessible structure is at once a simple and complex task. The level of difficulty depends on the complexity of your website; a page with several levels of headings will take more work than a single-topic blog post.

An efficient way to check your markup is to use an HTML validator. This will tell you if the web page structure has any HTML errors – these errors won’t always equate to accessibility flaws but the cleaner your code the better. Errors like improperly closed paragraph tags are easily remedied.

After using the validator, check pages manually for correctly nested headings and other more visible page elements. Manually check that any forms you use are labelled clearly too, simple things like required field asterisks that lack explanation can cause big problems.

See Also