- check content for reading level
- check content in screen-reader
- don't write content to help screen-readers
- avoid title attributes
- all images have an appropriate alt attribute
- only one h1
- title matches h1
- headings increase level by one
- headings form an appropriate hierarchy
- if content in-page is updated communicate this to the user
- avoid negative contractions in content
- visible name matches accessible name (eg button with aria-label Next and text of Continue)
- page title matches h1
- combine h1 and label rather than repeating
- check links, buttons and labels are unique
- identify links which open in a new window or tab
- don't use urls as link text
- links which look like buttons have role="button" and appropriate event listener
- don't add contextual hidden content in the middle of a link, button or label
- inputs have associated labels
- inputs are associated with their hints, using aria-describedby on the input (or on the fieldset if checkboxes or radio buttons) and an id on the hint
- inputs are associated with their error messages, using aria-describedby on the input (or on the fieldset if checkboxes or radio buttons) and an id on the error
- input hints provide information about format, expected data
- don't use maxlength on inputs, they give no warning that the user cannot type any further and prevent copy & paste
- inputs are large enough to show expected data in full
- radios and checkboxes are grouped by a fieldset
- fieldsets have a legend
- use autocomplete on inputs where user's own data would be entered
- show a summary of errors above the form
- validate html
- lang attribute on html element
- session timeouts - warn the user before timing them out and give option to extend their session
- use tables only for tabular data
- mark up tables correctly (headers, scope and caption)
- provide alternate ways of interacting with touch triggers (like a clickable button)
- don't rely on hover interactions (eg to show content), use click instead to show, and click again to hide
- works without js
- hr elements, remove from accessible tree using aria-hidden="true" or remove the hr entirely and use css for a visual border
- major landmarks used (header, main, footer)
- check page flow matches source order
- check layout does not break on different viewports
- check layout matches source/focus order on mobile
- keep related content in same vicinity so people using page magnifiers can find information easily
- check with 200% text increase
- check with 400% page zoom
- provide enough non-actionable area to scroll page with touch
- focus style colours / outline
- check keyboard access
- don't focus hidden items
- svgs have focusable='false' when children of focusable element
- skip link is first tab stop
- skip link takes user to main element
- tabindex, avoid use, don't take visible things out of tab order (tabindex -1 on a link or button)
- don't rely on colour alone
- text colour contrast is within bounds
- non-text colour contrast is within bounds
- check high contrast (Win) or inverted colours (Mac)
- provide captions and transcriptions for videos/audio
- no autoplaying media
- allow background video to be paused
- give user media controls
- honour reduced-motion preferences