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.

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

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.

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

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.

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.

Present your website content in a meaningful order

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. Present the content on your website in an order that your users can understand.

Some of your users rely on assistive technology (like a screen reader) to interpret content. By sequencing content correctly, you can make sure that your users with disabilities can understand your website and improve your overall web accessibility.

What to do

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.

Make sure you:

• Present content in a meaningful order.
• Separate navigation menus from content.

Always present your content so that it preserves your meaning. That way, it’s great for anyone reading it. The main things to look out for are:

• Use paragraphs in order.
• Use headings to show importance.
• Choose whether a list needs numbering or not.
• Use valid HTML and check it with the W3C’s markup validator.15

Tips

Invest in some assistive technology and use it to browse your website. NVDA is a free screen reader you can try to get started.

Turn off the site’s Cascading Style Sheet (CSS) and check that your web page displays in the correct order. You can use an extension like Pendule for Chrome to easily toggle CSS on and off.

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 1 (the most important) to 6 (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.

Use more than one sense for instructions

Sensory characteristics is an important but ridiculous-sounding phrase in web accessibility. It’s actually far less complicated than it sounds. The sensory characteristics of your website are things like shape, sound, position and size.

You’ll often come across sensory characteristics in instructions to your users. Saying things like ‘Use the search bar on the right’ isn’t helpful to a user who doesn’t understand what right is. The main solution is to use more than one indicator for instructions.

What to do

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

• Use more than one sense for instructions.
• 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 – this is especially useful for things like buying instructions. Getting this guideline right might just make you more money or get you more users by reducing dropouts.

A good instruction will use several sensory characteristics. Consider the accessibility of these four examples:

• ‘Use the search box’
• ‘Use the search box on the right’
• ‘Search by using the green rectangle box labelled ‘Search’ on the right’
• ‘Search by using the rectangle box at the very top right of this page’

Web designers often have an aversion to adding words, feeling that it adds to confusion. In this case, the opposite can be true. Of course, ideally you want a website that feels instinctive with clear actions. When you need instructions, get them right.

It’s best to avoid sound on a website, other than in media. No one likes unexpected sounds. It’s always hard to tell what the sound means and what you did do 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 won’t even be sure the sound indicated an error. Your users with hearing impairments have no chance.

For forms, use a clear visual clue for errors and avoid sounds altogether.

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

Don’t use presentation that relies solely on colour

Your users with visual impairment need help when you use colour on your website. As many as 1 in 12 men have some degree of colour blindness. That means that somewhere around 8% of your male users will struggle with your website if you don’t use colour correctly.

What to do

Using colour is mainly a case of using your common sense:

• Instructions must not rely on colour alone.
• Other information (like charts and graphs) must not rely 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? (Note: Black and white isn’t the same as colour blindness but this is a good start).

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

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 Guideline 1.3.3. Instructions should always be clear and give your customers the detail they need.

This guideline is not about removing all traces of colour from your website, far from it. It just means that colour must not be the only way of conveying the information or instruction. A common misconception is that web accessibility means making your website black and white, and making it completely boring. Web accessibility is about improving websites, not taking away from them.

Don’t play audio automatically

Automatically playing sounds doesn’t help your users. Your users don’t need audio distractions when visiting your website. You have a hard enough time getting them to do what you want. Some of your users will have problems focusing and unexpected sounds can distract them further.

What to do

• Don’t have any audio that plays automatically.
• Have all the audio you want, just let your users choose when they want to hear it.

Exceptions

Although you can pass this guideline by adding a pause, mute or stop function to automatic audio, that’s a bad idea. You don’t want your users frantically searching around your website for the audio control.
Users shouldn’t have to take action for a better experience, you need to provide it to them by default.

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.

Your customers will have varying degrees of motor skills and will benefit from keyboard accessibility. Customers with motor impairment, including many elderly customers, need your help to navigate your website. Many of these customers will use their keyboard to move around your website.

This article explains what you need to do to meet Guideline 2.1.1 – Keyboard from the Web Content Accessibility Guidelines 2.0.

All parts of your website must pass keyboard accessibility. That means your forms, menus, shopping cart and everything between. On top of that, you cannot require specific timings for keystrokes to access any feature on your website.

What to do

• A clean HTML and CSS website will often have keyboard accessibility without further work – a great example of why you need to invest in web design and development from the outset

Auditing keyboard accessibility

• Unplug your mouse and make sure you can fully use your website with your keyboard
• Make sure no function on your website requires timed keystrokes – such as double tap enter/return within two seconds to submit

A few more things

At the lowest level of accessibility (which 2.1.1 – Keyboard is), you can get away with functions that require a mouse pointer for input. These are things like free drawing tools and some types of game. Just think carefully about who you are excluding when you use these features.

One thing that gets thrown out a lot by keyboard accessibility advocates is ‘Access keys’. You’re already familiar with access keys, which is why people are quick to accept them as useful. Access keys are keyboard shortcuts like ctrl +  p to print pr ctrl + s to save.

Access keys work great in programs like Microsoft Word and Adobe Reader because they’re in a controlled environment. Out on the wild wild web, things aren’t so simple. Your customers access your website on a number of web browsers; some use Internet Explorer, some Firefox, some Google Chrome and so on… These web browsers have different levels of support for Access keys.

Frustratingly, Access keys are a good idea for keyboard accessibility with bad implementation. If you’re a regular computer user, you probably use ctrl + p  much more often than selecting the menu with your mouse pointer. WebAIM has an article about Access keys if you want to know more. My advice: avoid them.

Your website must not trap keyboard users

Your users have varying degrees of motor skills and may use your website with only their keyboard.
You must make sure that keyboard-only users can’t get stuck anywhere on your site. All parts of your website should be reachable by keyboard alone (See Guideline 2.1.1). Your users must also be able to navigate away from all parts of your website. If your users can reach a feature (such as a subscribe form) by keyboard but can’t leave it by keyboard, they are keyboard trapped.

What to do

• Test your website to make sure you can navigate away from, as well as to, all parts of your website by keyboard only.
• Make sure all navigation is controllable by either the ‘Tab’ or arrow keys, which is a standard many people are familiar with.

Tips

• Unplug your mouse and make sure you can fully use your website with your keyboard.
• It’s tempting to use non-standard navigation with a text explanation of what to do, but this isn’t worth your time. Stick to the Tab and arrow keys and the majority of your customers will already know how to use your website.
• Be wary of third-party adverts and widgets, often these are not accessible.

Time limits have user controls

If any of your content is time-controlled, you risk losing users who need more time to read and understand the information on your website.

Time-controlled content is anything on your website that expires or becomes unusable by your users after a certain time. A common example is giving a user ten minutes to fill in and send a form. There are functional reasons to set time limits, but you must consider all of your users.

What to do

• If your website uses a time limit:
  • Give your users an option to turn off the time limit before it begins (for example, a landing page before the time-controlled page can display a message that shows your customers what to do); or
  • Give your users the option to adjust the time limit before it begins, over a range of at least ten times the default setting (you can do this with a landing page too); or
  • Give your users the option to extend the period at least twenty seconds before it expires. This must be a simple action like clicking a button and must be available to use at least ten times.
• If your website has moving or animated text, users must be able to pause the movement.
• If your website has a feature that updates automatically (for example, with the latest football scores), you must allow your users to delay the frequency of the updates by at least ten times the default setting.

Tips

• Take as much content outside of time limits as possible.
• Make sure any user controls you provide are keyboard accessible.
• If you use a pop-up to give your users the option to extend a time limit, consider Guideline 2.2.4.

Exceptions

There are some valid exceptions to Guideline 2.2.1, because sometimes you must set time limits for your website or business to work.

You do not need to provide the above controls if:

• The time limit is due to real-time events, like bidding in an auction.
• Your content is a live video stream.
• The time limit is essential for your business. For example, a ticket sales website that saves a reservation for ten minutes because demand is high and giving users unlimited time would undermine the business process.
• The time limit is more than 20 hours.

Provide user controls for moving content

How many times have you visited a website that tries to get your attention with movement? Your eyes catch the scrolling text or a blinking advert, and you take notice for a second or two. More often than not, what you looked at wasn’t why you were visiting the website.

You try to return to what you were doing, except now it’s harder to focus because the movement is in the corner of your eye. You end up leaving the website because you can’t complete what you started.

That’s the effect of scrolling and blinking content on your average user and that’s enough of a reason to avoid it altogether. Now, consider the effect on your users with reading or concentration difficulties. I hope that you can understand why you must provide your users with controls to pause moving content.

What to do

• Moving, blinking or scrolling content must have an option to pause, stop or hide it; and
• Auto-updating content must have the same options; or
• An option to control frequency (see Guideline 2.2.1 for advice).

Tips

The guideline is more forgiving than I am. It lets you offer your users a pause option, but I suggest you remove anything that moves, scrolls or blinks altogether.

It also covers auto-updating content, which is where the strength of the guideline lies. Auto-updating content can be great. You could use it to show the latest sports scores, share prices or your Twitter feed. While the guideline applies to all moving, blinking and scrolling content, I’d love to see you eliminate all but auto-updating content.

Exceptions

You can ignore the rules of moving content if:

• The moving content does not start automatically, without user interaction.
• Your moving, scrolling or blinking content lasts less than five seconds.
• The information is not parallel with content but separate (for example, a full-page advert displayed before users reach your webpage).
• The movement is an animation that runs to show your users that something is loading, if it would otherwise look like your website was frozen.

No content flashes more than three times per second

To make your website as safe as possible for all users, you must limit the amount of flashing media. Flashing content can harm the health of some users.

What this means

Don’t add anything to your website that flashes more than three times per second.

Tips

Remember, flashing is different to blinking (see Guideline 2.2.2).

Exceptions

There is a ridiculously complicated exception based on the user’s visual field. You should just avoid all flashing content, but here it is:

the combined area of flashes occurring concurrently occupies no more than a total of .006 steradians within any 10 degree visual field on the screen (25% of any 10 degree visual field on the screen) at typical viewing distance.Understanding WCAG 2.0

If you can work out what that means, I dare you to use it.

Provide a ‘Skip to Content’ link

Screen readers announce all of the links on the page to the user, in order. To help your users navigate your website, provide a way for them to bypass parts of each page, such as long navigation links, links in your header and other repetitive content.

You can help your users bypass these blocks by adding a ‘Skip to Content’ link to your website’s header. This link moves the user from the top of the page (above your header) down to the start of the page’s content. This means users with screen readers can skip the repetitive content and get a better experience of your website.

The same goes for users who browse your website with a lot of zoom in order to understand it. They need extra help navigating to what’s important. Allowing them to skip your menu helps.

What to do

Add a ‘Skip to Content’ link to all pages on your website. It’s best if you make the link visible.

The easiest way to add a ‘Skip to Content’ link to your website is to use of a great piece of code from the guys on the PayPal Accessibility Team. They produced something called ‘SkipTo’, which adds a link for you. Best of all if you’re using WordPress or Drupal, there are plugins you can use.

Use helpful and clear page titles

Web page titles tell your users where they are on your website. A good title tells your users which page they are on and what that page is for.

A page title is what users see in the very top bar of your web browser. A good web page title tells users what the page is about without needing to read more. This lets users quickly understand if they are on the right page.

What to do

Give each page on your website a unique and descriptive title.

Many websites use a Content Management System (CMS) that controls page titles. Don’t worry – this isn’t as scary as it sounds. You’ve probably already got one, such as the free and popular WordPress. A good CMS will allow you to set individual page titles with no need to touch any code.

A useful format for writing page titles is: ‘Page name – Page description – Website name’

For example: ‘About Us – Learn our Secrets – ACME Corp’

Tips

• In many cases, it makes sense to repeat the page title or a variation of it as the top heading on your page.
• Type all of your page titles into a spreadsheet and review them. If they make sense out of context, they will work on your website.
• Use these page titles in your sitemap (See Guideline 2.4.5 and Guideline 2.4.8) to make it more accessible.

Pages work in a logical order

Your users need to find their way around your website in a sequential and meaningful order. You can control this with the ‘focus order’ of your website.

‘Focus order’ is the sequence in which a user accesses elements on your website. For example, some users can’t use a mouse and will ‘tab’ through your website – they must access elements in an order that makes sense. This order is as simple as a bit of logic, such as going from your header to your menu to your page content.

What to do

• A well-made HTML website will often comply with this guideline.
• Unplug your mouse and verify that you can use the ‘Tab’ key to navigate to every part of your website and use every function, including search boxes and forms – make sure each page has a sensible focus order.

Tips

If you have complied with Guideline 2.1.1, you may have already covered elements of this guideline.

Exceptions

• Complex items like tree diagrams do not have to be exactly programmed to a specific order, as long as your users can reach every element.
• You don’t need to set a focus order if your page doesn’t need to be navigated in a particular sequence to be understood. For example, a random collage of links or images.

Every link’s purpose is clear from its context

It’s essential that you make your hyperlinks (usually just called ‘links’) clear and easy to understand.
Users with assistive technology, like a screen reader, often hear all the links on a page to help them find where they want to go. Others may view your website highly magnified, so the user will only see the link text and a few words around it at any one time.

To help your users, your link text (the words that are linked, often called ‘anchor text’) must make the link destination clear, in the context of their surrounding content.

What to do

To comply with this guideline, make sure that for each link on your website:

• The purpose of the link is clear from the link text (for example, ‘My blog’); or
• The purpose of the link is clear from the surrounding content, meaning the same sentence, paragraph or cell in a table (for example, ‘Visit my blog’ ); or
• If the link is an image, the alt text of the image makes the link purpose clear (for example, ‘Luke McGrath – Visit my blog’); and
• Links with the same destination have the same description (but links don’t share a description if they point to different places).

Tips

Full disclosure: there is another option, but it’s not an approach I recommend. You could explain the purpose of a link in its title attribute. However, title attributes are not a great solution as they have patchy support across web browsers, screen readers and other types of assistive technology. Leverage your other options to make links clear.

A good writer will only ever need the first option, making the link purpose clear for the link text. It is the most accessible solution and the best for your users. There is always a way to make your link accessible using link text alone. At Level AAA, Guideline 1.4.9 requires you to make links accessible using only the link text anyway.

Exceptions

You don’t need to make the link purpose clear if the purpose is ambiguous to all of your users. For example, if I link the word ‘blog’ in the phrase ‘I have a personal blog’ the link might go to my blog, or it might go to a Wikipedia page explaining what a blog is. No user would reliably know where the link goes before they follow the link.

Of course, it’s best to avoid ambiguous links as users should always know where they are going. Although, there are times when you might want to spring a fun surprise on everyone.

Every page of your website has a language assigned

Setting every webpage’s HTML language is an easy way to help your users, including those browsing your website with assistive technology. Setting a language is important because the way that screen readers pronounce words depends on the HTML language assigned to your website.

What to do

Ensure that each page of your website has a language assigned to it.

Tips

• Set the language in your template and you’ll only need to do this once.
• If you trade internationally and have different parts of your website in different languages, make sure they are assigned correctly.
• HTML language codes match the ISO language codes standard. W3Schools has a full list of language codes.

Elements do not change when they receive focus

If your website doesn’t act as users expect it to, they’ll leave and you won’t see them again.

Focus is vital when considering what happens on your website when users reach elements like forms, videos and other interactive elements. Once an element receives focus from users, whether with a mouse or keyboard, the element must not automatically change (known as ‘changing on focus’). This can disorientate users.

A change of focus is especially troublesome for users who navigate by keyboard.

What to do

• Ensure no element changes purely by receiving focus.
• Avoid both behavioural and visual modifications.

Ensure that:

• Links don’t open automatically on focus; and
• Forms don’t submit without the user taking action (such as clicking the ‘Submit’ button); and
• There are no automatic pop-ups; and
• Focus never jumps to another element automatically; and
• No other action that occurs on focus alone causes the page to change.

Tips

• Most well-made websites will not have any of these errors by default, you would need to choose to add in change on focus.
• A great way to test this guideline is to unplug your mouse and navigate your way round your website. If anything moves, submits or changes on focus, fix it!

Exceptions

Elements can change on focus if the context doesn’t change. For example, you can use a dynamic menu on your website, the kind where navigation options drop down when you hover over an item. This is not a change of context.

Another example would be a hover status on a link, again, this this isn’t a change of context.

Elements do not change when they receive input

If you want your users to return to your website, make sure it acts as users expect it to.

When a form receives input from users (for example, typing in an address or selecting a date of birth), it must not automatically skip to another field or auto-submit – known as ‘changing on input’. This can disorientate users.

Only submit form data when a user chooses to click a submit button. It’s common sense behaviour, but if you get it wrong, your users will be frustrated and leave.

What to do

Here are some examples of the kinds of things to look out for:

• Forms must not auto-submit when all fields are filled – this prevents your users from checking and editing what they have written.
• Focus (the field where the user will input next) must not automatically jump to the next field in a form once a field is complete.
• Using a control (like selecting yes or no) must not automatically perform the action (for example, selecting to subscribe to a newsletter in a check box must not automatically subscribe your user, they should be able to click a submit button to confirm their decision).

Tips

The easiest way to pass Guideline 3.2.2 is to use submit buttons and avoid jumping your users between fields. It’s all about leaving the control in your users’ hands, where it belongs.

Exceptions

Elements can change on input if you inform the user of the change before they have the chance to input their data or make their selection. For example, you may have seen websites with options in the header to choose a text size. Once you click on the size you want, the website changes without giving you the chance to confirm your choice.

Controls like that don’t need to have a submit button, as long as it’s clear from the text before the element what will happen when you input.

Clearly identify input errors

Everyone makes mistakes, even you and I. Make it easy for users to understand and correct their mistakes with a bit of guidance. Provide timely and clear error identification guidance when users make mistakes on your website. Using error identification keeps your website running smoothly and keeps your users from getting frustrated.

One of the worst areas for mistakes websites are forms, including checkouts, newsletter sign-ups and questionnaires. Any of your users can make a simple error that means they can’t submit your form. If users cannot identify their mistakes, they will leave.

What to do

• Identify and explain to the user any mistakes that you can detect automatically.
• Add error explanation close to the error, showing what is wrong and how to fix it.

Tips

• If a form requires input in a certain format, show and describe the required format.
• If a mandatory field is empty, highlight the field and explain what’s required.
• Build forms to be forgiving, accepting variations on the formats you prefer.
• Don’t ask for too much information, just what you need.
• Be specific. Use clear, concise instruction and form field labels.
• Highlight mistakes in forms with colours and symbols.
• Don’t clear a form if a user makes a mistake. Save the information and allow the user to edit their error and continue.
• Provide extra help by giving your contact details on all pages (the header or footer are great) and especially near forms.

Label elements and give instructions

Chances are your website will have a feature that requires your users to fill in some information. This might be on a checkout page to buy a product, a contact form to get in touch or a newsletter sign-up to opt in to your mailing list. You need to ensure your users know what’s required of them when they reach one of these elements on your website.

Without clear labels and instructions, your users won’t know what to do.

What to do

• Label all input fields clearly and helpfully.
• Where a field needs a specific format, give an example (For example, for a ‘date’ field in a form you might use ‘Enter the date as dd/mm/yyyy’)
• Mark required fields with an icon and explain what the icon means before the form.
• Keep your labels simple – too much explanation can be counter-productive. Things like ‘First name’, ‘Email’ and ‘Your message’ are fine.
• The same goes for instructions, ‘Required fields are in red and have a * symbol’ works great. So does ‘Fill in this form and click ‘Submit’ to get in touch’.

Tips

• Instructions need to take into account how they use sensory characteristics.
• Think about how your use of colour affects things like required fields if you want to highlight them by colour. Don’t highlight by colour alone, pick a symbol too.
• Consider error identification as well, and make sure that you give helpful instructions when your users make mistakes on forms.

Your website has no major code errors

Parsing is the way software like web browsers and assistive technology read and understand a website. It’s important that the different technologies your users use to view your website don’t have trouble parsing your website. Parsing is all about your website’s code.

All your users will benefit from a website built on clean and modern HTML. Your website will work properly in all web browsers and on all kinds of devices, from computers to tablets to smartphones.

Your users who rely on assistive technology will benefit from a well-made website as the technology often relies on HTML parsing. Bad or broken HTML is more likely to cause parsing problems for assistive technology and so increase the chance of users leaving your website.

What to do

This is a wide-ranging guideline, one that changes with time as standards evolve. Your best protection is hiring a web designer who knows parsing well. Find one through recommendations and ask them about their approach to web standards and accessibility.

Here are the most common issues to watch out for:

• Ensure HTML elements have complete start ( < > ) and end ( ) tags where needed.
• Nest all HTML elements correctly (for example, list objects within an ordered or unordered list).
• Use unique Ids.
• Check that HTML elements don’t contain duplicate attributes.

Tips

A good – though not foolproof – way to test your website is a HTML validator tool. A validator gives you an idea of how well technology can parse your website. Use it to create a list of priorities.

Build all elements for accessibility

Everything that’s on your website needs to work to defined standards. Where you’re writing code that’s not HTML, it must conform to HTML-like standards. This means that it will work with various assistive technologies.

The key things to consider are advertising widgets, forms from third parties, things you’ve coded yourself and anything that you add that you can’t be sure how it was coded.

What to do

• Use HTML specifications for any script you author for your website.
• If you use a plugin or other element authored by a third party, make sure it uses valid HTML markup.

Tips

• A good – though not foolproof – way to test your website is a HTML validator tool. A validator gives you an idea of how well technology can parse your website. Use it to create a list of priorities.
• The majority of your potential issues will come from third-party code.
• Speak to the developers of any plugins you use and make sure that they’re writing good code.
• Make sure that everything on your website parses correctly.
• Pay close attention to things like names and labels.

Live videos have captions

Your users sometimes rely on captions to enjoy your video content. Adding captions to live videos helps people use your website when you’re streaming live video.

What to do

Use a content management system that allows captions to be added live and probably a professional subtitler to do it for you.

Tips

Live video is mainly used by large broadcasting companies, but you might want to provide a live stream of a seminar for people who can’t physically attend, or perhaps you’re working for a University and need to put graduation ceremonies online.

Exceptions

If the video is an alternative for text.

Users have access to audio description for video content

Some of your users will rely on audio description to help with videos. Adding audio description to your videos means these users have the same information as everyone else.

What to do

Make an alternative version of your video with an audio description soundtrack and link to it from near the original content.

Tips

If you have provided audio description for videos to meet Guideline 1.2.3, you have already fulfilled this guideline.

Your audio description version must include everything that might be lost to a visually impaired user – things like:

• Relevant exposition (location, gestures, lighting, colours).
• Identifying new speakers.
• Marking the passing of time.

This is by no means an exhaustive list. The key is to think about what information the video provides and ensure a user with a visual impairment gets the same information.

Remember to use clear words, use the present tense and keep in sync with the video.

Exceptions

You don’t need an audio description if all of the information in the video is provided in the regular soundtrack. Something like a straight face-to-face interview, or a speech to-camera would probably not need audio description.

Contrast ratio between your text and background is at least 4.5:1

All of your users will benefit from a good contrast between the text on your website and the background colour. Some of your users with visual impairments need a stronger contrast than others, so getting your colours right is essential.

What do to

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 WebAim’s colour contrast checker to verify your choice.

Tips

• Picking a contrast of at least 7:1 will also fulfil Guideline 1.4.6.
• 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 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 Guideline 1.4.5).

Exceptions

• Text that is 18 points or larger (or 14 points or larger, if bold) must have a contrast of at least 3:1.
• If the text is purely decorative.
• If the text 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.

Text can be resized to 200% without loss of content or function

Some of your users with visual impairments will need to resize text in order to understand it fully. You should allow for up to a 200% resize of text without dropping any content or functions.

What to do

As all modern browsers allow for resizing text, 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 text (by CSS) based on three or four predetermined options, including 200%.

Tips

• Resizing text is different to zooming (which enlarges text, images and layout without preserving formatting).
• Check your website by resizing to 200% in a variety of browsers.
• Make sure your resized text doesn’t require the user to scroll horizontally and you fulfil part of Guideline 1.4.8.

Exceptions

• Images of text (but don’t use images of text, because they don’t resize well).
• Captions.

Don’t use images of text

Some of your users will visit your website using a text-only browser, or might have images turned off in a regular browser. Images of text cause problems, as they are harder for those users to understand.

Images of text also cause problems for your users if they like to resize websites to read them more clearly because images do not work well this way. They also add to the time it takes your website to load, another key reason users will leave your website.

What to do

• Do not use an image of text when you can use plain text.
• Display quotes as text rather than images.
• Use CSS to style headings.
• Use CSS to style navigation menus as text.

Tips

Images of text are subject to guidelines on colour contrast. See Guideline 1.4.3 and Guideline 1.4.6.

Exceptions

• Brand logos.
• 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 design the website. However, this exception is removed in Level AAA Guideline 1.4.9.
• Purely decorative text.

Offer several ways to find pages on your website

All of your users benefit from a website designed with them in mind. They need a variety of ways to navigate to the pages they want to visit. Some of your users will have difficulty understanding your website, so will benefit even more from clear navigation and different ways to access your pages.

What to do

Provide multiple ways for users to find your website’s pages by:

• Adding an HTML sitemap page (which links to every page on your website) and link to it after the ‘Skip to Content’ link from Guideline 2.4.1; and
• Including a search function on every page (by adding it to the header); and
• Providing a clear and consistent main navigation menu.

Tips

• A good HTML sitemap will depend on the structure of your website. Design your sitemap so that it best reflects the structure of your website pages and contains all your pages.
• A ‘related pages’ section (which shows links to similar pages on your website) is a good way of helping users navigate around your website.

Exceptions

• You don’t need to provide multiple ways to access pages that users only reach after a certain process (for example, a receipt or confirmation page).
• If your website only has a handful of pages, one clear navigation menu may suffice.

Use clear headings and labels

A well-written page is always broken up with clear and descriptive headings. They make it easier for your users to scan and find the section they are interested in. Headings also break up large sections of text so that your content isn’t overwhelming to read.

Some of your users benefit further from pages with semantic headings and labels. Headings particularly help people with visual impairments, who often skip between headings when using a screen reader.

Labelling elements on a page will also help these users understand where they are. Elements introduced with HTML5, such as ‘header’, ‘footer’ and ‘aside’, will make that even easier to do.

What to do

• Use informative headings and subheadings where appropriate (a change in topic or purpose) to aid navigation through your content.
• Label all elements (for example, sidebar widgets, forms, search boxes, tables).

Tips

• A single letter of the alphabet can be a good heading (for example, in an alphabetical index).
• If you regularly produce similar content, keep headings consistent (for example, a website about film reviews might have ‘Plot’, ‘Characters’ and ‘Verdict’ on each individual page).
• Headings in HTML range from H1 (the most important) to H6 (the least important). It’s best to reserve Heading1 (H1) on a web page for the title of that page.
• Headings don’t need to decrease from 1 to 6 on every page. While you don’t need to use all of the headings, they should still be sequential. For example, avoid skips from H2 to H4.

Ensure keyboard focus is visible and clear

Your users need to find their way around your website in a sequential and meaningful order. If they use a keyboard to navigate your website, they should be able to see which element they are on at any time.

The best way to do this is to style a visible border or outline around the element in use, whether it’s a form field, link, menu, content area or any other element. This makes it easier for your users to understand where they are on a page.

What to do

• Make the keyboard focus visible on all elements (menu items, form fields, links, etc…).
• Use CSS to apply a visual aid to keyboard focus – a border and/or underline is best.

Tips

A good HTML and CSS website will often already conform to this guideline. Check yours to be sure.

Tell users when the language on a page changes

If your website has content in a different language to its main language, you should tell your users about the change. This helps those who use assistive technology to read the full content.

What to do

• Set your website’s main language by meta tag (see Guideline 3.1.1).
• Add a language attribute to content that is not in the main language.

Tips

• HTML language codes match the ISO language codes standard.
• If you have an alternative language version or translation of some content, link to it with the name of the language in that language (for example, ‘Francais’, ‘Deutsch’) and add a language tag to the link.

Exceptions

If you are using a single word that has become part of the main language (for example, ‘rendezvous’ is used in English but is of French origin).

Use menus in the same place across your website

When you visit a website these days, it’s almost second nature to understand where the main menu is and to expect it to be in the same place on every page. Web designers know that having a consistent navigation menu helps users move around websites.

Consistent navigation helps users who may have trouble moving around a website and find themselves ‘lost’ more often than others. Your users who rely on spatial navigation, due to impaired sight, or need extra help understanding your website will thank you.

This consistency also applies to standard parts of your website – things like your search box. Don’t move them all over the place, use a consistent template for key elements.

What to do

• Keep navigation menus in the same location on all pages; and
• Present the options in navigation menus in the same order on all pages; and
• Keep all other standard elements (for example, your search box) in the same location on all pages.

Tips

Using a standard template for your website will help you meet this guideline.

Icons and buttons are consistently identifiable

It should be obvious that using consistent identification across your website helps your users move around, interact and do what it is you want them to do. Sadly, it’s often overlooked and buttons, icons or links with the same function look completely different.

Users with screen readers and screen magnifiers benefit even further from consistent identification. They often use familiarity as a means of understanding and selecting functions. Therefore, elements with the same function should be labelled and appear consistent across your website. This includes visually hidden labels for screen readers.

What to do

Ensure that:

• Any icons used are consistent (for example, ‘Print page’ or Twitter link); and
• Elements with the same function are labelled and named consistently; or
• Elements with the same function have a consistent text alternative.

Tips

• Consistent is not the same as identical (for example, an arrow icon might link to the next page in a series, but depending on the page the text alternative would be ‘Go to page X’).
• An image can have different meanings in different contexts, so require different text alternatives to pass this guideline. For example, a tick icon or check mark can mean both ‘fishing line included with purchase’ and ‘registration form filled in successfully’).

Suggest fixes when users make errors

All of your users make mistakes – they’re only human after all. When they make mistakes on your website (whether it’s their fault or not), they get frustrated.

Fortunately, it’s also a great time to demonstrate to your users how much you care about them. Show suggestions and hints when users make mistakes on things like forms and checkouts.

What to do

To pass this guideline, you need to make sure that:

• Your forms identify input errors.
• When the error is missing a required field, communicate this to the user with a text suggestion.
• If the error is in the format of the input, the suggestion shows the correct format (for example, ‘The date must be in the form DD/MM/YYYY’).
• If the error is because the input needed to be from a limited list of values, provide these values and explain them.

Tips

• This guideline builds on Guideline 3.3.1, by adding a requirement to make a suggestion for user input to fix errors.
• Be specific.
• If a user makes an error, provide a list of links that the user can follow to jump back to correct their input.
• Make it easy to re-submit incorrect forms by retaining all correct data.

Exceptions

You don’t need to provide suggestions if:

• Making a suggestion would negatively impact data security.
• Making a suggestion goes against the purpose of the field.

Reduce the risk of input errors for sensitive data

All users make mistakes when inputting data (for example, into forms and checkouts). You should try to prevent errors occurring, especially when users are committing to legal or financial agreements, or otherwise sharing their data.

Users can make costly mistakes if they don’t fully understand the implications of their actions or can’t rectify their errors. Error prevention is all about reducing risk to your users by adding in confirmation stages to processes that pose a legal or financial risk.

What to do

To pass this guideline, you need to make sure that:

• Legal commitments, financial transactions, test responses and changes to user controlled data are reversible; or
• Legal commitments, financial transactions, test responses and changes to user controlled data are checked for input errors and the user is given a chance to correct any mistakes; or
• Add a confirmation page to the data input submission process that summarises the input and the outcome, with an option to correct or discontinue. This page has an input field (for example, a confirm button or checkbox) that acts as confirmation of the submission.

Tips

• Guideline 3.3.6 widens this guideline to include all types of data transfer, not just these high-cost transactions.
• This guideline applies to deletion of data as well as submission.
• Legal commitments are transactions where the user incurs a legally binding obligation or benefit.
• User controlled data means things like name and address fields for a user’s account.
• Provide a confirmation webpage that gives the user a chance to read a summary of everything they have input and positively confirm their actions (especially if inputs were spread over several pages in the process).
• Validate forms inline and add an error message if input is incorrect. Be specific in explaining how to fix mistakes.