Skip to main content

WCAG 4.1.2 Name, Role, Value (Level A)

This page demonstrates how to properly implement name, role, and value for custom interface components.

Custom Form Controls

Bad Example: Inaccessible Toggle

Notifications
Why this fails:
  • No proper labeling
  • Missing ARIA attributes
  • Role not defined

Good Example: Accessible Toggle

Why this works:
  • Proper labeling with for/id
  • ARIA role="switch"
  • aria-checked state
  • Live region for updates

Custom Menu Component

Bad Example: Inaccessible Menu

Option 1
Option 2
Option 3
Why this fails:
  • No ARIA attributes
  • Missing keyboard support
  • No role definitions

Good Example: Accessible Menu

Why this works:
  • Proper ARIA attributes
  • Defined roles
  • Keyboard navigation
  • State management

Custom Tab Interface

Bad Example: Inaccessible Tabs

Tab 1 Content
Tab 2 Content
Tab 3 Content
Why this fails:
  • No ARIA relationships
  • Missing keyboard support
  • No role definitions

Good Example: Accessible Tabs

Tab 1 Content with proper ARIA relationships
Why this works:
  • Proper ARIA roles and relationships
  • Keyboard navigation support
  • Clear state management
  • Live region for updates

Best Practices Summary

  • Always provide proper names through labels or ARIA labels
  • Define roles for custom components using ARIA roles
  • Maintain and update component states using appropriate attributes
  • Ensure keyboard navigation works properly
  • Use live regions to announce dynamic changes
  • Test with screen readers to verify accessibility
Interact with components to see their states