Open navigation menu

Accessibility with ARIA Attributes

Implements accessible web components using ARIA attributes, proper roles, keyboard navigation support, and screen reader announcements.

HtmlForm Validation

Code

snippet
<div class="accordion">
  <h3>
    <button aria-expanded="true"
            aria-controls="panel-1"
            id="header-1">
      Section 1
    </button>
  </h3>
  <div role="region"
       aria-labelledby="header-1"
       id="panel-1">
    <p>Content for section 1</p>
  </div>
</div>

<div class="alert" role="alert" aria-live="assertive">
  Form submitted successfully!
</div>

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<button aria-busy="false"
        aria-describedby="save-help">
  Save Changes
</button>
<span id="save-help" class="visually-hidden">
  Saves all changes to your profile
</span>

<div role="status" aria-live="polite" class="sr-only">
  Loading content...
</div>

<input type="text"
       aria-label="Search products"
       aria-describedby="search-hint"
       placeholder="Search...">
<p id="search-hint">Type at least 3 characters</p>

Related Examples