ARIA Labels Guide Skill

Apply ARIA correctly.

Core Attributes

aria-label="Close dialog"          <!-- labels an element -->
aria-labelledby="heading-id"       <!-- references another element -->
aria-describedby="help-text-id"    <!-- additional description -->
aria-hidden="true"                 <!-- hide from screen readers -->
aria-live="polite"                 <!-- announce dynamic changes -->
aria-expanded="false"              <!-- for collapsible sections -->
aria-selected="true"               <!-- for tabs, options -->
aria-disabled="true"               <!-- disabled state -->

Common Roles

role="button"          <!-- clickable non-button element -->
role="navigation"      <!-- nav section -->
role="dialog"          <!-- modal dialog -->
role="alert"           <!-- important message -->
role="tab"             <!-- tab in tablist -->
role="tabpanel"        <!-- tab content -->

Rules

1. Don't use ARIA if native HTML works (use <button> not <div role="button">)
2. Every interactive element needs an accessible name
3. Don't change native semantics unnecessarily
4. All interactive ARIA elements must be keyboard accessible

Guidelines

• Test with a screen reader (VoiceOver, NVDA)
• Use the accessibility tree in browser DevTools