Skip to content
Merged
Changes from 15 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
a906a4e
Update consistent-identification.html
giacomo-petri Aug 3, 2026
a8f6107
Update consistent-identification.html
giacomo-petri Aug 3, 2026
4c1b675
Merge branch 'main' into giacomo-petri-sc324-understanding-rewrite
patrickhlauke Aug 14, 2026
3cd9728
Update understanding/20/consistent-identification.html
giacomo-petri Aug 19, 2026
25d9050
Update understanding/20/consistent-identification.html
giacomo-petri Aug 19, 2026
0be31e1
Update understanding/20/consistent-identification.html
giacomo-petri Aug 19, 2026
f1995f1
Update understanding/20/consistent-identification.html
giacomo-petri Aug 19, 2026
3471250
Update understanding/20/consistent-identification.html
giacomo-petri Aug 19, 2026
24f3053
Update consistent-identification.html
giacomo-petri Aug 19, 2026
ac21137
Update consistent-identification.html
giacomo-petri Aug 19, 2026
723e767
Update consistent-identification.html
giacomo-petri Aug 19, 2026
5382e40
Merge branch 'main' into giacomo-petri-sc324-understanding-rewrite
patrickhlauke Aug 19, 2026
18c222b
Update understanding/20/consistent-identification.html
giacomo-petri Aug 19, 2026
354aab4
Update understanding/20/consistent-identification.html
giacomo-petri Aug 19, 2026
7440556
Merge branch 'main' into giacomo-petri-sc324-understanding-rewrite
patrickhlauke Aug 21, 2026
34ee4c3
Update understanding/20/consistent-identification.html
patrickhlauke Aug 21, 2026
3ab3721
Update understanding/20/consistent-identification.html
patrickhlauke Aug 21, 2026
2fa782f
Merge branch 'main' into giacomo-petri-sc324-understanding-rewrite
patrickhlauke Sep 6, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 90 additions & 108 deletions understanding/20/consistent-identification.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,129 +6,111 @@
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
</head>
<body>
<h1>Understanding Consistent Identification</h1>

<h1>Understanding Consistent Identification</h1>
<section id="brief">
<h2>In brief</h2>
<dl>
<dt>Goal</dt><dd>Actions are more predictable across pages.</dd>
<dt>What to do</dt><dd>Identify repeating functions consistently.</dd>
<dt>Why it's important</dt><dd>Consistently identified actions are especially important to people with disabilities.</dd>
<dt>Goal</dt><dd>Users can recognize the same functionality when it appears on different web pages.</dd>
<dt>What to do</dt><dd>Identify components that have the same functionality consistently throughout a set of web pages.</dd>
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
<dt>Why it's important</dt><dd>Consistent identification helps users recognize familiar functionality when it appears on
different web pages, making websites easier to learn, navigate, and use.</dd>
</dl>

</section>

</section>
<section id="intent">
<h2>Intent of Consistent Identification</h2>


<p>The intent of this success criterion is to ensure consistent identification of functional
components that appear repeatedly within a set of web pages. A strategy that people
who use screen readers use when operating a website is to rely heavily on their familiarity
with functions that may appear on different web pages. If identical functions have
different labels (or, more generally, a different <a href="https://www.w3.org/TR/accname/#dfn-accessible-name">accessible name</a>)
on different web pages, the site will be considerably more difficult
to use. It may also be confusing and increase the cognitive load for people with cognitive
limitations. Therefore, consistent labeling will help.
</p>

<p>This consistency extends to the text alternatives. If icons or other non-text items
have the same functionality, then their text alternatives should be consistent as
well.
</p>

<p>If there are two components on a web page that both have the same functionality as
a component on another page in a set of web pages, then all 3 must be consistent.
Hence the two on the same page will be consistent.
</p>

<p>While it is desirable and best practice always to be consistent within a single web
page, 3.2.4 Consistent Identification only addresses consistency within a set of
web pages where something is repeated on more than one page in the set.
</p>


<h2>Intent of Consistent Identification</h2>
<p>The intent of this success criterion is to help users recognize components that perform the same functionality whenever they appear within a set of web pages.
Consistent identification allows users to apply knowledge gained from one page when interacting with another,
reducing the effort required to locate and understand familiar functionality.</p>
<p>This success criterion is intended to support the recognition of components that users are likely to encounter repeatedly within a set of web pages,
allowing knowledge gained from previous interactions to be reused.</p>
<p class="note">This success criterion applies to components that are repeated within a set of web pages and provide the same functionality.
It does not require components that provide the same functionality but are not repeated instances of the same component to have the same identification.
For example, a "Contact us" link in a website footer and a "Contact our support team" link within the main content of a policy page may both allow users to contact the organization.
However, users are unlikely to perceive them as recurring instances of the same component and therefore are less likely to rely on previous interactions to recognize them as equivalent.
In contrast, recurring components such as global navigation links, search controls, account controls,
or footer links are encountered repeatedly across a set of web pages and are the types of components for which consistent identification most directly supports user recognition.</p>
<p>Users often rely on consistent identification to predict the purpose of interface components.
For example, people who use screen readers frequently navigate websites by recognizing familiar controls announced by assistive technologies,
Comment thread
patrickhlauke marked this conversation as resolved.
while people with cognitive disabilities may rely on consistent visual identification to recognize functionality without having to relearn it on each page.
When components that perform the same functionality are identified differently,
users may incorrectly assume that they perform different functions or spend additional time determining whether they are equivalent.</p>
<p>Depending on the type of component and the way users interact with it, identification may be conveyed through visible labels, accessible names, text alternatives,
icons, or other means. These are mechanisms by which components may be identified rather than the subject of this success criterion itself.
Comment thread
giacomo-petri marked this conversation as resolved.
No particular identification mechanism is required, provided users can consistently recognize equivalent functionality.
Identification is considered consistent when users can reliably recognize that components perform the same functionality,
even if the specific mechanism used to identify them varies to reflect the context.</p>
<p>Consistent identification does not require <em>identical</em> labels, names, or text alternatives.
In many cases, using the same identification for components with the same functionality helps users recognize familiar functionality more easily and is encouraged.
However, differences may be appropriate when they better reflect the component's purpose or context,
given that users can still recognize that the components perform the same functionality. For example, in a sequence of pages,
a navigation link identified as "Page 4" on one page may appropriately be identified as "Previous page" when viewed from page 5.
Although the labels are different, users can still recognize that both components provide the same navigation functionality,
even though their labels differ to reflect the current context.</p>
<p>Repeated components with the same functionality may appear on different pages, multiple times on the same page, or in both situations within a set of web pages.
Wherever they appear within the set, consistent identification helps users recognize equivalent functionality and apply knowledge gained from previous interactions.</p>
<p class="note">Although consistent identification may also benefit users when applied to non-functional content, this success criterion only applies to <em>functional</em> components.
Consistently identifying non-functional content is encouraged as a design best practice, but is not required for conformance to this success criterion.</p>
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
<p class="note">This success criterion only applies to components that have the same functionality.
Components that perform different functions or produce different results are not expected to be identified consistently,
even if they appear visually similar or use similar labels or icons. Conversely, components that have the same functionality are expected to be identified consistently,
even when their identification appropriately varies to reflect their context.</p>
</section>
<section id="benefits">
<h2>Benefits of Consistent Identification</h2>


<ul>

<li>People who learn functionality on one page on a site can find the desired functions
on other pages if they are present.
</li>

<li>When non-text content is used in a consistent way to identify components with the
same functionality, people with difficulty reading text or detecting text alternatives
can interact with the web without depending on text alternatives.
</li>

<li>People who depend on text alternatives can have a more predictable experience. They
can also search for the component if it has a consistent label on different pages.
</li>

<li>People who recognize the functionality of a component on one page within a set of web pages can more easily recognize components
with the same functionality elsewhere in the set.</li>
<li>People with cognitive and learning disabilities benefit from consistent identification because it reduces the effort required to learn,
recognize, and locate familiar functionality.</li>
<li>People who use assistive technologies benefit from consistent identification because familiar components are presented in a predictable way,
making it easier to understand and operate web content.</li>
<li>When components with the same functionality are identified consistently, users can more easily recognize equivalent functionality across a set of web pages.</li>
</ul>

</section>

</section>
<section id="examples">
<h2>Examples of Consistent Identification</h2>

<p>Examples in this Understanding document focus on components that users encounter repeatedly within a set of web pages,
since these are the situations in which consistent identification most directly supports recognition and predictability.</p>
<dl>
<dt>Example 1: Document icon button</dt>
<dd>A document icon button 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.</dd>
<dt>Example 2: Check mark toggle</dt>
<dd>A toggle control uses a check mark icon. The toggle is used in different contexts, and has
different accessible names: on one page, it has a text alternative of "approved",
while on another page it has a text alternative of "included".
Since the toggles serve different functions, they can have different text alternatives.</dd>
<dt>Example 3: Consistent references to other pages</dt>
<dd> A website publishes articles on-line. Each article spans multiple web pages and
each page contains a link to the first page, the next page and the previous page of
the article. If the references to the next page read "page 2", "page 3", "page 4"
etcetera, the labels are not the same but they are consistent. Therefore, these references
are not failures of this success criterion.</dd>
<dt>Example 4: Icon buttons with similar functions</dt>
<dd>An e-commerce application uses a printer icon button that allows the user to print receipts
and invoices. In one part of the application, the printer icon button 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.</dd>
<dt>Example 5: Save icon button</dt>
<dd>A common "save" icon is used for buttons throughout a site where page save function is provided.
These icons all have a consistent text alternative / accessible name.</dd>
<dt>Example 6: Icon link and adjacent link to same destination</dt>
<dd>A graphical link containing an icon and a text 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
<a href="../Techniques/html/H2" class="html"></a>. 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 best practice is to have
identical text so that when users encounter the second one, it is clear that it goes
to the same place as the first.</dd>
<dt>Example 7: Example of a Failure</dt>
<dd>A submit "search" button on one web page and a "find" button on another web page both
have a field to enter a term and list topics in the website related to the term submitted.
In this case, the buttons have the same functionality but are not labeled consistently.</dd>
<dt>Example 8: Failure primarily impacting assistive technology users</dt>
<dd>Two buttons with the same functionality visually have the same text, but have been given
different <code>aria-label="..."</code> accessible names that don't match/include the visible text.
For users of assistive technologies, these two buttons will be announced differently and inconsistently.
Note that this would likely also fail <a href="label-in-name">2.5.3 Label in Name</a>.</dd>
</dl>

<dt>Example 1: Button identified by a text label</dt>
<dd>A website provides a "Search" button throughout the site. Each button performs the same search functionality and is consistently identified as "Search",
allowing users to immediately recognize the function wherever it appears.</dd>
<dt>Example 2: Button identified by an icon</dt>
<dd>A web application provides a Save button on multiple pages. Each button performs the same save functionality and is consistently identified by the same save icon with the same text alternative,
allowing users to immediately recognize the same functionality wherever the button appears.</dd>
<dt>Example 3: Repeated component within the same page</dt>
<dd>A web page contains a "Search" button in both the page header and the page footer. Both buttons perform the same search functionality and are consistently identified as "Search".
Users can recognize the same functionality regardless of which instance they encounter.</dd>
<dt>Example 4: Consistent identification adapted to context</dt>
<dd>In a sequence of pages, a navigation link identified as "Page 4" on one page is appropriately identified as "Previous page" when viewed from page 5.
Although the labels are different, users can still recognize that both components provide the same navigation functionality because the identification reflects the current context.</dd>
<dt>Example 5: Consistent identification across responsive presentations</dt>
<dd>A website provides a Search button throughout the site. In the large viewport ("desktop") presentation, the button is identified by the visible label "Search".
In the small viewport ("mobile") presentation, the same button is identified by a magnifying glass icon with the accessible name "Search".
Despite the different presentations, users can consistently recognize the same search functionality.</dd>
<dt>Example 6 - Out of scope: Components with different functionality</dt>
<dd>An e-commerce application provides two buttons identified with a printer icon. One button prints receipts, while the other prints invoices.
Because the buttons do not have the same functionality, this success criterion does not apply.
Although identifying the buttons as "Print receipt" and "Print invoice" helps users understand their different functions and is encouraged as good design practice,
it is not required for conformance to this success criterion.</dd>
<dt>Example 7 - Failure: Different text labels for the same functionality</dt>
<dd>A website provides the same search functionality on multiple pages. On some pages the search button is identified as "Search", while on others it is identified as "Find".
Although the buttons perform the same functionality, the inconsistent identification may lead users to question whether they perform the same action.
This is a failure of this success criterion.</dd>
<dt>Example 8 - Failure: Different accessible names for the same functionality</dt>
<dd>Two buttons that perform the same functionality display the visible label "Search". However, one button has the accessible name "Search" while the other has the accessible name "Find".
Although the buttons appear identical visually, users of assistive technologies encounter inconsistent identification because the components are announced differently.
This also fails <a href="label-in-name">Success Criterion 2.5.3 Label in Name</a> because the accessible name "Find" does not contain the visible label "Search".</dd>
</dd>
<dt>Example 9 - Failure: Different icons for the same functionality</dt>
<dd>A web application provides a save button on multiple pages. On one page the button is identified by a floppy disk icon, while on another it is identified by a checkmark icon.
Although both buttons have the accessible name "Save", users who rely on visual recognition may not immediately recognize that the components perform the same functionality.
This is a failure of this success criterion.</dd>
</dl>
</section>

<section id="resources">
<h2>Resources for Consistent Identification</h2>


</section>

<h2>Resources for Consistent Identification</h2>
</section>
{% # Data for associated techniques is defined in understanding/understanding.11tydata.js %}
{% include "understanding/techniques.html" %}
</body>
Expand Down