Web Accessibility Workshop Notes
Here are my notes from a Web Accessibility workshop I led at the UCLA Health System on May 30, 2018.
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.
- 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
- Color Accessibility Workflows by Geri Coady
- 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 Accessibility
- Keyboard-Only Navigation for Improved Accessibility
- Inclusive design patterns by Heydon Pickering
- 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.
- A11y Rules podcast hosted by Nicolas Steenhout
- A11y Weekly curated by David A. Kennedy
- Creating Accessible PDFs on lynda.com
- 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 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.
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