Tag: Navigable

Focus Order (2.4.3 – Level A)

Posted on January 21, 2013| By | In Beginner (Level A)

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

This is the sequence in which users access components on your website. Users with keyboard-only navigation or screen readers will follow the order you have set, so it’s essential your chosen 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 an 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 order.

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

See Also

Page Titled (2.4.2 – Level A)

Posted on January 14, 2013| By | In Beginner (Level A)

‘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 (2.4.1 – Level A)

Posted on January 07, 2013| By | In Beginner (Level A)

‘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