Components that have the same functionality within a set of Web pages are identified consistently. (Level AA)
Description
In any website, same functionality repeats in several pages. For example a search functionality if available on one webpage it appears on several other pages of the website. A web page can have multiple links that navigates to same destination. If such functionalities exist on the website, they should be identified with same name, role and value. This allows the screen reader and users with cognitive difficulties to find the component quickly and more efficiently.
Screen reader users heavily rely on short-cut commands on familiar web pages. For example if a print function is a button on a web page, users try to search the button using the short-cut “b†to check for buttons (JAWS and NVDA) in the page. When they hear a print button they can quickly activate using the spacebar or enter key on the keyboard. If the label is changed to something different or if the button is converted to a link, they find difficult to locate it.
If a contact link is provided in the header section that takes the user to the contact us page of a website, the link text should be consistent in all other places where it is provided.
However in certain cases the labels can be slightly changed. Referring the earlier print button example, in one page the functionality could be print ticket and in another page it could be print invoice. The labels for those buttons could be more appropriate if the term print is prefixed with appropriate term. When the user navigates to the button they hear the word print along with the appropriate context.
Points to Remember
- Components having similar Functionalities on several web pages of a website should be consistently identified (Eg: Print function).
- Icons that perform same action on several web pages on the website should have same alternate text (Eg: save icon).
- If the same icon serves entirely different purpose in different web pages the alternate text or label should be different. (Eg: A tick mark represents approved on one page and as completed in another page).
- In certain cases the same action will be performed by the same element but the label should be different to provide context specific information. (Eg: In a series of modules in the first module at the end you can have a button with label module 2 that takes you to second module, in the module two the same button can be labeled as module 3 to serve the context).
- This success criteria refers to labels for different elements such as alternate text for images, labels for form elements, target descriptions for links and actions performed by buttons.
