C&PAC

<button type="button">
  Perform a function
</button>
<button type="submit">
  Submit
</button>
<button type="reset">
  Cancel
</button>
<button type="button" aria-label="Edit">
  <svg aria-hidden="true">...</svg>
  // Icon-only
</button>

<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 fucking link here!
</ul>

<button type="button" aria-expanded="false" aria-haspopup="true" aria-controls="menu-list">
  Menu button
  // Write JS to toggle aria-expanded="true"
</button>
<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 fucking link here!
</ul>

<a href="/path">
  Navigate within the same domain
</a>
<a href="https://yahoo.com" target="_blank" rel="noopener">
  Navigate to a different domain
</a>
<a href="/file.pdf" download>
  Download a file within the same domain
</a>
<a href="/get-started" class="cta-button">
  Get Started
  // A fucking marketing CTA that looks like a button
</a>

<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>

<nav aria-label="Site">
  <button type="button" aria-expanded="false">
    Nav
    // Write JS to toggle aria-expanded="true"
  </button>
  <ul>
    <li>
      <a href="/path">
        Item 1
      </a>
    </li>
    <li>
      <button type="button" aria-expanded="false">
        Item 2, expandable
        // Write JS to toggle aria-expanded="true"
      </button>
      // Insert 2nd level list
    </li>
    <li>
      <button type="button" aria-expanded="false">
        Item 3, expandable
        // Write JS to toggle aria-expanded="true"
      </button>
      // Insert 2nd level list
    </li>
  </ul>
</nav>

<div class="card">
  <img class="card-image" alt="Rainbows and unicorns" width=400 height=300 />
  <p class="card-title">
    // Use h1 ~ h6 only when appropriate
    <a href="/path">
      Card title
      // Style a::before or a::after to cover the whole card
    </a>
  </p>
  <p class="card-description">
    Card description.
  </p>
</div>

<dialog>
  <form method="dialog">
    <p>A modern day modal.</p>
    <button>
      Close
    </button>
  </form>
</dialog>

<details>
  <summary>
    Summary
  </summary>
  <p>
    Click on summary to expand more details.
  </p>
</details>

Stay tuned for more accessible code.