Label ARIA toggle fields clearly

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

ARIA toggle fields must have an accessible name (Rule ID: aria-toggle-field-name)

Applicable Standards

• WCAG 2.0, 2.1, 2.2 Level A (4.1.2)

• EN 301 549 (9.4.1.2)

• Trusted Tester Guidelines

Impact

Serious level impact affecting:

• Blind users

• Deafblind users

• Users with mobility impairments

Proper Implementation

Toggle fields must have an accessible name using one of:

• aria-label

• aria-labelledby

• Native text content

• title attribute

• Associated label element

Examples of Correct Usage

1. Using aria-label for Accessible Names:
   The aria-label provides a descriptive name ("Enable notifications") that screen readers announce, ensuring users know the purpose and state of the toggle.

2. Using aria-labelledby to Reference a Label:
   The aria-labelledby attribute references the text in the label (#toggle-label), making the toggle field accessible with a descriptive name.

3. Using Native Text Content:
   The button's text ("Toggle Dark Mode") acts as its accessible name, which is announced along with the state (pressed or not) by screen readers.

4. Using a title Attribute:
   The title attribute provides additional context for the toggle's purpose. While screen readers may announce it, using aria-label or aria-labelledby is preferred.

5. Using an Associated label Element:
   The label element is associated with the toggle field via the for attribute, ensuring the toggle is clearly labeled.

Common Errors to Avoid

1. Missing Accessible Name:
   The toggle field lacks an accessible name, making it impossible for screen readers to announce its purpose.

2. Using Non-Descriptive Labels:
   The aria-label ("Toggle") and button text ("Click") are too vague, failing to convey the toggle's actual purpose.

3. Inconsistent State Announcements:
   The same aria-label ("Toggle notifications off") is used for both states, which confuses screen reader users about the toggle's state.

4. Over reliance on Visual Indicators:
   The images lack meaningful alt text, and there is no accessible name provided for the toggle fields.

5. Using Incorrect ARIA Roles:
   The role="checkbox" is used instead of aria-pressed for a toggle button, causing confusion for assistive technologies, as "checkbox" implies a different interaction pattern.

Rationale

• Essential for screen reader users to understand the purpose of toggle fields

• Enables proper identification of interactive elements

• Required for meeting WCAG success criteria

• Critical for form interaction and navigation

Evaluation Method

1. Inspect the Code

   • Verify that:

     • Each toggle field has an accessible name using aria-label, aria-labelledby, native text, or a label.

     • The toggle's state is conveyed using aria-pressed.

     • The accessible name is descriptive and meaningful.

2. Test with Assistive Technology

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to confirm:

     • The toggle's name and state are announced clearly and accurately.

     • The toggle behaves as expected when activated (e.g., state changes).
       
       

Evaluation Checklist