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

Video with audio has a second alternative

An audio description is an edited version of a video’s soundtrack that adds more information than the regular soundtrack offers. This might mean narrating movements that are not audibly explained in the video, or adding context to visual information.

The need for audio description isn’t always clear to website owners, yet it is among the most used accessibility feature in the real world. Many cinemas have audio described screenings, where film fans can use earphones that offer a different soundtrack to the regular feature. That soundtrack will be the regular one supplemented with extra information intended to help film lovers with visual impairments.

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 would need to offer audio description. For Level AAA you need both audio description and text transcript.

What to do

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

Tips

A full text transcript is a document that includes all information present in the audio or video source. This means including any visual cues (for example, ‘The fisherman holds up a large bass.’) as well as dialogue attribution and description.

Providing audio description at this stage will fulfil Guideline 1.2.5 at Level AA but you will need both audio description and a transcript for Guideline 1.2.8 at Level AAA.

If you’re going to the length of audio description for this guideline, you can also satisfy Guideline 1.2.5 and Guideline 1.2.7 by recording extended audio description tracks wherever necessary.

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 sound, an audio description track is not needed. If you have this in your mind when you create videos, you can easily sidestep what could be a lengthy process.

If you do need to add audio description, there are a number of options available to you. You can pay a firm to narrate an alternative soundtrack for you, or you can do it yourself. As usual, it’s a case of balancing your resources of time and money.

Here’s a fun cartoon with audio description, it’s a little too talky but should point you in the right direction:

Exceptions

  • If the video is itself an alternative.
  • You don’t need an audio description if all of the information in the video is provided in the regular soundtrack.

See also

Featured image credit

Captions

Provide captions for videos with audio

Closed captioning is perhaps the most well known tool for people with disabilities. Often known as subtitles, or abbreviated as CC, closed captions have been around since the 1970s.13
Multimedia is becoming more and more popular as the average home gets faster and faster internet access. Videos are cropping up everywhere, from news websites to product pages. One of the most visited websites in the world, YouTube, is specifically for online videos. As website owners turn to video, you must think of how users process your multimedia content.

What to do

Add captions to all videos with sound.

Tips

Adding captions to a video is a relatively hard task, compared to something like writing a text transcript or providing alternative text. Captions must be synchronised with the video to be useful, which means marking up the plain text with timestamps.

There are plenty of paid services out there that will do your closed captioning for you, 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).

Google has written a very clear how-to guide on adding captions to YouTube videos, which I’m not going to try and better.

See also

Featured image credit

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

Some users will find it difficult to use or understand things like podcasts and silent videos or animations.

What to do

  • Write text transcripts for any audio-only media;
  • Write text transcripts for any video-only media; or
  • Record an audio-track for any video-only media;
  • Place the text transcript, or link to it, close to the media.

Tips

Audio-only and video-only content needs to be supported by text transcripts that convey the same information as the media. Sometimes this is quite simple, other times you have to make a judgement call on what that really means. The best bet is, as always, to be honest with your customers: what does the media convey and does your transcript do the same? Could you swap one for the other?

One of the most common uses for text transcripts is when a podcast is published online. Embedding a podcast in a page is a great way of sharing your content but no good for your customers with hearing impairments. A text transcript should contain everything mentioned in the recording.

Less commonly, some videos do not have sound. Your customers with visual impairments need help with this kind of content. 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.

As an alternative for video-only content, you could also choose to 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.

Exceptions

If the content is itself an alternative (you don’t have to provide a transcript of the audio track you provided to explain the silent video you used).

See also

Provide text alternatives for non-text content

Some users browse websites with images turned off (as do some users with slow internet connections). These must be true alternatives to the content: they must provide the same information.

What to do

  • Add a text alternative to all of your images.
  • Add a text alternative to your audio and video (a succinct description of the topic).
  • Add a name to all of your controls (such as ‘Search’ or ‘Submit’).

Tips

Alternative (or ‘alt’) text is a written replacement for an image, not an addition to it. This means that the text should describe the image and give the same information that 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.

Whatever you do, alt text is not an opportunity for keyword stuffing. Adding out-of-context keywords as alt text is terrible for accessibility, it does not meet WCAG 2.0 guidelines and it can even harm search engine rankings.

Alt text is relatively simple to audit and easy to fix, making this a quick win. One of the best ways is to add the WAVE Chrome Extension and check a page. As most sites have a standard template, you can catch your biggest issues with one sweep. Banners, sidebar images and footers only need fixing once to improve every page on your site. After that, you’ll need to check your website page by page.

Exceptions

There are a few types of image that don’t need alt text: spacers, icons, purely decorative, tests and CAPTCHA images.

Icons are usually used to complement text, rather than replace it, so there’s no need to duplicate your efforts here. Customers with screen readers would just hear the same thing twice anyway, which is the opposite of what we’re trying to do.

Spacers are images used for padding, often for ease and not good coding. They are often used to preserve formatting and present no information, so they don’t need alt text.

Decorative images are ones used just because they look nice. They have no information or use other than for their aesthetics.

Tests and CAPTCHAs that would be undermined by text alternatives don’t need them. Although 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.

In all these cases, use ‘null’ alt text by simply leaving the alt text out, but do put the quotes in:

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

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

See also