Accessibility

General Principles

• Keyboard-accessibility: every interactable element (links, form fields, etc.) can be tabbed to easily (hence skip-navigation links) in an order that makes sense for your content
  • Dropdown menus can be opened via Enter or the Space bar
• Appropriate contrast so sighted users can read your site There are tools to help with this.
• Screenreader accessibility through alt text for meaningful images, a meaningful heading hierarchy, contextual link text (e.g. not “Click here”), and much more

Tactics

• capitalize the first letter of each word in a hashtag so screen readers can correctly pronounce it, e.g. #AccessabilityWins rather than #accessabilitywins
• include image descriptions (the at attribute on <img> elements in HTML) when sharing images to describe them for non-sighted readers, unless the image is purely decorative and conveys no information, in which case set alt="" and role="presentation"
• provide transcripts for audio and video content
• body copy should have a contrast ratio with its background of at least 4.5:1
• form controls (<input />s, etc.) should have associated <label>s

Additional Resources

• pa11y: an automated accessibility testing tool
• The W3C’s Web Content Accessibility Guidelines
  • …and WebAIM’s WCAG 2 simplified, condensed guidelines for the above
• The Ad Hoc (agency) Accessibility Beyond Compliance Playbook