Break up content with headings

Adding section headings to all content will help your users understand your website. They are useful for users who have difficulty focusing or remembering where they are on a page, as well as users with a visual impairment, who may navigate by skipping between headings.

You can help these users, and everyone else, by ensuring that all content on your website is broken up by clear and informative headings.

What to do

Add a heading for every new thought or topic in your content (for example, a travel article may have headings to indicate the distinct sections on dining, transportation, and lodging).

Tips

  • The W3C define a section as a self-contained portion of written content that deals with one or more related topics or thoughts. See ‘Understanding WCAG 2.0’
  • A section may consist of one or more paragraphs and include graphics, tables, lists and sub-sections.
  • Beware of making your content harder to read by forcing in too many headings.

Exceptions

A webpage can be single block of content with only one header if it is about one thought or topic.

See also

Every link’s purpose is clear from its text

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 alone (the words that are linked, often called ‘anchor text’) must make the link destination clear.

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; or
  • If the link is an image, the alt text of the image makes the link purpose clear.

Tips

  • This Guideline builds on Guideline 2.4.4 by focusing only on the link text and removing some exceptions.
  • Ensure that links with the same destination have the same description (but links don’t share a description if they point to different places).
  • ‘Click here’ and ‘Read more’ links fail this guideline.
  • Avoid using the title attribute (which was an exception in Guideline 2.4.4) as is not sufficient to pass this guideline.

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.

See also

 

 

 

Let users know where they are on your website

Some of your users will have problems understanding the structure of your website. They can get lost, especially during interactions like checkouts that take place over a few pages. You can help your users by making it clear where they are on your website.

This might be as simple as adding breadcrumbs and a sitemap to your website.

What to do

  • Use breadcrumbs to help with navigation. Show the sequence a user is following and where they are in that sequence. For example: You are here: Home > Fish > Bass; and
  • Add a sitemap page to your website (see Guideline 2.4.5) so your users have another way of finding what they want. Add a link to the sitemap somewhere prominent like the header.

Tips

  • Use full page titles for breadcrumbs when they are 1-3 words long (otherwise they get too long to be displayed).
  • Abbreviate longer titles to make them easier to read (for example, ‘A Guide To Exotic Fish’ could just as well be ‘Exotic Fish’ for the purpose of a breadcrumb).
  • For a process that takes a few pages (like a shopping cart), show all the steps in the process and highlight where the user is.
  • If a page has a too many breadcrumbs, perhaps your website could be better organised.
  • Use your page titles in your sitemap, organised under subheadings.

See also

No content flashes more than three times per second

To make websites 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 a second.

Tips

  • This builds on Guideline 2.3.1 by removing an exception that I recommend you ignore anyway.
  • Remember, flashing is different to blinking (see Guideline 2.2.2).

See also

Save user data when re-authenticating

It may be essential for your users to re-authenticate their identity for certain functions. For example, you might set a login to expire after a certain amount of time in case a user leaves their computer unattended in the middle of a purchase.

While your website will rightly use this function for your users’ security, you can help your users by saving all information entered by the user. When they re-authenticate (such as logging back in) you can display whatever data they had already entered.

What to do

  • When you ask a user to re-authenticate their identity, the user can continue exactly as before with saved data (for example, their shopping basket contents, input into forms or accessibility options).
  • Things like surveys and questionnaires can be saved and completed at a later date.

Tips

If you do ask your users to re-authenticate after a certain amount of time, consider whether your use of a time limit is justified under Guideline 2.2.1 and Guideline 2.2.3.

See also

Don’t interrupt your users

Some of your users will have difficulty maintaining their focus and attention; interrupting their experience may impact their understanding of your content. You can avoid this by eliminating interruptions.

What to do

  • Don’t use an automatic redirect or refresh function based on a time delay (for example, if a webpage has moved, do not redirect users to the new page after a certain amount of time).
  • Provide an option for turning off all but ‘essential’ interruptions (see below).

Tips

The best thing you can do is eliminate all interruptions by default. Allow your users to interact with webpages naturally and don’t try to surprise or manipulate them. If you can’t capture your users’ interest without a pop-up, you have bigger problems than Level AAA.

If you must use a pop-up, make sure that keyboard focus is on the window-closing ‘X’ icon in the corner that closes the pop-up. This means keyboard users can close the new window. When they do close it, return focus to the place on the page they were at before the pop-up appeared.

Exceptions

Warnings about a user’s health, safety or the security of their data or property as they are considered ‘essential’ (I’m not sure how a website would know if your house was about to explode, but let’s not ban it from trying to tell you!).

See also

 

No time limits on your website

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

This guideline builds on Guideline 2.2.1. That guideline (at the lower Level A standard of compliance) requires you to offer users a chance to turn off or extend time limits. At Level AAA, this guideline requires that you do not set time limits at all (with two exceptions below).

Exceptions

You can set a time limit if:

  • The time limit is due to real-time events, like bidding in an auction.
  • Your content is a live video stream.

See also

Your website is accessible by keyboard only, without exception

Your users have varying degrees of motor skills and may use your website with only their keyboard. Users with motor impairment, including many elderly users, need help to navigate your website.

All parts of your website must be accessible by keyboard only. That means, without a mouse or pointing device, your forms, menus, shopping cart and everything between. On top of that, you cannot require specific timings for keystrokes to access any feature.

What to do

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

Tips

  • Unlike the lower-level Guideline 2.1.1, there are no exceptions here. All aspects of your website must be accessible by keyboard. It’s up to you to decide if Level AAA conformance is worth you removing any mouse-only features.
  • 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 (for example, ‘ double tap on enter within two seconds’ to submit).
  • Don’t use ‘access keys’ (assigning a navigation link to a particular key) or page-specific key commands as they can conflict with assistive technology.
  • Be wary of third-party adverts and widgets, often these are not accessible.

See also

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.

See also

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.

See also