Accessible HTML Content Patterns(link is external)

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

Motivation

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.

Installation

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

• Clone it in its entirety: https://github.com/ericwbailey/accessible-html-content-patterns.git
• Download a zipped copy(link is external)
• Install via NPM(link is external): npm i accessible-html-content-patterns
• Curl(link is external) just the HTML page (great starting place for a styleguide):
  curl -o accessible-html-content-patterns.html https://raw.githubusercontent.com/ericwbailey/accessible-html-content-patterns/master/docs/index.html
• Copy/paste individual elements from the source code(link is external)

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(link is external).

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(link is external) to help make this easier.

Accessibility Testing

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

Answers to specific warnings issues are available on the repo's Wiki(link is external).

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

Contributing

Contributions are welcome!

• Submit a Pull Request(link is external)
• Raise an Issue(link is external)

Credits, Attribution, and Inspiration

• WebAIM(link is external):
  Three things you should know before using VoiceOver for testing(link is external)
• Adam Morse(link is external)'s mrmrs/html(link is external)
• HTML5 Doctor(link is external)
• Alistair Duggin(link is external)'s Accessibility Fails(link is external)
• Paul J. Adam(link is external)'s WAI-ARIA Landmarks Site Navigation Structure Demo(link is external)
• The Falsehoods Programmers Believe(link is external) series
• GOV.UK Elements(link is external)
• Baymard Institute(link is external)'s Touch Keyboard Types(link is external)
• Chrome Autofill(link is external)
• Nielsen Norman Group(link is external)'s Checklist for Designing Mobile Input Fields(link is external)
• Why Don’t Screen Readers Always Read What’s on the Screen? Part 1: Punctuation and Typographic Symbols(link is external)
• LeonieWatson(link is external)'s Accessible emoji(link is external)
• Nathan Curtis(link is external)' Buttons in Design Systems(link is external)
• Filament Group(link is external): I Wanted to Type a Number(link is external)
• CSS-Tricks(link is external)' Finger-friendly numerical inputs with inputmode(link is external)
• CSS-Tricks(link is external)' Everything You Ever Wanted to Know About inputmode(link is external)
• Cloud Four(link is external)'s Autofill: What web devs should know, but don’t(link is external)
• Alex Holachek(link is external)'s Build a Better Mobile Input(link is external)

License

MIT License(link is external)