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.
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
- 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 https://raw.githubusercontent.com/ericwbailey/accessible-html-content-patterns/master/docs/index.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.
Contributing
Contributions are welcome!
- Submit a Pull Request
- Raise an Issue
Credits, Attribution, and Inspiration
- WebAIM:
Three things you should know before using VoiceOver for testing - Adam Morse's mrmrs/html
- HTML5 Doctor
- Alistair Duggin's Accessibility Fails
- Paul J. Adam's WAI-ARIA Landmarks Site Navigation Structure Demo
- The Falsehoods Programmers Believe series
- GOV.UK Elements
- Baymard Institute's Touch Keyboard Types
- Chrome Autofill
- Nielsen Norman Group's Checklist for Designing Mobile Input Fields
- Why Don’t Screen Readers Always Read What’s on the Screen? Part 1: Punctuation and Typographic Symbols
- LeonieWatson's Accessible emoji
- Nathan Curtis' Buttons in Design Systems
- Filament Group: I Wanted to Type a Number
- CSS-Tricks' Finger-friendly numerical inputs with inputmode
- CSS-Tricks' Everything You Ever Wanted to Know About inputmode
- Cloud Four's Autofill: What web devs should know, but don’t
- Alex Holachek's Build a Better Mobile Input
Made by ILUNION for the Prosperity4All project: Ecosystem infrastructure for smart and personalised inclusion and PROSPERITY for ALL stakeholders. This project has received funding from the European Union’s Seventh Programme for research, technological development and demonstration under grant agreement, No 610510.