Diagram Views

Accessibility Playbook Resources

Useful accessibility resources that are free for web designers, web developers, and content creators to help them build more inclusive websites.

Published
October 3, 2024

By
Dennis Kardys

Reading time
2 minutes

Topics

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.

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.

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.

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.

MagentaA11y: Comprehensive guide that explains how to test different components and what to test for.
AAArdvark: An all-in-one testing, monitoring, issue management, and reporting platform
AccessibilityChecker: A free website accessibility automated scan for WCAG 2.1 compliance issues. Just insert your URL and get instant results.
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).