Structure your website logically

All users benefit when your web page structure is logical. Many of us take things like headings, bullet points, bolding and italics for granted. For your users with disabilities, those elements can make the difference between understanding a website and leaving it. Many forms of assistive technology rely on correct formatting to work correctly, meaning a heading can go a long way for your users.

Because we use formatting elements so often, we can forget how to use them properly. Going back to basics is a great way to improve your content with relatively little effort.

What to do

Complying with the need for good web page 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 those headings with HTML header tags.
  • Use the correct HTML for all structural elements.
  • Use valid HTML everywhere else.
  • Use clear labels 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 a 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

Record player

Provide a second alternative for video with sound.

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

Featured image credit

Captions

Provide captions for videos with audio

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

Featured image credit

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

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