Accessible HTML Content Patterns

A collection of the full HTML5 Doctor Element Index, minus the <command> and <menu> tags (which have poor browser support), as well as common markup patterns for quick reference.


There are countless little gotchas and quirks to remember when writing markup, even for basic components. This is an attempt to capture and centralize them.

Use this as a starting point when creating your base markup and styling for a stable, progressively enhanced foundation to your site or app, or cherry-pick as needed.


There are a few of ways to work with this repo:

  • Clone it in its entirety:
  • Download a zipped copy
  • Install via NPM: npm i accessible-html-content-patterns
  • Curl just the HTML page (great starting place for a styleguide):
    curl -o accessible-html-content-patterns.html
  • Copy/paste individual elements from the source code

To review any changes you make locally, run make build from the command line. This will stitch the handlebar templates together to update docs/index.html.

Code Concerns

Classes and IDs

Are suggestions only, or used for internal navigation/reference. Don't feel you need to include them if they're not relevant to your component's needs.

Code Style

Tabs, indentation, comments, etc. are my personal preference. It's more important to be consistent than literal when using for your own project. Use EditorConfig to help make this easier.

Accessibility Testing

This page has been tested via the Chrome DevTools Accessibility Audit, as well as WebAIM's WAVE and Deque System's aXe accessibility testing browser extensions, as well as Khan Academy's tota11y bookmarklet.

Answers to specific warnings issues are available on the repo's Wiki.

A note about ARIA: ARIA is a band-aid and not a cure-all. Use semantic markup whenever possible.


Contributions are welcome!

Credits, Attribution, and Inspiration


MIT License