Skip to content
Open
Changes from all commits
Commits
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
30 changes: 11 additions & 19 deletions understanding/20/consistent-identification.html
Original file line number Diff line number Diff line change
Expand Up @@ -76,47 +76,39 @@ <h2>Benefits of Consistent Identification</h2>
<h2>Examples of Consistent Identification</h2>

<dl>
<dt>Example 1: Document Icon</dt>
<dd>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.</dd>
<dt>Example 2: Check Mark</dt>
<dd>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.</dd>
<dt>Example 3: Consistent references to other pages</dt>
<dd> A website publishes articles on-line. Each article spans multiple web pages and
<dt>Example 1: 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 2: 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: Icons with similar functions</dt>
<dt>Example 3: Icons with similar functions</dt>
<dd>An e-commerce application uses a printer icon that 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.</dd>
<dt>Example 5: Save icon</dt>
<dt>Example 4: Save icon</dt>
<dd>A common "save" icon is used through out the site where page save function is provided
on multiple web pages.</dd>
<dt>Example 6: Icon and adjacent link to same destination</dt>
<dt>Example 5: Icon and adjacent link to same destination</dt>
<dd>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
<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>
<dt>Example 6: 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. For users of assistive technologies,
these two buttons will be announced differently and inconsistently.</dd>
</dl>

</section>
Expand Down
Loading