Accessibility Playbook Resources

Getting Started

• Introduction to Accessibility: Accessibility fundamentals by the W3C Web Accessibility Initiative.
• WCAG Guidelines 2.2: Full list of the current web content accessibility guidelines.
• WebAIM: Guidance, tools, and training resources (like checklists) that are helpful for understanding accessibility best practices.

Resources for Accessible Design

• Super Color Palette Generator: Develop accessible color palettes. This tool has a contrast checker and HSL shifting built in.
• Color Contrast Grid: This tool by EightShapes checks the contrast ratio for many different foreground and background color combinations.
• Color Contrast Analyzer: Eye-dropper tool for your OS.
• Color Blindness: An overview of different types of color-blindness.
• Let's get Colorblind: A chrome extension to simulate color-blindness.
• Tap Target Requirements: Guidelines for designing for touch devices and other modes of input.

Resources for Accessible Coding

• ARIA Authoring Practices Guide: Includes examples and tutorials for developing, using, and testing common UI patterns.
• MDN's Web Docs: Provide code examples and best practices for creating accessible HTML.

Resources for Accessible Content Creation

• Alt Text Decision Tree: Guides you through determining whether your image is decorative or needs descriptive alt text.
• Accessibility Statement Development: The W3C shows how to develop a useful, meaningful accessibility statement.
• Heading Structure Tutorial: Learn how to use headings to properly structure your content.
• Accessibility in Writing: Key WCAG success criteria for content authors.
• Tips for Writing: Basic considerations to help you write web content that is more accessible to people with disabilities.

Resources for Testing

• MagentaA11y: Comprehensive guide that explains how to test different components and what to test for.
• Harvard University's Manual Accessibility Testing Guide.
• WAVE Evaluation Tool.
• HTML Code Sniffer Bookmarklet: Run a full page scan and check the HTML for issues.
• Color Contrast Validator.
• A11y Browser Extension (Chrome): Simulate different types of color blindness and visual impairment.
• Target Size Cursor Bookmarklet: Visually check targets to see if they meet the minimum size of 44 X 44px.
• NVDA Screen Reader (Windows).
• VoiceOver Screen Reader (Mac & iOS).