Accessibility

Accessibility is for everyone.

What if the work really did only impact those with disabilities? What if the work was only for those who are blind or deaf? What if the work were only so that one person could use their iPhone? I should hope we’d be doing it anyway.[7]

Checklist

Use this checklist to ensure you are doing your best to meet accessibility requirements. Consult best practices[5] for those with low-bandwidth internet.

Contrast

There needs to be a contrast of at LEAST 4.5:1 between the background and foreground of colors for readability.

In WCAG 2, contrast is a measure of the difference in perceived "luminance" or brightness between two colors (the phrase "color contrast" is never used). This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white).

Alt Text, Titles, and Captions in HTML[11-14]

Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document or webpage.[11]

  • Add alt text all non-decorative images.
  • Keep it short and descriptive, like a tweet.
  • Don’t include “image of” or “photo of”.
  • Leave alt text blank if the image is purely decorative
  • It's not necessary to add text in the Title field.

References

  1. https://webaim.org/resources/contrastchecker/
  2. https://webaim.org/articles/contrast/
  3. https://www.a11yproject.com/checklist/
  4. https://www.w3.org/WAI/test-evaluate/#tools
  5. https://seirdy.one/2020/11/23/website-best-practices.html
  6. https://hidde.blog/more-common-a11y-issues/
  7. https://sommerpanage.com/posts/2022-09-16-a11y_for_everyone/
  8. https://testingaccessibility.com/
  9. https://randoma11y.com/
  10. Make your website accessible and look ok
  11. https://accessibility.huit.harvard.edu/describe-content-images
  12. https://gomakethings.com/how-to-write-good-alt-text/
  13. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
  14. https://gomakethings.com/a-case-study-in-alt-text/
  15. https://daisy.org/news-events/articles/art-science-describing-images-w/
  16. https://inclusivepublishing.org/blog/the-art-and-science-of-describing-images-part-two-w/
  17. https://inclusivepublishing.org/blog/the-art-and-science-of-describing-images-part-three-w/
  18. https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
  19. https://hidde.blog/keyboard-shortcuts/
  20. https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1#character-key-shortcuts
  21. Best practices for making things work on older browsers
  22. Atlassian Design's Accessibility Guides
  23. Accessible contrast finder
  24. ARIA Spec for the Uninitiated, video
  25. W3C HTML Validator
  26. Derek Featherstone on LinkedIn, and his homepage
  27. Accessible Frontend Components
  28. Understanding the Four Principles of Accessibility
  29. The 7 Principles of Universal Design
  30. Chrome Axe DevTools
  31. WebAIM's Guide to Conforming to WCAG2, successor to Section 508
Incoming Links

Last modified: 202301212000