Build interfaces
everyone can use.

<dialog aria-labelledby="d-h">
  <h2 id="d-h">Confirm action</h2>
  <button autofocus>Cancel</button>
  <button>Confirm</button>
</dialog>
// Native <dialog> gives focus trap + Esc free
dialog.showModal();

<div role="tablist">
  <button role="tab" aria-selected="true"
          aria-controls="p1" id="t1">Overview</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1">...</div>
// Arrow keys cycle, only selected tab is in tab order

<input role="combobox"
       aria-autocomplete="list"
       aria-expanded="false"
       aria-controls="list"
       aria-activedescendant="opt-3">
<ul id="list" role="listbox">
  <li id="opt-3" role="option"
      aria-selected="true">Brazil</li>
</ul>

<div role="status"
     aria-live="polite"
     aria-atomic="true">
  Changes saved successfully
</div>
// "polite" waits for the user to finish
// Use "assertive" only for errors

<button aria-describedby="tip">Help</button>
<div id="tip" role="tooltip">
  Click to share this article
</div>
// WCAG 1.4.13: must be hoverable + persistent + dismissible

<a href="#main" class="skip">
  Skip to main content
</a>

/* Off-screen until focused */
.skip { position: absolute; top: -100px; }
.skip:focus { top: 1rem; }

<button aria-expanded="false"
        aria-controls="panel">
  Shipping info
</button>
<div id="panel" role="region"
     hidden>
  Free shipping…
</div>
// Toggle: button[aria-expanded] + panel[hidden]
// Native: <details><summary> is simpler if pure HTML

<button aria-haspopup="menu"
        aria-expanded="false"
        aria-controls="m">Actions</button>
<ul id="m" role="menu">
  <li role="menuitem" tabindex="-1">Duplicate</li>
</ul>
// Note: a dropdown of LINKS is just a <ul> of <a> — no role="menu" needed

<label for="e">Email</label>
<input id="e" type="email" required
       aria-invalid="true"
       aria-describedby="e-err">
<p id="e-err">Please enter a valid email.</p>
<div role="status" aria-live="polite">
  Form has 2 errors. <a href="#e">Fix email</a>
</div>
// Validate on blur, not on every keystroke

<label for="d">Departure date</label>
<input id="d" type="date"
       aria-describedby="d-fmt">
<p id="d-fmt">MM/DD/YYYY</p>
// Native is almost always better than a custom calendar
// "bday" means the user's birthday; it is incorrect for travel dates
// Custom calendars: APG datepicker is the reference