Skip to content

Latest commit

 

History

History
50 lines (37 loc) · 4.93 KB

Accessibility-Checklist.md

File metadata and controls

50 lines (37 loc) · 4.93 KB
Raw

❤️ Accessibility Checklist

Working Definition of Accessibility:

Ensuring everyone, regardless of physical or mental characteristics, is able to use an application.

What accessibility gaps are you targeting, especially for your application's user base?

This info is useful in prioritizing what to do first.

  • Cognitive
  • Physical
  • Auditory
  • Visual

Read explanations and examples of abilities and barriers here.

Recommended: Easier Accessibility Enhancements

Click links for further reading on an enhancement.

  • Headings - Content should be broken up by headings in h elements to make pages easy to navigate/scan
  • Meaningful, Descriptive, Obvious Links & Text - Don't use meaningless phrases like "Click Here" for your link text, it should describe what the link actually goes to. Also make sure links/clickable things are obvious.
  • Semantic, Valid HTML - Minimize use of meaningless div and span elements, use semantic elements like section or nav instead. Make sure your HTML validates to modern specs
  • Font Size & Readability - Unofficial mininum 16px font size for body text, but also watch out for your text readability dependent on styling
  • Color Contrast Ratio - 4.5:1 minimum contrast ratio, though aim for better. Ensure your text color isn't too close to your background color, making it hard to read. Some exceptions apply for large text
  • Alt Tags on Images - All images should have alt tags filled out describing the purpose of the image
  • Large Click Targets - 44px by 44px minimum size for clickable things, with a few exceptions such as inline text links
  • Remove Images Of Text - Use actual HTML text instead of using an image of text--text in images cannot be understood by assistive technologies
  • Don't Hide Focus Indicator - It's possible to remove/override the default browser focus indicator with the CSS :focus pseudo element or outline: 0; style, which can make it difficult to see what element is active

Higher Effort Accessibility Enhancements

  • Zoom - Layout doesn't break and content stays visible when zooming using browser, allows zooming to 200%+
  • Keyboard Navigation - User can use essential functions--especially forms--and navigate page with keyboard, not getting stuck on an element
  • WAI-ARIA attributes - Used to describe elements and states to accessibility software
  • Limiting animation/motion - Minimize use of animation, allow user to control/disable if animation is used
  • Video captions - Full text captions and transcripts for video content
  • Fully semantic elements and information structure - Content is organized intuitively, sensibly, in understandable chunks for both humans and assistive technologies with all parts using meaningful elements
  • Increase readability, simplify language - Complex, long sentences and words can create issues with reading and understanding your content, especially for users with disabilities
  • Don't Rely On Only Color as a Differentiator - Colorblind users can have difficulty differentiating items solely based on color. Sometimes items are only color coded in your user interface. Items should have another differentiator such as an icon or descriptive text as a backup

Resources