Accessibility ARIA

<!-- BAD: div has zero meaning for screen readers -->
<div class="btn" onclick="submit()">Submit</div>

<!-- GOOD: button is announced as "Submit, button" -->
<button type="submit" onclick="submit()">Submit</button>

<!-- aria-label describes element for screen readers -->
<button aria-label="Close menu">X</button>

<!-- aria-hidden removes element from screen readers -->
<span aria-hidden="true">📸</span>

<!-- aria-expanded announces open/closed state -->
<button
  aria-expanded="false"
  aria-controls="menu">
  Open Menu
</button>
<nav id="menu" role="navigation">...</nav>

<!-- First element on page — lets keyboard users skip nav -->
<a href="#main-content"
   class="skip-link">
  Skip to main content
</a>
<nav>...navigation links...</nav>
<main id="main-content">...</main>