WCAG - Quick reference guide by Marcelo Sales
WCAG, guide, accessibility
Windows desktop tool to test accessibility of Windows applications. Browser extension for Chrome and the new Microsoft Edge to test accessibility of webpages and web applications.
test, accessibility, windows, applications
A checklist to help you make your website more accessible and usable – available as a PDF or on Google Sheets.
accessibility, checklist
Making accessibility standards easy to understand, one success criterion at a time. AAArdvark's "WCAG in Plain English" is a user-friendly resource that simplifies the Web Content Accessibility Guidelines (WCAG) for designers, developers, and content creators. Each success criterion is broken down into clear, everyday language with practical examples and implementation tips. The guide is organized by WCAG principles, guidelines, and levels, making it easy to navigate and understand. It's an invaluable tool for anyone aiming to create more accessible digital experiences without delving into complex technical jargon.
Check any website for barriers and generate the perspective of those who face them.
Understanding Accessibility is a web resource designed to educate designers on creating inclusive digital experiences. It emphasizes the importance of color contrast, typography, layout, media, and development practices in fostering accessibility. The site provides practical guidelines and resources to help designers build websites that are usable for all users, including those with disabilities. It was developed by experts Alaïs de Saint Louvant, Studio Lutalica, and Lattimore + Friends, aiming to bridge the gap between design and accessibility.
WCAG checklist to audit accessibility compliance. This checklist uses The Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.
Contraste is a simple app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG). Contraste allows you to quickly know if a combination of colors, for a text and a background, passes accessibility thresholds defined by the W3C, and thus is accessible to users with visual impairements.
It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility.
Figma plugin and Mac OS application for quick access to WCAG color contrast ratios.
Online Color Contrast Checker
An evergreen accessibility course and reference to level up your web development.
Learning
WCAG 2.2 reference and guidelines
Guidelines
JAWS, Job Access With Speech, is the world’s most popular screen reader, developed for computer users whose vision loss prevents them from seeing screen content or navigating with a mouse.
Screenreader
NonVisual Desktop Access (NVDA) is a free and open-source, portable screen reader for Microsoft Windows. The project was started by Michael Curran in 2006.
Screenreader, free
Apple's accessibility features. All in one place. Screen reader, Magnifier, Spoken Content, Display and text sizes,..etc.
Tools
Screen reading software for people who are blind. Access information on Windows computers with intelligent speech and braille.
A web-powered screen reader. The Chrome Screen reader extension is a showcase of a fully featured screen reader for the web built using only web technologies such as html and javascript. This extension specifically works within the Chrome browser to read content aloud.
Screenreader, Chrome
Android Accessibility Suite is a collection of accessibility apps that help you use your Android device eyes-free or with a switch device.
Screenreader, Andriod
HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own "sniffs".
Client side script
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet. CSS files are available in French, English, Spanish, Greek, Arabic, Portuguese, Russian, Chinese, Polish and Dutch — and leveled or full.
Tool
The Siteimprove Accessibility Checker is your tool to evaluate any web page for accessibility issues at any given time. It provides intuitive, visual feedback about your content by highlighting detected issues right on the page
Koa11y is a desktop app that allows you to automatically detect accessibility (a11y) issues on webpages.
Desktop tool
Web accessibility evaluation tools are software programs or online services that help you determine if web content meets accessibility guidelines.
The dos and don’ts of designing for accessibility are general guidelines, best design practices for making services accessible in government.
Access Guide is a friendly introduction to digital accessibility based on WCAG 2.1 and WCAG Testing Checklist to follow.
Guide
Web Writing Checklist by The University of Kansas
Checklist
Practical approaches to Universal Design for making your website/webapp accessible to everyone
Cheatsheet
The Accessibility Cheatsheet by Ire Aderinokun
Automatically generate test cases for Web, iOS, and Android components.
Test cases
A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.
Color tool
WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities.
Lighthouse is an open-source, automated tool to help you improve the quality of web pages. You can run it on any web page, public or requiring authentication. It has audits for performance, accessibility, SEO, and more.
Chrome tool
The Accessibility Inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what’s missing or otherwise needs attention.
Firefox tool
Robust, efficient and accurate accessibility testing tools for all.
Testing tools
The Web Accessibility Assessment Framework (RAWeb) has been defined as the accessibility framework for all public sector bodies in the scope of the law. The RAWeb technical method makes it possible to check that a web page - i.e. all HTML content (HTML4, XHTML1 and HTML5) - complies with the success criteria of the Harmonised European standard EN 301 549 (.pdf) to establish the level of legal requirements in terms of digital accessibility.
Framework
Article
Tips to review a design for accessibility by The Ally Project
How to
Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.
Tool, Contrast Checker
The A11y - Focus Order plugin lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications. You can share these annotations with engineers as part of your design.
Figma plugin
Accessibility annotations are a hands-on, efficient, and scalable way for designers to communicate needs to engineers. This includes designers without prior accessibility experience. Using them ensures that designs will be compatible with various assistive technologies across web, iOS, and Android.
Figma Design file
Indeed's Annotation kit to help designers document accessibility considerations to share with developers when handing off designs.
Figma Design Kit
Include is a tool built to make annotating for accessibility (a11y) easier—easier for designers to spec and easier for developers to understand what is required. The intent is to have accessibility considerations included during the design phase of any project, and to help with the designer-developer collaboration. Ultimately creating digital experiences that anybody can use!
Figma Plugin
Quickly check your layout accessibility for various base sizes.
Accessibility Bluelines by Jeremy Elder. Includes marker symbols, documentation, and example use (Sketch, Figma, Adobe XD, and InVision Studio versions).
marker symbols, documentation
Accessibility bluelines — tools for annotating a range of accessibility considerations.
Color Oracle is a free color blindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.
simulator
From the perspective of a color blind person, some colors are impossible to distinguish. Sim Daltonism lets you visualize colors as they are perceived with various types of color blindness.
Use the Colorblind Colorlab to select safe colors earlier in the design process.
Color blind filter
Use TPGi's free color contrast checker to optimize your content - including text and visual elements - for individuals with color-blindness or low vision impairments.
Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).
The all-new Stark Suite is a powerful combination of integrated tools that help you streamline your accessibility workflow.Now, you can create and test accessible software in record time. Whether you’re building a website, online shop, mobile app, or SaaS product, Stark gives every designer, engineer, PM, and QA expert the manual and automated tools to make it accessible with ease.
Check contrast according to WCAG guidelines and apply changes directly to your artwork.
Nice Color Contrast check tool
Color contrast checker by Tanaguru
Color contrast checker by Anton Robsarve
Color suggestions right where you need them: in your browser. Polypane, the browser for developers, scans your entire page for contrast issues automatically. Check and suggests colors to meet the required WCAG or APCA contrast ratio.
Simple Color contrast checker tool by Kevin Gutowski
Evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility.
by Jan Jaap de Groot & Paul van Workum
Free book
In partnership with the Government of Ontario, The G. Raymond Chang School of Continuing Education at Toronto Metropolitan University has created a series of practical online courses, originally offered as MOOCs, then converted into interactive open textbooks with the aim of encouraging others to address topics related to digital accessibility in their own teaching.
Free Open books
ESDC / Centre of Expertise for Accessible Client Service by Government of Canada
By Laura Kalbag
A candid and practical handbook for designers. By Sheri Byrne-Haber
Sarah Horton, Whitney Quesenbery
Paid book
Richard Rutter, Patrick H. Lauke, Cynthia Waddell, Jim Thatcher, Shawn Lawton Henry, Bruce Lawson, Andrew Kirkpatrick, Christian Heilmann, Michael R. Burks, Bob Regan, Mark Urban
Design is so simple that's why it's complicated.Paul Rand
