WCAG 3.2.4 Consistent Identification — Testing Guide for Mobile & Web Apps

WCAG 3.2.4, "Consistent Identification," mandates that user interface components that have the same function must be identified consistently. This means that if a particular action or piece of informa

Ensuring Consistent Identification: A Practical Guide to WCAG 3.2.4 (AA)

WCAG 3.2.4, "Consistent Identification," mandates that user interface components that have the same function must be identified consistently. This means that if a particular action or piece of information is represented by a specific label, icon, or mechanism, that representation should remain the same throughout the entire application or website.

What WCAG 3.2.4 Requires

In straightforward terms, this criterion means:

• Same Function, Same Label: If two or more controls do the exact same thing (e.g., "Save," "Submit," "Add to Cart"), they must use the same wording or visual cue.
• Same Label, Same Function: Conversely, if a label or icon is used multiple times, it must always perform the same action or convey the same meaning. Mixing meanings for identical identifiers leads to confusion.
• Consistent Mechanism: The *way* users interact with these components should also be consistent. For example, if a "close" button is always an "X" icon in the top-right corner, it should remain there.

This applies to all interactive elements, including buttons, links, form fields, icons, and any other UI component that conveys functionality or information.

Why Consistent Identification Matters

Inconsistent identification directly impacts users by creating cognitive load and increasing the likelihood of errors.

• Cognitive Load: Users learn to associate specific labels and visual cues with certain actions. When these associations are broken, users must re-learn or guess the function, which is mentally taxing.
• Error Proneness: Inconsistent identification can lead users to perform the wrong action. Imagine clicking a button labeled "Next" expecting to advance to the next page, only to find it deletes your current entry because it was inconsistently labeled elsewhere.
• Impact on Specific Users:
• Users with Cognitive Disabilities: Individuals with memory impairments or learning disabilities rely heavily on consistent patterns. Inconsistency can make an application unusable for them.
• Users with Low Vision: While not directly about visual clarity, consistent placement and design of interactive elements helps users with low vision build a mental map of the interface.
• Non-Native Speakers: Consistent phrasing reduces reliance on perfect language comprehension.
• Users with Screen Readers: Screen reader users depend on predictable labels and element roles. Inconsistent identification can lead to confusion when navigating or interacting with content.

This criterion is crucial for meeting accessibility mandates like the EU's European Accessibility Act (EAA) and the US's Americans with Disabilities Act (ADA), both of which require digital services to be accessible to people with disabilities.

Common Violations with Examples

Here are common ways WCAG 3.2.4 is violated in practice:

1. Inconsistent Button Labels for the Same Action:

• Web App Example: A form might have a "Save" button on one page, but on another, the same save functionality is labeled "Update."
• Mobile App Example: An e-commerce app uses "Add to Cart" on product listing pages but "Add to Bag" on product detail pages for the exact same item and action.

2. Ambiguous or Inconsistent Icon Usage:

• Web App Example: A trash can icon is used for "Delete" on one page and "Archive" on another.
• Mobile App Example: A "share" icon (often depicted as three connected dots) is used for "Save to Favorites" in one section and "Download" in another.

3. Varied Terminology for Navigation Elements:

• Web App Example: Navigation menus use "Products" in one place, "Shop" in another, and "Catalog" elsewhere, all pointing to the same product listing.
• Mobile App Example: A footer navigation might have a tab labeled "Profile" and a side menu option labeled "My Account," both leading to the user's profile page.

4. Inconsistent Identification of Form Field Purposes:

• Web App Example: A required field for a user's email address is labeled "Email" in one form and "Contact Email" in another, without a clear distinction of purpose.

How to Test for Compliance

Testing for consistent identification requires a methodical approach, combining manual checks with automated tools.

#### Manual Testing Steps

1. Identify Key Functions: List the primary actions users can perform within your application (e.g., login, search, add to cart, save, delete, navigate).
2. Scan for Identical Labels/Icons: Systematically browse through the application, noting every instance of buttons, links, and icons. Pay close attention to elements with the same text or visual appearance.
3. Verify Functionality: For each instance of a repeated label or icon, confirm that it performs the *exact same* action.
4. Check for Semantic Consistency: Ensure that elements with the same function also have the same *meaning* conveyed through their labels.
5. Test Navigation: Verify that navigation elements (menus, breadcrumbs, tabs) are consistently labeled and lead to predictable destinations.
6. Form Field Consistency: Review form fields that collect similar information to ensure consistent labeling and purpose indication.

#### Automated Tools

While manual testing is essential for nuanced checks, automated tools can significantly speed up the process by identifying potential violations.

• Static Analysis Tools: Some linters and code analysis tools can flag duplicate or similarly worded labels that might indicate an issue.
• Dynamic Testing Platforms (like SUSA): Autonomous exploration platforms can identify UI elements and track their behavior. They can detect when multiple elements with the same label perform different actions, or vice versa.
• Accessibility Checkers (Browser Extensions/CLI): Tools like Axe-core, Lighthouse, or WAVE can sometimes flag inconsistent labeling, especially when associated with ARIA attributes or HTML semantics.

#### Mobile-Specific Considerations (Android/iOS)

• Content Descriptions (Android): Ensure that contentDescription attributes for interactive elements are consistently applied for identical functions.
• Accessibility Labels (iOS): Similar to Android, verify consistency in accessibilityLabel values for elements with the same purpose.
• Platform Conventions: Adhere to platform-specific UI patterns. For example, a "back" button should consistently be represented and positioned according to Android or iOS guidelines.
• Dynamic Content: Be particularly vigilant with dynamically generated UI elements, as these are prone to inconsistencies.

How to Fix Violations

Fixing violations of WCAG 3.2.4 typically involves code-level adjustments and a review of your design system.

1. Standardize Terminology: Create a glossary of UI terms for your application. All developers and designers should use this glossary for button labels, link text, and other identifiers.
2. Refactor UI Components: If a component is used inconsistently, refactor it into a reusable component with a fixed identifier and behavior.
3. Use ARIA Attributes (Web): For web applications, leverage ARIA attributes like aria-label or aria-labelledby to ensure screen readers receive consistent and accurate information about element functions.

• Example: If a delete icon is used, ensure its aria-label is consistently "Delete item" across all instances.

    <!-- Consistent -->
    <button aria-label="Delete item">
        <i class="icon-trash"></i>
    </button>

    <!-- Inconsistent -->
    <button aria-label="Remove entry"> <!-- Should be "Delete item" -->
        <i class="icon-trash"></i>
    </button>

1. Update Mobile UI Code: Ensure that contentDescription (Android) or accessibilityLabel (iOS) are uniform for elements with the same function.

• Android Example (Kotlin):

    // Consistent
    buttonDelete.contentDescription = "Delete item"

    // Inconsistent
    buttonRemove.contentDescription = "Remove entry" // Should be "Delete item"

1. Design System Enforcement: Integrate consistent identification rules into your design system documentation and component libraries.

How SUSA Checks This Criterion

SUSA (SUSATest) autonomously explores your application, meticulously tracking user flows and UI element interactions. During its exploration, SUSA can identify violations of WCAG 3.2.4 in several ways:

• Autonomous Exploration: By navigating through your app or website (via APK upload or web URL), SUSA encounters all interactive elements.
• Element Identification and Tracking: SUSA records the text labels, icons, and associated actions of each UI element it encounters.
• Cross-Session Learning: As SUSA runs multiple times, it builds a comprehensive understanding of your app's behavior. This allows it to spot inconsistencies that might appear across different screens or after specific user actions.
• Flow Tracking: SUSA's ability to track complex user flows (like registration, checkout, or search) helps it identify if an element's function changes mid-flow or across different points in a process. For example, if a "Confirm" button behaves differently on two sequential steps within a checkout flow, SUSA will flag this.
• Persona-Based Testing: SUSA utilizes 10 distinct user personas, including those who might be more sensitive to inconsistencies (e.g., novice, elderly, accessibility personas). This dynamic testing approach helps uncover issues that might be missed by standard automated checks.
• Reporting: SUSA generates detailed reports, including coverage analytics and specific issue findings. It can highlight instances where elements with identical labels perform different actions or where elements with the same function have different labels, providing actionable insights for remediation.
• Auto-Generated Scripts: SUSA auto-generates regression test scripts using Appium for Android and Playwright for Web. These scripts can be configured to include checks for consistent identification, ensuring that these issues do not reappear after code changes.

By leveraging SUSA, you can proactively identify and address WCAG 3.2.4 violations, ensuring a more predictable and accessible experience for all your users.