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

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

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.

See also

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.

See also

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.

See also

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.

See also

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