Skip to main content Accessibility Feedback

Accessible HTML Patterns

My buddy Eric Bailey maintains a big collection of accessible HTML patterns.

Right-Click > Inspect Element to checkout the right accessible markup to use for a ton of common HTML patterns and components. For example, the symbols sections documents how to make symbols like + and < more accessible.

Here’s what the plus symbol should look like:

<span role="definition" aria-label="Plus">+</span>

Thanks to Eric for publishing this awesome resource! Go check it out on GitHub.