OpenClaw LaunchOpenClaw Launch
🏷️

ARIA Label Guide

Verified

by Community

Provides guidance on writing clear, descriptive ARIA labels, roles, and properties. Covers when to use aria-label vs aria-labelledby, landmark roles, live regions, and common ARIA anti-patterns to avoid.

ariaaccessibilityscreen-readersemantics

ARIA Label Guide

Write effective ARIA labels and use ARIA roles correctly for web accessibility.

Usage

Describe your UI component to get appropriate ARIA labeling recommendations.

Examples

  • "Add ARIA labels to a navigation menu with dropdowns"
  • "Label a search form with autocomplete correctly"
  • "Fix ARIA roles on a custom tab component"

Guidelines

  • Use native HTML semantics before reaching for ARIA
  • Prefer aria-labelledby over aria-label when visible text exists
  • Never use aria-label on generic div or span elements
  • Test with actual screen readers, not just validators
  • Keep labels concise but descriptive

More Accessibility Skills

🔊
Screen Reader Testing

Test your web application with screen readers effectively.

🎨
Color Contrast Checker

Ensure your color combinations meet WCAG standards.

⌨️
Keyboard Navigation Guide

Implement complete keyboard navigation for web apps.

🖼️
Alt Text Writer

Write meaningful alt text for images and media.