- GIVEN devs wanna conform to WCAG 🤔
- AND devs don’t wanna read APG 😵💫
- 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.