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.

See also

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.


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


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.

See also

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


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.


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.

See also

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.


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


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.

See also

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.


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

See also

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.

See also

That’s all there is to Guideline 2.1.1 – Keyboard! Is there anything you’d like to add or any questions you have about keyboard accessibility? Leave a comment below and I’ll be sure to respond.

Don’t play audio automatically.


Automatically playing sounds can distract and disorientate users, especially those with cognitive impairments.

How to Pass

Don’t have any audio that plays automatically.


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.


Don’t be afraid to use audio! It can be great on a website, just let users choose when to play it.

See Also

Understanding Success Criterion 1.4.2 (W3C)

Don’t use presentation that relies solely on colour.


Users with visual impairments may need help when you use colour on your website. 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


Check for colour issues by printing samples from 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.

See Also

Use more than one sense for instructions.


“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 your website are things like shapes, sounds, positioning 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. The solution is to use more than one indicator for instructions.

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 more than one sense for instructions
  • Avoid instructions that rely on sound


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:

  1. ‘Use the search box’
  2. ‘Use the search box on the right’
  3. ‘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 colour, shape, labelling and positioning 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.

See Also

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

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

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


Invest in some assistive technology and use it to browse your website.

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

See Also