Accessibility Tips, Tricks, and Resources for Designers
Kickstart your design with these easy, illustrated, and quickly spot WCAG References, Levels, and Accessibility Compliances with these guides and checklists.
Web Standards • W3C
Designing for Web Accessibility
Web Accessibility Initiative (WAI) | W3C - Tips to help you getting started making your user interface design and visual design more accessible to people with disabilities.
Community • Access Guide
Access Guide
Instagram account that focuses on resources & tips for digital accessibility.
Books • UserZoom
Accessibility for Digital Experiences 101
More than 20% of people in both the UK and the US have some form of disability. Despite this, accessibility tends to be overlooked when designing digital experiences.
Checklists • ABC
Accessibility for Teams
Accessibility checklist posters that illustrate the ABC's model for role-based accessibility.
Checklists • UX Tricks
WCAG 2.1 Checklist-Guide to Accessibility
Disabilities are very common, but also, the advantages of meeting accessibility standards without us having to design specialized or segregated experiences for disabled users, also apply to those that aren’t disabled. It‘s a win-win for everybody.
Checklists • Web Accessibility Checklist
Web Accessibility Checklist
A checklist for creating accessible websites and web applications.
Checklists • IBM
IBM Accessibility Requirements
This page lists the accessibility requirements that need to be met for recent releases of several standards and regulations.
Checklists • WCAG Accessibility Checklist
WCAG Accessibility Checklist
Geri Reid's WCAG checklist for designers
Checklists • 18F
18F Accessibility Guide
This checklist helps developers identify potential accessibility issues affecting their websites or applications.
Guides • Access Guide
Access Guide
Access Guide is a friendly introduction to digital accessibility - specifically to help understand WCAG 2.1 (Web Content Accessibility Guidelines), the official resource for legal compliance.
Guides • Zone
Easy Lookup Web Accessibility Guidelines
We want the process of making an accessible website to be easier. Therefore, these guidelines contain all of the criteria needed to ensure a website can be used by every kind of user. They incorporate much of WCAG 2.0, but are not intended to be a substitute for the official W3C documentation.
Guides • A11Y 101
Introduction to Accessibility
So you want to dig into the topic of (web) accessibility? Wonderful! But you’re not sure where to start? Don’t worry - you're not alone. Getting going can be overwhelming, but it doesn't have to be. That's what this site is for - to introduce you to accessibility.
Guides • Default
WCAG 2.1 Guidelines Explained with Examples
This set of guidelines are meant to enhance mobile functionality to be friendlier and give end-users extreme flexibility.
Guides • Accessibility Design
Accessibility in Design
This guide introduces four different types of disabilities and offers actionable steps that we as designers can take to ensure that our products work for everyone.
Software & Tools • What Has Focus
What has focus?
When something receives keyboard focus via Tab key, the current element will be logged to the JavaScript console so you can determine which element currently has focus!
Design Patterns • Zell
Designing a focus style
Focus is important. It tells us what element we’re currently focusing on. Most developers suggest keeping the default focus style.
Design Patterns • UX Planet
Active, Hover, and Focus States for Designers
It can be helpful to understand these concepts and their differences during both the design and development process.
Design Patterns • Devtools Accessibility
DevTools Tips
A collection of useful cross-browser DevTools tips
Design Patterns • Default
Accessible Icon Buttons
An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text.
Design Patterns • Default
Nutrition Cards for Accessible Components A11Y Expectations
A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.
Design Patterns • A11y Style Guide
A11Y Style Guide
This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.
Resources • A11y Websites
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.
Blogs & Articles • UX Booth
Accessibility for Visual Design
Overall, usability testing with people with disabilities should feel the same as usability testing with the general population. I recommend using the same tasks for all participants, regardless of their abilities, as the goals of the site or app should be the same for everyone.
Blogs & Articles • UX Planet
Legibility in User Interfaces Guide
Sometimes, users find it hard to read microCopy on a mobile or desktop screen either because the characters are cluttered, hazy, or too small to read.
Blogs & Articles • Cookie
Cookie banners and accessibility
Yes, these do matter, especially if you are using a cookie banner to handle your privacy disclosures, super especially if you can be sued in California.