Understanding WCAG SC 3.2.4 Consistent Identification
3.2.4 Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently. (Level AA)
Consistent Identification Transcript
Hello everyone, today we’re going to talk about consistent identification. We will also discuss its importance, the benefits for various users, some examples, and how we can address issues.Now, let’s understand the importance of labeling functional components. When functional components such as links, icons, and buttons are repeated on more than one page and serve the same function, they must be labeled consistently. Consistency here does not mean identical labeling, but rather ensuring that the labeling is uniform and accurately reflects the specific function of the component on each page.
For example, a site has a button with a print icon on one page that prints the receipt, and on another, it prints the invoice. The consistent labeling would be “Print Receipt” and “Print Invoice,” respectively. This pattern must be uniform across the site.
But why is it crucial to label all functional components? Let’s see who benefits from this. It helps users with limited or no vision who use a screen reader to navigate the site. This consistency makes it easier for users to learn and operate the site. Inconsistent labeling can create confusion and cognitive overload, making it challenging for users to operate the site effectively.
Let’s look at an example of good labeling practice. To enable users to download files, a document icon is placed across the site. In this case, the document icon has alt text like “Download Honda Accord 2022 Owner’s Manual.pdf” that combines the download function with a short title of the document, making it easier for users to understand the purpose of the icon.
Now, let’s understand why inconsistent labeling is a bad practice. One of the failure scenarios is when a search button with a lens icon is located at the top of all web pages on a site, enabling users to search the entire site. However, the label of the icon is inconsistent on sub-pages, showing “Search Site,” while on others, it says “Find What You Want.” Such inconsistencies can cause confusion for users and undermine the usability of the site.
Now let’s explore some ways to fix these concerns. When using components with the same function, it is essential to ensure consistency in labeling across all the pages of the site or app. Additionally, when icons and links are placed next to each other but perform the same function, like downloading or saving, the best practice is to wrap the icon and the link and label them consistently.
In conclusion, consistent labeling of functional components on websites and apps is crucial for accessibility and usability. Following good practices ensures that users can easily locate and operate the website, leading to a more positive user experience.
This is the end of the video. Thank you for joining. If you like the video, do like and subscribe.
The guideline requires that functional components (elements) that appear repeatedly in a set of web pages must have the same name/label. This helps Assistive aid users who heavily rely on these functional elements for quick navigation & understanding the purpose of a particular widget.
For example, if the “search button ” is labelled as either “find or go” in a web page while it is being labelled as “search” on all other pages, then it fails this checkpoint. This checkpoint applies to non-text content, icons and images that appear repeatedly & serve as labels too. In these cases, the alternative text for such labels must be consistent.
Besides being useful to assistive aid users, providing consistent visual non-textual labels for the repeated components reduces the cognitive load of users with cognitive disabilities who learn the repetitive functions of such components. For them, relearning every time when introducing new labels or alternative texts would be difficult.
Hi Satish , am looking your blogs it’s very good to understand wcag 2.0 , can you please explain about wcag 2.1 as well
Hi Pavan,
Sure, we will be finishing WCAG 2.0 soon & will work on articles for WCAG 2.1
Hi Satish,
Let take an Example:
About Us
We are a company that specializes in creating web applications.
Is this is issue of 3.2.4 Consistent identification?
My answer is: yes, this is an issue of 3.2.1 consistent identification.
To meet the success criterion, the link text for both the heading and the content should be consistent.
To make the link text consistent, we could modify the code to use the same text for both the heading and the content links. For example:
About Us
About Us – We are a company that specializes in creating web applications.
In this modified code, the link text for both the heading and the content links is “About Us”, which makes the link text consistent.
What’s your thoughts on this?
Looping back to my query.
Hi Prashant,
No, this is not a failure of consistent identification. If you read this line in the article – “The guideline requires that functional components (elements) that appear repeatedly in a set of web pages must have the same name/label.” – you will understand that it applies more to component-level elements rather than a link that appears on only one web page.
I hope this helps! Let me know if you have any further questions.
Thank you, Satish, for your suggestion.
I have a question here as there is an example 6 provided in W3C, which said to meet the Success Criterion, the link text for two links having the same destination need only be consistent.
Example 6: Icon and adjacent link to the same destination
An icon with alt text and a link are next to each other and go to the same location. The best practice would be to group them into one link as per H2: Combining adjacent image and text links for the same resource. However, if they are visually positioned one above the other but separated in the source, this may not be possible. To meet the Success Criterion, the link text for these two links need only be consistent, not identical. But the best practice is to have the identical text so that when users encounter the second one, it is clear that it goes to the same place as the first.
Reference link: https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html
Could you explain this, please?
Thanks
Hi Prashant,
please remember that the normative part of the WCAG is binding, while the techniques are merely informative. In the example you are referring to, if the same link and icon are repeated across pages, they must be consistently identified.
On the same page, you cannot have links with the same link text going to different pages. As mentioned, the link text does not have to be exactly the same but close enough to provide context if they are going to same page.
I hope this helps!