Skip to patterns

CPAC

Since you don’t read anyways, just copy & paste!

  1. GIVEN devs wanna conform to WCAG 🤔
  2. AND devs don’t wanna read APG 😵‍💫
  3. THEN devs can CPAC (Copy & Paste Accessible Code) 🥳

Patterns

Common design patterns written in accessible HTML. All you have to do is dress it up with CSS and sometimes JavaScript.

Button
<button type="button">
  Button
</button>
<button type="submit">
  Submit Button
</button>
<button type="reset">
  Reset Button
</button>
Menu (not a nav!)
<ul role="menu">
  <li role="presentation">
    <button type="button" role="menuitem">Action item 1</button>
  </li>
  <li role="presentation">
    <button type="button" role="menuitem">Action item 2</button>
  </li>
  <li role="presentation">
    <button type="button" role="menuitem">Action item 3</button>
  </li>
  <!-- And do not put a damn link here! -->
</ul>
Popup Menu (dropdown)
<button type="button" aria-expanded="false" aria-haspopup="true" aria-controls="menu-list">Menu button</button>
<!-- Use JS to toggle the aria-expanded value for state management -->
<ul id="menu-list" role="menu">
  <li role="presentation">
    <button type="button" role="menuitem">Action item 1</button>
  </li>
  <li role="presentation">
    <button type="button" role="menuitem">Action item 2</button>
  </li>
  <li role="presentation">
    <button type="button" role="menuitem">Action item 3</button>
  </li>
  <!-- And do not put a damn link here! -->
</ul>
Link
<a href="/path">
  Link
</a>
<a href="https://yahoo.com" target="_blank" rel="noopener">
  External link
</a>
<a href="/file.pdf" download>
  Download link
</a>
<a href="/path" class="button">
  A freaking marketing CTA
</a>
Nav
<nav>
  <ul>
    <li>
      <a href="/path">Item 1</a>
    </li>
    <li>
      <a href="/path">Item 2</a>
    </li>
    <li>
      <a href="/path">Item 3</a>
    </li>
  </ul>
</nav>
Mega Nav
<nav>
  <ul>
    <li>
      <a href="/path">
        Item 1
      </a>
    </li>
    <li>
      <button type="button" aria-expanded="false">
        Item 2, expandable
      </button>
      <!-- Use JS to toggle the aria-expanded value for state management -->
      <!-- Second level list goes here -->
      <ul>...</ul>
    </li>
    <li>
      <button type="button" aria-expanded="false">
        Item 3, expandable
      </button>
      <!-- Use JS to toggle the aria-expanded value for state management -->
      <!-- Second level list goes here -->
      <ul>...</ul>
    </li>
  </ul>
</nav>
Clickable Card (block link)
<div class="card">
  <img class="card__image" alt="Rainbows and unicorns" width=400 height=300>
  <p class="card__title">
    <a href="/path">
      Card title
      <!-- Style a::before to cover the whole card -->
    </a>
  </p>
  <p class="card__description">
    Card description.
  </p>
</div>
Modal Dialog
<dialog>
  <form method="dialog">
    <p>A modern day modal.</p>
    <button type="submit">Close</button>
  </form>
</dialog>
Disclosure (show/hide)
<details>
  <summary>Show more</summary>
  <p>More content goes here.</p>
</details>
Switch
<label for="input-id">Turn me on</label>
<input type="checkbox" id="input-id" role="switch">
Form Input Validations
<label for="input-id">Label</label>
<span id="hint-id">Hint goes here.</span>
<span id="error-id">Error message goes here.</span>
<input type="text" id="input-id" aria-describedby="hint-id error-id">
SVG
<svg role="img">
  <title>Describe the image</title>
  ...
</svg>
More

Stay tuned for more accessible code.