Resources

UI Kits, Icons, Typefaces, and more to help enhance accessibility efforts in your daily workflow.

levelaccess

Resources

The 2020 State of Digital Accessibility Report The Education Sector

This report is designed to be read as a companion to the 2020 State of Digital Accessibility Report (SODAR), published by Level Access in collaboration with G3ict and IAAP.

pocket-biases

Cognitive Biases

Pocket Biases

Keep your friends close and your cognitive biases closer.

Cognitive Biases

Psychology of Design: 101 Cognitive Biases & Principles That Affect Your UX

growth-design Improve your user experience, you need to understand the biases & heuristics affecting those four decision-cycle steps.

stephanie

Cognitive Biases

52 UX Cards to Discover Cognitive Biases

Cognitive biases are psychological thought mechanisms and tendencies that cause the human brain to draw incorrect conclusions.

qvik

Accessibility Personas

Four personas to help you create accessible digital services

These four personas capture a variety of reasons why accessibility is a consideration in the first place. There are millions of people in the world who have special needs when it comes to digital services.

w3c

Accessibility Personas

Diverse Abilities and Barriers

How people with disabilities use the web.

gov-uk

Inclusive Design Generators

Home Office Posters

Home Office repository of posters covering different topics - research, access needs, accessibility and design.

microsoft

Resources

Microsoft Inclusive Design Resources

Practice new skills, develop new concepts, or create a prototype—the toolkit is made to be retrofitted to your design team’s goals. Download everything here, and start exploring!

empathy-maker

Inclusive Design Generators

Empathy maker

Generate inclusive personas to see unique disabilities and physical contexts.

idean

Inclusive Design Generators

Cards for Humanity

A practical tool for inclusive design.

component-gallery

Design Patterns

The Component Gallery

Designed to be a reference for anyone building component-based user interfaces, is an up-to-date repository of interface components based on examples from the world of design systems.

svk

Curated List

Svetlana’s Accessibility Advent Calendar 2020

Accessibility is a very huge and ever changing field with many different specializations. So it’s not possible to share all information in one article. The goal of this article is to help you better understand how accessibility benefits both your business and customers and why it is important to take action on making accessibility part of your daily business activities.

sarah-fossheim

Tutorials

How to create a screen reader accessible graph like Apple's with D3.js

Creating a accessible screen reader graph with D3.js.

how-to-write-inclusive-products

Copywriting

How to write inclusive, accessible digital products

The first goal of good UX writing is usability. Before you give digital products personality, those products need to make sense. That means the words need to work for everyone.

affecttheverb-free-stocks

Inclusive Stock Images

Disabled And Here: Free stock images

This stock collection is a disability-led effort to provide free and inclusive images from our own perspective, with photos and illustrations celebrating disabled Black, Indigenous, people of color (BIPOC).

color-contrast-grid

Figma

Color Contrast Grid

Make a grid of accessible color combinations from your document's paint colours.

apple-accessibility

Developer Tools

Accessibility - Apple Developer

Apple devices come standard with award-winning accessibility features that let people experience everything Mac, iPhone, iPad, Apple Watch, and Apple TV have to offer. And with accessibility APIs on all Apple platforms, you can make your apps seamlessly functional for a broad range of users.

smashing

Developer Tools

A Complete Guide To Accessible Front-End Components

Smashing Magazine's alphabetical list of all accessible components.

Case Study

Accessibility Design Research

A thorough case study of accessibility design for WHO (World Health Organization)

ontario-toolkit

Resources

Inclusive Design Toolkit

Use these cards early in the design process to help you sketch, plan, prototype and design content, interactions and processes.

aphasia

Guides

Designing for users with Aphasia

Aphasia: Language loss after stroke and other forms of brain injury.

w3c

Accessibility Personas

Stories of Web Users

How people with disabilities use the web.

the-big-hack

Testing & Audit

How to organise an accessibility audit

An accessibility audit, which involves user testing, is the only way to make sure that disabled people can use your website. But it’s also a great tool for raising awareness of accessibility, and the need for action, within your organisation.

overlay-factsheet

Resources

Overlay Fact Sheet

Overlays are a broad term for technologies aimed at improving the accessibility of a website by applying third-party source code (typically JavaScript) to make improvements to the front-end code of the website.

the-accidental-ally

Accessibility Personas

Accessibility Personas

With this poster series, we hope to raise awareness of the many different kinds of invisible disability. Our hope is to elevate their stories, to build compassion for one another, to explore one of our many core beliefs.

Curated List

Accessibility Guide

A curated collection of web accessibility tips, tricks, and best practices.

digital-pulse

Screen Reader

NVDA Keyboard Helpers

Visual keyboard layout of majority of the commands for NVDA screenreader software.

boia

Copywriting

Keeping Content Accessible Through Periodic Checks

If there is any content on your website that has never been tested for accessibility, either because it's new or because your website hasn't been audited before, start here.

Resources

Creating e-learning that can be used by everyone

Due to the pandemic, wherever learning is happening at the moment – whether in workplaces, universities or schools – it is happening remotely.

Mobile

Accessibility research mobile apps

Research on the accessibility of apps Which accessibility settings do the Dutch really use on their phone?

Accessibility Personas

Persona Spectrum

Why we need persona Spectrum? Something wrong?

Curated List

Accessibility Resources

Creating accessible documents and learning materials doesn’t require high tech skills or specialized programs. In fact, many of the techniques we recommend make it easier to style and design course materials.

Resources

Accessible Jeopardy Prototype

Learn accessibility by playing accessible jeopardy.

Curated List

Complete List of WAI ARIA Roles and Their Uses in 2021

Accessibility ensures that you treat users of all abilities and disabilities equally. However, you may ask what is the correct time to ensure that your website is accessible? The ideal time to make a website accessible is from the very beginning.

Resources

A11yCLE

Raising awareness of digital accessibility, inclusive design, and assistive technologies in Northeast Ohio

Icons & SVG

Accessibility Icons

Accessibility icons, which are good to understand and tested for years.

Resources

A11y - Basic Web and Document Accessibility

A esources for creating accessible web content or accessible documents (e.g., PPT, PDF, Word).

Curated List

Accessibility (A11y)

Curated collection of accessibility related resources.

Curated List

List of A11y Resources

Digital accessibility resources by Johan Ramon.

Curated List

Web Accessibility Tools & Resources

Accessibility Software, Books, Blogs, Online Tools, and More

Copywriting

Create Accessible Content

Accessibility needs relevant to content creators cluster around the need for clear and concise writing, using the formatting toolbar, and providing text alternatives.

Software & Tools

Fed A11y

Automated Monitoring of the Section 508 Accessibility of 9,241 US Federal Government Websites

Resources

AppleVis

AppleVis is the leading online resource for blind and low vision users of Apple products such as the Mac, iPhone, iPad, Apple Watch, and Apple TV.

Accessibility Personas

Alphabet of Accessibility Deck

This deck helps designers and developers think about different kinds of disability and accessibility

Accessibility Personas

An Alphabet of Accessibility Issues

This alphabet soup of accessibility is not a collection of personas.

Accessibility Personas

Creating accessible personas

Personas are used across organisations in UX or marketing to help businesses better understand the customers they are serving. Like any deliverable, it’s important to consider the accessibility of personas so that your audience can understand and engage with them.

Accessibility Personas

Accessibility Personas

The GDS Accessibility team has created 7 different accessibility personas. Each persona has different access needs.

Typeface

Braille Neue

A Universal Typeface by Kosuke Takahashi That Combines Braille and Visible Characters.

Resources

Accessibility Memes

There aren’t any. So I made some.

Curated List

My top 10 favorite disability/ accessibility articles of the year

Picking your favorite articles when you’ve written 145 of them in the past 12 months is like picking your favorite kids.

Resources

Contrasting Accessibility with Color Contrast

A talk about the current state of color contrast on the web and a walk through why designers and developers should practice accessibility.

Curated List

Accessibility 2020 - The Web Almanac by HTTP Archive

Web accessibility is about achieving feature and information parity and giving complete access to all aspects of an interface to disabled people. A digital product or website is simply not complete if it is not usable by everyone. If it excludes certain disabled populations, this is discrimination and potentially grounds for fines and/or lawsuits.

Curated List

A11yBy

Curated list of accessibility news, tips, hints, and resources.

Testing & Audit

Testing Web Accessibility

When we develop a new web application, we often put a lot of work on the design, on making it beautiful and usable. In other words, we want our web app to be effective, efficient, and satisfying for the user. But a lot of times we don’t think about the user experience for everyone, people with or without disabilities, including people with age-related impairments.

Resources

Accessibility Skills Hiring Toolkit

The toolkit currently provides Position Description Language and Screening and Interview Questions. Use the following links to download the complete toolkit, or you can download a role-specific toolkit.

Resources

Comebacks for Five (Wrong) Arguments Against Accessibility

As I and several other a11y advocates know, getting others to care about accessibility isn't easy. It should be, considering the many moral and business arguments for it, but it isn't. I've repeated these arguments many times online. Sometimes as direct responses, other times as painful screams into the void. There's still much work to do.

Resources

a11y memes

Gallery of a11y memes. You can also submit your own a11y meme.

Resources

A11Y Challenge

There are no shortcuts to accessibility. But take our short quiz on the reasons for building accessible sites.

Curated List

Resources for Designing for the Colorblind

A collection of articles, examples and tools to help design for the colorblind.

Resources

Periodic Table of ARIA 1.0 Roles

Periodic Table of ARIA 1.0 Roles

Resources

Web Components & Accessibility

A presentation about web components & accessibility.

Curated List

A11y Advent Calendar

A accessibility tip a day in that article. Nothing too ground-breaking, and I expect a lot of these tips to be common knowledge for many of you, yet we’ll end the month with a nice list of do’s & don’ts.

Testing & Audit

Accessibility testing: tips and best practices from industry leaders

Lots of companies want to conduct accessibility evaluations by conducting usability testing for people with disabilities. It’s the right thing to do, and companies genuinely want to be accessible to all. Sometimes, however, the challenge feels so steep that it’s hard to even know where to begin.

Curated List

80 Web Accessibility Resources & Tools (For 2020)

This collection of 80 web accessibility resources is aimed at anyone interested in learning how to design, develop and test inclusive and accessible websites, apps and online documents. Because making the web accessible ensures equal access to the roughly 1 billion people in the world with disabilities.

Testing & Audit

Be Inclusive

Be Inclusive is a web app that helps you define, track, and share web accessibility audits. We simplify the admin part of the process so manual auditing is easier to manage and share with teammates & clients.

Icons & SVG

Ikonate

Fully customisable & accessible vector icons

Icons & SVG

How Can I Make My Icon System Accessible?

Learning how to make an icon system accesible.

Curated List

Ferramentas

A curated list of accessibility resources by acessibilidade.gov.pt.

Curated List

a11yTools Resources

Tools and resources curated by Paul J. Adam.

Curated List

The Great Accessibility Blogs Roundup

List of influencers in the accessibility space & made this comprehensive list of accessibility blogs. As the accessibility space is very dynamic keeping updated about various accessibility techniques, tips & tricks will be the key for success & we hope these blogs will come in handy.

Testing & Audit

a11y-evaluation-tools

A Google spreadsheet that includes a list of tools that can be used to evaluate the accessibility of web content and non-web content (mobile applications, desktop applications, documents)

Mobile

Build more accessible apps

Accessibility is an important part of any app. Whether you're developing a new app or improving an existing one, consider the accessibility of your app's components.

Curated List

A11Y Websites

Showcase of accessible websites. These websites have been assessed through both automated and manual testing against the success criteria set out in the Website Content Accessibility Guidelines (WCAG) 2.1 to grade AA and above.

Testing & Audit

How to test for accessibility

These are tasks you can undertake to test your service for accessibility. Some of these will reference the common testing methods. As a bare minimun we suggest you perform the generic tasks along with at least one screen-reader.

Curated List

40 Tips For Inclusive And Accessible User Interface Design

Before diving into the tips, just one note on terminology. When we’re designing, it’s tempting to think in terms of “regular” users as the main focus, and then to treat users with any kind of impairment as an edge case for which we might need to compromise our core design.

Curated List

Tools for designing good-looking accessible interfaces

It's important for me that everything I design is both accessible, ethical and user friendly. And to be fair, the three really go hand-in-hand. A product cannot be friendly if it's harmful or inaccessible.

Testing & Audit

My Approach To Mobile Accessibility Testing

When I get asked by team members about mobile accessibility, I am often asked how difficult it is compared to desktop accessibility testing. Often the questions indicate how many assume that mobile accessibility is a completely different beast to traditional functional and accessibility software testing.

Curated List

WCAG 2.1: The Area Of Effect For Mobile Accessibility

Accessibility guidelines are not a recent trend, but with events in the Digital World, they are taking more prominent roles within companies.

Resources

Improve accessibility with the Accessibility Checker

Before sending your email message or sharing your document or spreadsheet, run the Accessibility Checker to make sure your Microsoft Office content is easy for people of all abilities to read and edit.

Resources

Disability Language Style Guide

This style guide, developed by the National Center on Disability and Journalism at Arizona State University, is intended to help. It covers almost 200 words and terms commonly used when referring to disability, most of which are not covered in The Associated Press style guide.

Resources

Ableism/Language

The terms that are listed below are part of an expanding English-language glossary of ableist words and terms.

Curated List

A11y Resources

Checkout these recommended resources for furthering your journey in web accessibility.

Resources

Accessibility Glossary

Select a letter to browse the glossary alphabetically. Next, click on a designation to consult its French equivalent and other terminological information (which may vary from one entry to another) that includes other designations, definitions, notes and usage examples.

Resources

Accessibility Glossary of Terms

Accessibility Glossary of Terms brought to you b Accessible360.

Resources

Accessibility Terms

If you are new to accessibility you may have noticed there are many acronyms, technical terms and other information directly related to accessibility, disabilities, and advocacy. Here is a glossary of terms to assist you.

Resources

Accessibility Glossary Terms

Accessibility Glossary Terms

Curated List

Accessibility Reviews

A community-driven resource to both find and share information on the accessibility of tools, services, platforms, and so on.

inclusiveicons

Icons & SVG

Inclusive icons

An inclusive icons designed by Audrey Marzin and Florent Lenormand.

brailleinstitute

Typeface

Atkinson Hyperlegible Font

Atkinson Hyperlegible font is named after Braille Institute founder, Robert J. Atkinson. What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability.

inclusionhub

Curated List

Web Accessibility Resources

A directory of accessibility resources, tools, services and platforms by InclusionHub.

Curated List

InclusionHub Digital Inclusion Resources

Web accessibility resources tools, services and platforms.

Curated List

Accessibility tools for designers and developers

In this guide, you’ll find accessibility testing tools, color contrast checkers and color blindness simulators, both for designers and developers who work with web and mobile.

Resources

WP Accessibility Resources

Download all WP Accessibility talks and online session.

deque

Curated List

Web Accessibility News & Resources

Web accessibility news and resources, curated by Deque Systems.

Accessibility Personas

Bringing inclusive design to life through Personas

Accessibility personas — Olivia, Keith, Colin, Serena, Arturo, and Edith

Resources

Products and Features – Google Accessibility

Explore some of Google's accessibility features and products.

Resources

Microsoft Windows 10 Accessibility Features

Windows 10 brings meaningful innovation to all people, whether you have a disability, a personal preference, or a unique work style.

coloraccessibility

Curated List

Color Accessibility: Tools and resources to help you design inclusive products

A curated list of all resources, tips and tools regularly use to build and check the color accessibility by Stephanie Walter.

Curated List

Accessibility tools for Developers and QAs

There are plenty of Accessibility tools that can help us improve our web sites/apps for more people. Choose your flavor and begin testing.

Curated List

Accessibility Resources

A curated list of accessibility resources by Ian Routledge.

Mobile

Mobile Web Accessibility

Mobile Web Accessibility Check is a complete mobile solution to enable verification of mobile web accessibility against internationally recognized accessibility guidelines.

Resources

Apple's Accessibility Videos

Watch all Apple's accessibility videos.

UI KIT

Pixel Lite - Accessibility-first UI kit available in many tech flavors

A modern accessibility-first UI Kit crafted by Themesberg.

Figma

Color Accessibility

The following assignment is broken down into three distinct units. These units will test your ability to identify vision deficiencies, utilize tools to assist in making corrections, and your creativity in altering existing designs to the benefit of your users.

Mobile

Accessibility – React

Web accessibility (also referred to as https://en.wiktionary.org/wiki/a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.

Inspiration

Meet the teacher changing how people think about disability

Teaching special education takes an amazing person to figure out exactly what works for each child, and talking to her gave me an even greater appreciation for these educators. Amy’s students are lucky to have her in their corner.

Mobile

Accessibility and React Native — From 0 to 100

A year ago, I was tasked with making an app accessible. The app was written using React Native and had not been designed with accessibility in mind. If you’re about to undergo a similar activity in React Native, I believe this story will help you hit the ground running (or at least speed walking).

Figma

Color Filters

A Figma plugin for color blindness accessibility.

peoplesearch

Curated List

The big accessibility round-up

Tools, inspiration, resources and events.

comica11y

Inspiration

ComicA11y

An all inclusive online comic experiment. Because comics should be universal.

yana

People to Follow

Yana Gevorgyan

Yana is a multi-disciplinary product designer and creator of Cluse, the most comprehensive color contrast plugin for Sketch that ensures your products are WCAG 2.0 accessible.

anand

People to Follow

Anand Chowdhary

Anand Chowdhary is a cre­ative tech­nol­o­gist and en­tre­pre­neur. He is the co-founder and CEO of Oswald Labs, an ac­ces­si­bil­ity tech­nol­ogy com­pany.

catnoone

People to Follow

Cat Noone

Cat Noone is the CEO of Stark, a suite of integrated accessibility compliance tools for software teams. A solid a11y advocate and evangelist.

madalynparker

People to Follow

Madalyn Parker

Madalyn is a Staff Engineer on the Core team at Gatsby, wielding accessibility knowledge to implement accessible solutions at the framework level and making it easier to build an accessible site out of the box.

Curated List

Accessibility tools and tips for Designers

So you want to include accessibility in your design work-flow? Let’s explore how.

accessibilityuikit

UI KIT

Accessibility UI Kit for Adobe XD

A user interface kit with a focus on accessibility. Buttons, texts, switches, sliders, tables, graphs, links, accessibility guidelines, checklist and more. A series of content and guidelines that will help you make your website more and more inclusive.

digitalaccessibility

Curated List

Digital Accessibility Resources

Collection of a wide variety of accessibility resources & categorized them accordingly.

thebottomdrawer

Curated List

The Bottom Drawer

Kim Krause Berg curates and listed some of the most useful accessibility tools and resources.

opendyslexic

Typeface

OpenDyslexic

OpenDyslexic is a typeface designed against some common symptoms of dyslexia.

dyslexie

Typeface

Dyslexie Font

Dyslexie font is a typeface – specially designed for people with dyslexia – which enhances the ease of reading, learning and working.

designweb

Curated List

The Directory of the Web

Online tools for checking webpages for compliance with standards for accessibility to those with visual disabilities.

focus-state

Inspiration

Focus state ideas

Many people exclusively use keyboards to navigate, and rely on the focus state to know where they are on the page. Focus state users may be a person with limited mobility, someone using a screen reader, or someone who wants to use their keyboard to quickly navigate.

paired-colors

Inspiration

Accessibility Rating of Paired Colors

A collection of color pairings and their WCAG 2.0 accessibility ratings being compiled for the Frontline Design System.

libras

Inspiration

Libras app Tutorial

LIBRAS its a app that allows interaction between deaf, mute and listens with no problem in translation, LIBRAS stand for Brazilian sign language a native language developed for communication using hands.

safari

Inspiration

This is how Safari should look like

Don't try to copy good experience from the desktop, create great experience on mobile!

quickwins

Inspiration

Accessibility Quick Win

Daniel Sears designed these forms, buttons, tabs, nav bars, and so on accessibility friendly for their Quick Wins process at work.

accessibility-icons

Inspiration

Accessibility Icons

Lilla Bardenova's created these nifty and crisps accessibility icons for Validation Suite.

uikit-color

UI KIT

UI Kit - Color accessibility

Anshita Srivastava's created this UI Kit that has color accessibility standard in mind.

figma-contrast

Inspiration

Figma Contrast Checker

A simple idea to check to color-contrast ratios.

colorpalette

UI KIT

Colour palette with names and HEX

Gytis Ceglys's shares these colour palettes with names and HEX code. Designed by WSAG AAA guidelines. Suitable for small and large text.

lucent

Color

UI Color Palette - Lucent Design System

Creating a family of colors, each with a primary shade that could pass basic accessibility standards as text on both black and white.

vizpallete

Inspiration

Data vis palette by Jeremy Elder for GitLab

Working through the creation of an accessible light/dark UI color palette for data visualization. Combinations explore uses for sequential, categorical, and divergent data by Jeremy Elder.

adagradient

Color

ADA Compliant Gradient Color Palette

Kaitlyn shared this ADA compliant gradient color palette for your inspiration.

contrast-checker

Inspiration

Contrast Checker

A contrast checker idea from Nathan Walker to respond automatically to whatever background is behind the text. A bit like spellcheck in word processors. Inspired by Stark's accessibility tool.

accessibilitycover

Inspiration

Accessibility Cover

Designed by Alejandro Ramirez, this cover is for a blog article which puts together a list of ten web accessibility guidelines.

amazondesign

Inspiration

Global Accessibility Awareness Month Poster Series

he first set in a series of posters that were designed and displayed within the Amazon campus during Global Accessibility Awareness Month created and designed by Gretchen Nash.

uxpin

Inspiration

Contrast Analyzer and Color Blindness Simulator for UXPin

UXPin’s accessibility features that you can specify whether to comply with WCAG 2.0 AA and AAA levels. The Contrast Analyzer will automatically inform you when the contrast is insufficient. Additionally, UXPin’s Color Blindness Simulator shows your design as perceived by a person with one of eight types of color blindness!

accessa

Inspiration

Accessa - Accessibility Plugin Widget Mockup

Accessa is a tool for making your website more accessible plus more. It has a ton of options for customization, and it sits right on any webpage, minimized until opened. The configuration tool is broken down into 3 sections for types of adjustments.

representation

Inspiration

Representation & Inclusivity

An illustration designed and illustrated by Riley Caroll for representation and inclusivity.

bbc

Inspiration

BBC – Access All Areas

These animations featured on digital posters promoting the Access All Areas accessibility awareness day at the BBC.

accessiblepalette

Inspiration

Accessible Palette Contrast

Inspired by the Contrast Grid from Eight Shapes, Jeremy Edler had an idea to incorporate accessibility features within the design tool itself, such as color palettes contrast.

font-settings

Inspiration

Font Settings Tool

Felix Lee re-imagined the Font Settings tool. Giving different users an option to select with different fonts, font sizes and swatch options to help users squinting their eyes.

awesome-accessibility

Curated List

Awesome A11y

A curated list of awesome accessibility tools, articles, and resources. Inspired by awesome-svg, awesome-webcomponents and awesome-flexbox.

thebighack

Curated List

The Big Hack Resources

Articles, guides and accessibility resources for businesses

a11yproject

Curated List

The A11Y Project Resouruces

All about softwares, books, blogs, online tools and more.

accessibility-bluelines

UI KIT

Accessibility Bluelines

A set of accessibility bluelines to help annotate design files for handoff to dev and QA

Curated List

Accessibility Wins

Showcasing accessible user interfaces and tools. Curated by Marcy Sutton.

empathyprompts

Inclusive Design Generators

Empathy Prompts

Prompts and ideas to help consider Inclusive Design principles when making things for others to use.