Provide users with content that has clear structure and relationships.

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

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

Provide a second alternative for video with sound.

Users with hearing impairments may not be able perceive the sound on a video.

While captions can provide some assistance, adding an audio description track or text transcript helps more users enjoy your content.

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.

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.

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.

See Also

Provide captions for videos with audio.

Introduction

Users with hearing impairments may not be able perceive the sound on a video. Presenting this in caption 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 sounds).

Exceptions

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

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.

See Also

Provide an alternative to video-only and audio-only content.

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.

By providing the same information in a different format, these users can access the content by other means, such as text or assistive technology.

How to Pass

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

For both audio-only and video-only, create your text transcript and place it either directly beneath the content or insert a link next to the content.

See Also

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

  • Add a text alternative to your images
  • If the content is video or audio, add a short description of the topic
  • If 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

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

  • The non-text content is decorative and has no meaning
  • The non-text content is only used for visual formatting
  • The non-text content is invisible to all users

Tips

For images, 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 or 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 without just a 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.

See Also