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.

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.

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

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.

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.

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.

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.

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.

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

See also

Understanding Success Criterion 1.4.2 (W3C)

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.

See also

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 colour in your instructions, you can work towards Guideline 1.4.1.

See also

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.

See also