Example HTML violation: Inaccessible ARIA toggle field name (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Test Page</title>
<div role="checkbox" aria-checked="false"></div>
</body>
</html>The above HTML violates the aria-toggle-field-name accessibility rule because the div element with a role of "checkbox" does not have an accessible name. This means that there is no way for people using assistive technologies to understand the purpose of this user interface element.
Accessible names can be provided using attributes like aria-label, aria-labelledby, title, or by including it as inner text.
Having accessible names is crucial for accessibility as it helps convey the purpose of user interface elements to all users.
How to fix "Inaccessible ARIA toggle field name (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Test Page</title>
<div role="checkbox" aria-checked="false" aria-label="Example Checkbox"></div>
</body>
</html>In this corrected version, the div element with the role of "checkbox" has been given an aria-label attribute with the value "Example Checkbox". Now, assistive technologies can provide this name to their users, conveying the purpose of the checkbox.
You can learn more about the aria-toggle-field-name rule and ways to fix related issues on the Axe-core 4.7 ruleset page and Web Content Accessibility Guidelines.
Remember, providing an accessible name is just one part of creating accessible custom checkboxes. It's also important for the checkbox to maintain proper aria-checked state based on user interaction and keyboard focusability. Keep in mind to follow other related accessibility best practices for interactive elements.
