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.

See also

‘Link Purpose (In Context)’ requires that every link’s purpose is clear from its text or context.

Introduction

It’s essential that you make your links clear and easy to understand, ideally from just the link text itself.
That’s because 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 or tab through links, 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.

How to Pass ‘Link Purpose (In Context)’

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

Exceptions

You don’t need to make the link purpose clear if the purpose is ambiguous to all  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.

‘Link Purpose (In Context)’ Tips

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, Link Purpose (Link Only) requires you to make links accessible using only the link text.

Where you link to another page on your website, it’s good practice to use the page title you set in Page Titled as the link text.

See Also

‘Focus Order’ requires that components receive focus in a logical sequence.

Introduction

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 users access components on your website. Users with keyboard-only navigation or screen readers will follow the focus order you have set, so it’s essential your focus order preserves meaning and usability. 

How to Pass ‘Focus Order’

Ensure the focus order of each web page follows a sequence that preserves the meaning and functionality of the page.

Exceptions

  • Complex items like tree diagrams do not have to be exactly programmed to a specific order if 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.

‘Focus Order’ Tips

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.

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

See Also

‘Page Titled’ means using helpful and clear… page titles.

Introduction

All users benefit from descriptive page titles. A good title tells your users which page they are on and what that page is for. This lets users quickly understand if they are on the right page.

Users with visual, cognitive and mobility impairments further benefit as the technology they use can more heavily rely on page titles.

How to Pass ‘Page Titled’

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

‘Page Titled’ Tips

A useful format for writing page titles is: ‘Page name – Page description – Website name’ ( ‘About Us – Learn our Secrets – ACME Corp’).

If pages are part of a process, such as a checkout, use the title to tell the user what stage they’re at (‘Checkout – Page 1 of 5 – ACME Corp’).

Don’t forget dynamic pages such as search results (‘Search Results for XXXX’) and 404 errors (Sorry, we can’t find that page).

In many cases, it makes sense to repeat the page title or a variation of it as the top heading on your page.

Type 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 Multiple Ways and Location) to make it more accessible.

See also

‘Bypass Blocks’ requires you to provide a way for users to skip repeated blocks of content.

Introduction

Websites often have the same, or very similar, content at the top of each page (for example the navigation menu, header and certain graphics). Some users with visual, motor or cognitive impairments who navigate sequentially through elements can struggle to get past this repetitive content.

For example:

  • screen readers often announce all of the elements on the page to the user in order;
  • users who navigate by keyboard might have to key past each link in a menu; and
  • users who browse with a lot of zoom can get lost on a page.

To help these users navigate your website, provide a way for them to bypass the repetitive parts of each page.

How to Pass ‘Bypass Blocks’

  • Add a visible ‘Skip to Content’ link to all pages on your website that sends users to the start of the main content on each page; or
  • Add a link at the start of any repeated content to skip it; or
  • Add links at the start of a page to each area of content.

‘Bypass Blocks’ Tips

While a ‘Skip to Content’ link will pass this guideline, there is a little more you can do. A standard in HTML5 allows you to label your navigation menu as a <nav> element. Some screen readers can use the <nav> element and provide a way for users to skip menus. 

See Also

‘Three flashes or below threshold’ requires that no content flashes more than three times per second.

Introduction

Flashing content on a website can cause difficulties for users with photosensitive seizure disorders such as epilepsy. Flashing content can cause these users to suffer a seizure.

How to Pass ‘Three Flashes or Below Threshold’

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

Exceptions

There’s one exception to this guideline based on the size of the flashing content, but I recommend you ignore it and just don’t let anything flash more than three times per second.

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

Understating Success Criterion 2.3.1

If you can understand that you’re smarter than me!

‘Three Flashes or Below Threshold’ Tips

Remember, flashing is different to blinking (see Pause, Stop, Hide). Blinking can distract users but doesn’t cause seizures. 

If blinking content occurs three times per second, it is considered flashing content.

The exception is removed at Level AAA in Three Flashes.

See Also

Provide user controls to pause, stop and hide moving and auto-updating content.

Introduction

Moving or auto-updating content on a website can cause difficulties for users with visual or cognitive impairments. These users may not be able to perceive the information before it changes or may be distracted by the movement.

Alongside avoiding moving content, you can help users by providing them with simple controls.

How to Pass ‘Pause, Stop, Hide’

  • Ensure moving, blinking or scrolling content has a control to pause, stop or hide it.
  • Ensure auto-updating content has a control to pause, stop, hide or control the frequency of updates.

Exceptions

  • The moving, blinking, scrolling or auto-updating content starts only by user request.
  • The moving, blinking, scrolling or auto-updating content is not presented in parallel with other content (for example, a full-page advert displayed before users reach your webpage).
  • The moving, blinking or scrolling content lasts less than five seconds.
  • The movement is essential (for example, an animation that shows users that something is loading, if it would otherwise look like your website was frozen).

‘Pause, Stop, Hide’ Tips

When a user pauses and unpauses content, let them continue where they left off if the content is pre-set but take them to the current display if the content is real-time.

A rough guide is that “blinking” content pulses less than three times per second.  Anything that pulses faster is “flashing” content and has its own rules (see Three Flashes or Below and Three Flashes). The distinction falls on the line between what may cause a seizure in a user (flashing) and what is more of a distraction than a hazard (blinking).

My advice is to remove anything that blinks or flashes and never auto-play content – that way you pass without having to build all the controls or time it to five seconds.

See Also

Timing Adjustable’ requires that you provide user controls to turn off, adjust or extend time limits.

Introduction

Users with visual, motor or cognitive impairments may need more time than others to understand and use your website. Any time controls or limits can make using your website difficult for these users.

How to Pass ‘Timing Adjustable’

If content on your website uses a time limit:

  • Give users an option to turn off the time limit before it begins (for example, a landing page before the time-limited page can display a message that shows users what to do); or
  • Give 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 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 is automatically updated (for example, with the latest football scores), you must allow users to delay the frequency of the updates by at least ten times the default setting.

Exceptions

  • The time limit is due to real-time events, like bidding in an auction or a livestream

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

‘Timing Adjustable’ Tips

Take as much content outside of time limits as possible but consider your users’ security. For example, logging out of an account after a period of inactivity is a positive use of a time limit.

Make sure any user controls you provide are keyboard accessible.

The exceptions of the time limit being essential or over 20 hours are both removed at Level AAA in No Timing

If you use a pop-up to give your users the option to extend a time limit, consider Interruptions.

See Also

‘No Keyboard Trap’ ensures users can navigate to and from all content using a keyboard.

Introduction

Users with visual or motor impairments may choose to access your website with only their keyboard. Users must be able to navigate to and away from all content and functionality on your website using a keyboard. 

How to Pass ‘No Keyboard Trap’

All elements on your website can be navigated to and away from by keyboard only using the ‘tab’ or arrow keys.

‘No Keyboard Trap’ Tips

To test for this guideline, unplug your mouse and make sure you can fully use your website with only your keyboard.

It’s tempting to use non-standard navigation with an explanation of what to do, but this isn’t worth your time. Stick to the ‘tab’ and arrow keys that most users are familiar with.

See Also

All functionality is accessible by keyboard with no specific timings.

Introduction

Users with visual or motor impairment may navigate your website using only their keyboard or through assistive technology that relies on a keyboard-like interaction with your website.

How to Pass ‘Keyboard’

  • Ensure users can access all elements of your website using only a keyboard
  • Ensure there are no specific timings needed for keystrokes, for example holding down ‘Enter’ for three seconds to submit a form

Exceptions

Functions that require a mouse pointer for input, for example free drawing tools and some types of games. 

‘Keyboard’ Tips

To test for this guideline, unplug your mouse and make sure you can fully use your website with only your keyboard – you might be surprised by what you can’t do.

Make sure no function on your website requires timed keystrokes (for example, ‘double tap on enter within two seconds’).

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.

At Level AAA, 2.1.3 – Keyboard (No Exception) removes the exception.

See also