Disabilities Affected: Cognitive, Visual
Components that have the same functionality within a set of web pages (website) must be identified consistently. This applies to labels, icons, and other identifiers for components with the same purpose.
Why It Matters
Using the same label or icon for the same function across a website helps users understand and predict how interface elements will behave. Inconsistency (e.g., using a shopping cart icon on one page and a “Basket” text link on another for the same function) increases cognitive load and can confuse users, especially those with cognitive impairments or screen reader users who rely on consistent naming.
Fixing the Issue
Identify components that perform the same function across multiple pages (e.g., links to the homepage, search buttons, shopping cart access, help links). Ensure these components use the same text label, accessible name, and/or icon consistently throughout the site. For icons, ensure their text alternative (alt text or aria-label) is also consistent.
Good Code Example
Using a consistent label and icon for “Search”:
-
<form action="/search" role="search">
<label for="search1">Search:</label>
<input type="search" id="search1" name="q">
<button type="submit" aria-label="Submit Search">
<img src="/icons/search-icon.svg" alt=""> Go </button>
</form>
<form action="/search" role="search">
<label for="search2">Search:</label>
<input type="search" id="search2" name="q">
<button type="submit" aria-label="Submit Search">
<img src="/icons/search-icon.svg" alt=""> Go </button>
</form>
Bad Code Example
Inconsistent labels/icons for the same function (accessing help):
-
<footer>
<a href="/help">
<img src="/icons/question-mark.svg" alt="Help"> </a>
<footer>
<a href="/help">Support Center</a>
</footer><footer>
<a href="/help">
<img src="/icons/info-icon.svg" alt="Information">
</a>
</footer></footer>
