ACCESSIBILITY

Accessibility Assistant

The A11y - Focus Order plugin is now the Accessibility Assistant! It not only lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications, but also provides checklists and notes to review designs for accessibility before you spec.

A11y - Color Contrast Checker

Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards. This plugin checks the color contrast ratio of all visible text in a frame, and it provides feedback on whether it meets WCAG’s AA and/or AAA level compliance. It also provides color sliders that allow users to adjust the colors and understand how the corresponding contrast ratio changes in real-time.

axe for Designers: A Free Accessibility Plugin

With features like A11y Scan (previously auto scan), wcag Color Contrast Checker, Focus Order, Annotations, and more, you can quickly and easily identify any accessibility issues before your design goes into production. And if you're already in the middle of a project, our tool can help you analyze and fix accessibility issues that have cropped up.

Lottie Accessibility Analyzer

Make Lottie Animations Accessible. Use Lottie Accessibility Analyzer to detect and fix issues in your dotLottie or Lottie JSON files. Simply upload a file to ensure inclusivity.

WCAG Guide

WCAG - Quick reference guide by Marcelo Sales

Accessibility Insights by Microsoft

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.

Web Accessibility Checklist

A checklist to help you make your website more accessible and usable – available as a PDF or on Google Sheets.

WCAG in plain english by Aaardvark

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.

a11y-ai

Check any website for barriers and generate the perspective of those who face them.

Understanding Accessibility

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.

The A11Y Project

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

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.

whocanuse.com

It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

Hexnaw

Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility.

Contrast

Figma plugin and Mac OS application for quick access to WCAG color contrast ratios.

Web AIM

Online Color Contrast Checker

Learn Accessibility

An evergreen accessibility course and reference to level up your web development.

Web Content Accessibility Guidelines (WCAG) 2.2

WCAG 2.2 reference and guidelines

JAWS

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.

NV Access

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.

Vision by Apple

Apple's accessibility features. All in one place. Screen reader, Magnifier, Spoken Content, Display and text sizes,..etc.

Dolphin ScreenReader

Screen reading software for people who are blind. Access information on Windows computers with intelligent speech and braille.

Screen Reader - Chrome Extension

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.

Android Accessibility Suite by Google (Screen reader for Android devices)

Android Accessibility Suite is a collection of accessibility apps that help you use your Android device eyes-free or with a switch device.

HTML_CodeSniffer

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".

a11y.css’ documentation

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.

Siteimprove Accessibility Checker

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

Koa11y is a desktop app that allows you to automatically detect accessibility (a11y) issues on webpages.

Web Accessibility Evaluation Tools List

Web accessibility evaluation tools are software programs or online services that help you determine if web content meets accessibility guidelines.

WCAG for designers

Dos and don'ts on designing for accessibility by GOV.UK

The dos and don’ts of designing for accessibility are general guidelines, best design practices for making services accessible in government.

Access Guide

Access Guide is a friendly introduction to digital accessibility based on WCAG 2.1 and WCAG Testing Checklist to follow.

Web Writing Checklist

Web Writing Checklist by The University of Kansas

Accessibility Cheatsheet

Practical approaches to Universal Design for making your website/webapp accessible to everyone

The Accessibility Cheatsheet

The Accessibility Cheatsheet by Ire Aderinokun

MagentaA11y

Automatically generate test cases for Web, iOS, and Android components.

colorandcontrast.com

A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.

WAVE Web Accessibility Evaluation Tools

WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities.

Lighthouse

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.

Accessibility Inspector

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.

Axe tools by Deque

Robust, efficient and accurate accessibility testing tools for all.

Web Accessibility Assessment Framework (RAWeb 1)

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.

Accessibility guidelines for UX Designers

Reviewing a design for accessibility

Tips to review a design for accessibility by The Ally Project

Contrast Grid

Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.

A11y - Focus Order

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.

Accessibility Annotation Library

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.

A11y Annotation Kit

Indeed's Annotation kit to help designers document accessibility considerations to share with developers when handing off designs.

Include – Accessibility Annotations by Ebay

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!

Text Resizer - Accessibility Checker

Quickly check your layout accessibility for various base sizes.

Accessibility Bluelines

Accessibility Bluelines by Jeremy Elder. Includes marker symbols, documentation, and example use (Sketch, Figma, Adobe XD, and InVision Studio versions).

Accessibility bluelines Figma File

Accessibility bluelines — tools for annotating a range of accessibility considerations.

Color Oracle

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.

Sim Daltonism - The color blindness 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.

Colorblind Web Page Filter

Use the Colorblind Colorlab to select safe colors earlier in the design process.

Colour Contrast Analyser (CCA)

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 by Willowtree

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).

Stark - Contrast & Accessibility Checker

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.

Color contrast by Aleksandra Walczak

Check contrast according to WCAG guidelines and apply changes directly to your artwork.

Contrast Report

Nice Color Contrast check tool

tanaguru contrast finder

Color contrast checker by Tanaguru

Color Review

Color contrast checker by Anton Robsarve

Color contrast checker by Polypane

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.

Color & Contrast Picker

Simple Color contrast checker tool by Kevin Gutowski

Accessible colors

Evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility.

Appt Accessibility Handbook

by Jan Jaap de Groot & Paul van Workum

Digital Accessibility Teaching and Learning Resources

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.

AccessAbility Playbook

ESDC / Centre of Expertise for Accessible Client Service by Government of Canada

Accessibility For Everyone

By Laura Kalbag

Giving a damn about accessibility

A candid and practical handbook for designers. By Sheri Byrne-Haber

A Web For Everyone: Designing Accessible User Experiences

Sarah Horton, Whitney Quesenbery

Web Accessibility: Web Standards and Regulatory Compliance

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