Beginner (Level A) Archives | Page 3 of 3

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.

Introduction

Users with visual impairments, including difficulties perceiving colour, may need help when you use colour on your website to present information.

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

How to Pass

Ensure no instructions rely on colour alone
Ensure that no information (like charts and graphs) relies 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?

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 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 1.3.3 – Sensory Characteristics. Instructions should always be clear and give your users the detail they need.

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:

‘Use the search box’
‘Use the search box on the right’
‘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.

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.

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.

How to Pass

Provide a full text transcript of the video; or
Provide a version of the video with audio description.

Exceptions

You don’t need to satisfy this guideline if the video is itself an alternative to other content.
You don’t need to provide an audio description track if the regular soundtrack contains all the information in the video.

Tips

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.

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.

Something like a straight face-to-face interview or a speech-to-camera would probably not need audio description. If your video conveys all its information through the regular soundtrack, you don’t need to provide an audio description track. Keep this in mind when creating videos.

To meet this guideline, it’s easier to provide users with a text transcript instead of audio description. However, the either/or option only covers Level A. To reach Level AA you need to offer audio description (see 1.2.5) and for Level AAA you need both audio description and text transcript (see 1.2.8).

If you’re going to the length of audio description for this guideline, you can also satisfy 1.2.5 – Audio Description (Pre-recorded) and 1.2.7 – Extended Audio Description by recording extended audio description tracks wherever necessary.

Introduction

Users with hearing impairments may not be able to perceive the sound on a video. Presenting the video’s content in captions means these users can fully enjoy the content.

How to Pass

Add captions to all videos with sound.
Caption all spoken word.
Identify speakers.
Caption non-speech information (such as sound effects).

Exceptions

You don’t need to provide captions if the video is itself an alternative for text. For example, if everything in the video is provided in plain text on the page and the video is the same content but recorded in a video presentation.

Tips

Captions can be closed (hidden until requested) or open (always visible), either will pass this guideline.

There are plenty of paid services that will add captions to your videos, often at reasonable rates. There are also many free programs that will attempt to create your caption file for you, but none as good as human eyes and ears just yet. Like with many areas of web accessibility, your choice is between spending time (writing your own captions) or money (outsourcing).

If you use a lot of video, build the time into your workflow from the start. If you feel you don’t have the time for captions, consider cutting the number of videos you upload. One accessible video that all of your users can enjoy is better than two videos that alienate some of your audience.

Introduction

Users who have difficulty with hearing and/or vision may need assistance with audio-only or video-only content, such as an audio file, embedded podcast or silent film.

As the popularity of podcasting continues to grow, making these accessible is an important part of a presenters job – in conjunction with their web desginer.

By providing the same information conveyed in the audio-only or video-only content in a different format, users can access the content by other means, such as text transcripts or assistive technology.

How to Pass Audio-only and Video-only (Pre-recorded)

Provide a text transcript that conveys the same information as audio-only media;
Provide a text transcript that conveys the same information as video-only media; or
Provide an audio-track that conveys the same information as video-only media.

Exceptions

You don’t need to provide an alternative if the content is itself an alternative for text.

Tips

Sometimes creating a text transcript is simple, other times you have to make a judgement call on what to include. The best bet is, as always, to be honest with your users. What does the media convey and does your transcript do the same? Could you swap one for the other?

A text transcript for a video without sound should describe what is going on in the video as clearly as possible. Try to focus on what the video is trying to say rather than getting bogged down with detail.

Alternatively, for video-only content, record an audio track that narrates the video.

Place your alternative or a link to it directly beneath your video or audio content.

Related to Audio-only and Video-only (Pre-recorded)

Provide text alternatives for non-text content that serves the same purpose.

Introduction

Users who cannot see images, hear audio or perceive video benefit from having text alternatives in their place. These can be read by the user or voiced by assistive technology.

Text alternatives must therefore provide the same information as the non-text content.

How to Pass Non-text Content

Add a text alternative to your images describing the image
For video and audio, add a short description of the media but ideally provide a transcript
Where a control or input field is non-text, add a name

Exceptions

For the following examples, you must provide a text alternative, but it doesn’t have to give the same information as the non-text content.

Tests (if it would invalidate the test)
CAPTCHA (but provide an accessible alternative, or even better don’t use CAPTCHA)

For these final examples, implement them in a way assistive technology can ignore them by using blank alt text.

Decorative content that has no meaning
Content is used solely for visual formatting
Content that’s invisible to all users

Tips

For images, the alt text should describe the image and give the same information as the image would if seen. This isn’t always easy, and people don’t always agree on what the ‘same’ information is. Ask yourself: what does the picture convey?

If the image is your company logo, your company name is a good bet. If the image is of text, replicate the text exactly. For all other images, describe the image helpfully and succinctly: we don’t need to know it’s a picture of 17,387 trees if the word ‘forest’ will serve the same purpose.

If you do use CAPTCHA, use one with an audio alternative and add your contact details somewhere close by to help your users if they get stuck.

Blank (or null) alt text is as easy as adding an alt tag with no space between the quotes.

<img src="location-of-image.jpg" alt="" />

Screen readers will skip the image rather than reading the filename or trying to substitute an alt text.

Introduction

How to Pass

Exceptions

Tips

See Also

Introduction

How to Pass

Tips

See Also

Introduction

How to Pass

Tips

See Also

Introduction

How to Pass

Tips

See Also

How to Pass

Tips

See Also

How to Pass

Exceptions

Tips

See Also

Introduction

How to Pass

Exceptions

Tips

See Also

Introduction

How to Pass Audio-only and Video-only (Pre-recorded)

Exceptions

Tips

Introduction

How to Pass Non-text Content

Exceptions

Tips

Related to Non-text Content

Start here

Boring pages

Security

Search Wuhcag