Predictable 3.2
Consistent Identification 3.2.4
Examples
- A printer icon allows the user to print receipts and invoices. In one part of the application, the printer icon is labeled "Print receipt" and is used to print receipts, while in another part it is labeled "Print invoice" and is used to print invoices. The labeling is consistent ("Print x"), but the labels are different to reflect the different functions of the icons. Therefore, this example does not fail the Success Criterion.
- A document icon is used to indicate document download throughout a site. The text alternative for the icon always begins with the word “Download," followed by a shortened form of the document title. Using different text alternatives to identify document names for different documents is a consistent use of text alternatives.
- A check mark icon functions as "approved", on one page but as "included" on another. Since they serve different functions, they have different text alternatives.
Acceptance Criteria
- Use labels, names, and text alternatives consistently for content that has the same functionality AND following the sufficient techniques for Success Criterion 1.1.1 and sufficient techniques for Success Criterion 4.1.2 for providing labels, names, and text alternatives
- Ensure 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
Notes
Components that have the same functionality within a set of Web pages are identified consistently.
Text alternatives that are "consistent" are not always "identical
For instance, you may have an graphical arrow at the bottom of a Web page that links to the next Web page. The text alternative may say " Go to page 4." Naturally, it would not be appropriate to repeat this exact text alternative on the next Web page. It would be more appropriate to say "Go to page 5" . Although these text alternatives would not be identical, they would be consistent, and therefore would satisfy this Success Criterion.
A single non-text-content-item may be used to serve different functions
In such cases, different text alternatives are necessary and should be used. Examples can be commonly found with the use of icons such as check marks, cross marks, and traffic signs. Their functions can be different depending on the context of the Web page. A check mark icon may function as "approved", "completed", or "included", to name a few, depending on the situation. Using "check mark" as text alternative across all Web pages does not help users understand the function of the icon. Different text alternatives can be used when the same non-text content serves multiple functions.
Acceptance Criteria
- Open new windows and tabs from a link only when necessary.
- Give users advanced warning when opening a new window.
- A page pops up a new window only when the user clicks(or uses spacebar) on a button rather than using onfocus to pop up a new window.
- A submit button is used to move on to the next data entry screen rather than having the next screen appear automatically when the user tabbed onto a 'done' button.
- The objective of this technique is to provide a method for activating things that is predictable by the user. Users with cognitive disabilities and people using screen readers or screen magnifiers may be confused by an unexpected event such as automatic form submission or activation of a function that causes a change of context.
Notes
When any component receives focus, it does not initiate a change of context.
Examples
Useful Link
When user hovers over link, tooltip pops up saying it will open a new window, see below from w3.org: Pop up warning example opens in new window
Form Field for Phone Number
- A form contains fields representing US phone numbers.
- All of the numbers have a three digit area code followed by a three digit prefix and finally a four digit number, and each part of the phone number is entered into a separate field.
- When the user completes the entry of one field the focus automatically moves to the next field of the phone number.
- This behavior of phone fields is described for the user at the beginning of the form.
Acceptance Criteria
- 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.
- Providing a submit button to initiate a change of context using one of the following techniques:
- Providing submit buttons
- Using a button with a select element to perform an action
- Describing what will happen before a change to a form control that causes a change of context to occur is made
- Using an onchange event on a select element without causing a change of context
- Giving users advanced warning when opening a new window
Notes
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.
Selecting elements causes data within dropdown to update accordingly. See example on how to set up. opens in new window
Consistent Navigation 3.2.3
Example
Skip to content link, navigational menu, search bar, etc. -- all items appear in the same spot across all pages.
Acceptance Criteria
- Use templates to ensure consistency across multiple Web pages.
- Create layout, positioning, layering, and alignment.
Notes
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.
Consistent Help 3.2.6
Acceptance Criteria
- If a web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple web pages within a set of web pages, they occur in the same relative order to other page content, unless a change is initiated by the user:
- Human contact details;
- Human contact mechanism;
- Self-help option;
- A fully automated contact mechanism.
- Help mechanisms may be provided directly on the page, or may be provided via a direct link to a different page containing the information.
Notes
Put help in the same place when it is on multiple pages.