Guideline 3.2: Be careful with re-invent the navigation standards

On Principle 3: Understandable

Make Web pages appear and operate in predictable ways.

If a page is continuously refreshing, changing contents and context, opening new windows without user control, may confuse users with and without dissabilities. Being consistent and coherent with the layouts and will allow everybody access the information.

Additional, Advisory Techniques

  • Use and place (well) labels to maximize predictability of relationships

Criterion 3.2.1 On Focus

When any component receives focus, it does not initiate a change of context

How to. Mandatory techniques

  • Use “activate” rather than “focus” as a trigger for changes of context. Note we are talking about change of context, not about change of content

Additional, Advisory Techniques

  • Don’t cause persistent changes of state or value when a component receives focus, or provide an alternate means to reset any changes
  • Open new windows only when best from an accessibility perspective
  • Give users advanced warning when opening a new window.

Common Failures

  • Opening a new window as soon as a new page is loaded
  • Using script to remove focus when focus is received

Criterion 3.2.2 On Input

Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.

How to. Mandatory techniques

  • Provide a submit button to initiate a change of context using a technology-specific technique like a submit button or a button with a select element to perform an action
  • Describe what will happen before a change to a form control that causes a change of context to occur is made

Additional, Advisory Techniques

  • Give users advanced warning when opening a new window

Common Failures

  • Automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value
  • Launching a new window without prior warning when the status of a radio button, check box or select list is changed
  • Providing instruction material about the change of context by change of setting in a user interface element at a location that users may bypass

Criterion 3.2.3 Consistent navigation

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

How to. Mandatory techniques

  • Present repeated components in the same relative order each time they appear

Additional, Advisory Techniques

  • Use templates to ensure consistency across multiple Web pages
  • Create layout, positioning, layering, and alignment

Common Failures

  • Presenting navigation links in a different relative order on different pages

Criterion 3.2.4 Consistent Identification:

Components that have the same functionality within a set of Web pages are identified consistently.

How to. Mandatory techniques

Please note that “Consistent” is not the same as “identical”.

Additional, Advisory Techniques

  • Ensuring that the text alternative conveys the function of the component and what will happen when the user activates it
  • Use the same non-text content for a given function whenever possible

Common Failures

  • Using two different labels for the same function on different Web pages within a set of Web pages

Criterion 3.2.5 Change on Request

Changes of context are initiated only by user request or a mechanism is available to turn off such changes.

How to. Mandatory techniques

Choose the situation

  • If the Web page allows automatic updates, provide a mechanism to request an update of the content instead of updating automatically
  • If automatic redirects are possible, do it with the server side instead of on the client side; or use an instant client-side redirect using meta refresh to create an instant client-side redirect
  • If the Web page uses pop-up windows, include pop-up windows using the target attribute to open a new window on user request and indicating this in link text; or using progressive enhancement to open new windows on user request
  • If using an onchange event on a select element

Additional, Advisory Techniques

  • Open new windows by providing normal hyperlinks without the target attribute, because many user agents allow users to open links in another window or tab.
  • Open new windows only when best from an accessibility perspective

Common Failures

  • Launching a new window when a user enters text into an input field
  • Completing change of main content through an automatic update that the user cannot disable from within the content
  • Changing the context when the user removes focus from a form element
  • Opening windows that are not requested by the user
  • Using meta refresh with a time-out

More info

Link Summary

« Previous article
Next article »