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.

Stark
Collection by Stark

25 LINKS

W3C

Web StandardsW3C

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.

Access Guide

CommunityAccess Guide

Access Guide

Instagram account that focuses on resources & tips for digital accessibility.

UserZoom

BooksUserZoom

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.

ABC

ChecklistsABC

Accessibility for Teams

Accessibility checklist posters that illustrate the ABC's model for role-based accessibility.

UX Tricks

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

Web Accessibility Checklist

ChecklistsWeb Accessibility Checklist

Web Accessibility Checklist

A checklist for creating accessible websites and web applications.

IBM

ChecklistsIBM

IBM Accessibility Requirements

This page lists the accessibility requirements that need to be met for recent releases of several standards and regulations.

WCAG Accessibility Checklist

ChecklistsWCAG Accessibility Checklist

WCAG Accessibility Checklist

Geri Reid's WCAG checklist for designers

18F

Checklists18F

18F Accessibility Guide

This checklist helps developers identify potential accessibility issues affecting their websites or applications.

Access Guide

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

Zone

GuidesZone

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.

A11Y 101

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

Default

GuidesDefault

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.

Accessibility Design

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

What Has Focus

Software & ToolsWhat 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!

Zell

Design PatternsZell

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.

UX Planet

Design PatternsUX 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.

Devtools Accessibility

Design PatternsDevtools Accessibility

DevTools Tips

A collection of useful cross-browser DevTools tips

Default

Design PatternsDefault

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.

Default

Design PatternsDefault

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.

A11y Style Guide

Design PatternsA11y Style Guide

A11Y Style Guide

This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.

A11y Websites

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

UX Booth

Blogs & ArticlesUX 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.

UX Planet

Blogs & ArticlesUX 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.

Cookie

Blogs & ArticlesCookie

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.