Web Accessibility Workshop Notes
Building in accessibility from the beginning of the design and development process improves usability for everyone.
Here are some resources and tools that helped me learn more about Web Accessibility and the fantastic community of writers, designers and developers working on this topic. I prepared these notes for a workshop I led at UCLA. I hope it helps you explore this important field of study.
Resources
Books
- Design for Real Life by Eric Meyer and Sara Wachter-Boettcher
- Accessibility for Everyone by Laura Kalbag
- Inclusive Design Patterns by Heydon Pickering
- A Web for Everyone: Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery
- Illustrations on Flickr
- Color Accessibility Workflows by Geri Coady
Articles
- How to do an Accessibility Review
- Practical Hands-On Accessibility Testing by Nicolas Steenhout
- Web Accessibility Checklist
- Introducing the Accessibility Inspector in the Firefox Developer Tools
- Using VoiceOver to Evaluate Web Accessibility This article is designed to help users who are new to VoiceOver learn the basic controls for testing.
- How to enable VoiceOver on Mac
- imore.com accessibility page
- smashingmagazine.com category: accessibility
- alistapart.com topic: accessibility
- Keyboard Accessiblity
- Keyboard-Only Navigation for Improved Accessibility
Websites
- Inclusive design patterns by Heydon Pickering
- A11yproject.com
- The Paciello Group resources
- Inclusive design principles
- Apple’s Accessibility site for users
- Apple’s Accessibility site for developers
- Microsoft Accessibility
- Google Accessibility
- IBM Accessibility Research
- Adobe’s Accessibility page
- Adobe’s Accessibility blog
- Gov.UK Government Digital Service Accessibility site
- Section 508.gov provides Section 508 tools, resources, standards, and news.
- US Health and Human Services accessibility page
- A11y.me A good start on web accessibility for you.
Podcasts
- A11y Rules podcast hosted by Nicolas Steenhout
Newsletters
- A11y Weekly curated by David A. Kennedy
Webinars
- Creating Accessible PDFs on lynda.com
Tools
- Google lighthouse
- aXe Developer Tools by Deque Labs
- Add accessibility auditing to the Firefox Developer Tools or Chrome
- Contrast Ratio by Lea Verou
- WAVE accessibility tools
- Color contrast checker
- NVDA (Non-visual Desktop Access) is a free and open-source screen reader for the Microsoft Windows operating system
WCAG Web content accessibility guidelines
Content and interaction elements should be tested for accessibility in accordance to the WCAG 2.0 AA (the standard for UC) guidelines and success criteria.
- How to meet WCAG 2 (Quick reference)
- WCAG Web content accessibility guidelines
- W3C Evaluating Web Accessibility
- WCAG Myths
Color contrast
- Color ratio on WCAG
- Contrast checker
- WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
- Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
Is JavaScript required in WCAG?
- WCAG 2 does not prevent you from using or relying on JavaScript.
- No statement
- Ok, but remember about 1.1% of users don’t have JavaScript
Manual testing
When it is not feasible to test every single page of a website you may need to focus on just critical and representational pages.
- site templates
- interactive forms
- dynamic content pages
- dialog modals and alerts
- Key entry and exit pages (including account login and recovery pages)
- Contact and help pages
- Pages that receive the most visits and traffic identified with analytics
This article was originally posted on my personal site and is also cross-posted on github.
