Accessibility

The inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.


Articles

Stop using Material Design text fields!

Although it is common on the web, and is in some of the images below, you should never make visible form fields without a visible label.

Visual designAccessibility

HTML: The Inaccessible Parts

I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up.” In a lot places this is very true and by just using a suitable HTML element instead of a generic div or span we can have a big Accessibility impact.

Web developmentAccessibility

Accessible by design

Accessible design is not only a matter of civic-mindedness. It is becoming risky not to take users of all abilities into account. Here are some simple things we can do to help our apps and website be more accessible to all.

Accessibility

Four ways design systems can promote accessibility – and what they can’t do

Design systems help us to make our products consistent, and to make sure we’re creating them in the most efficient way possible. They also help us to ensure our products are designed and built to a high quality; that they’re not only consistent in appearance, and efficiently-built, but that they are good. And good design means accessible design.

AccessibilityDesign systems

The business case for inclusive design: The Big Hack study findings

Our latest study looks at how much businesses are missing out by not developing accessible websites, apps and products. It is part of our broader research into how inclusive design affects how disabled people choose to spend their money.

Accessibility

Designing accessible colour systems

Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens.

Visual designAccessibility

Inclusive Design: An Overview of Current Thinking

When designing products and services, you can challenge and stretch your thinking by actively engaging with people who have different perspectives and abilities.

AccessibilityDesign ethics

Unexpected accessibility tips

8+1 unexpected but practical tips for testing accessibility and inclusive design.

Accessibility

Placeholders in form fields are harmful

Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments.

Accessibility

The Business Case for Digital Accessibility

This article examines the rationale for organizations to address accessibility. It includes tangible and intangible benefits, and the risks of not addressing accessibility adequately.

Accessibility

What Is Web Accessibility?

Who you need to consider when making your website accessible and what their unique requirements are.

Accessibility


Resources

Accessibility for Teams

A ‘quick-start’ guide for embedding accessibility and inclusive design practices into your team’s workflow.

Accessibility

Accessible Colours

We evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility. If your combination does not meet the guidelines, we find the closest accessible combination by modifying the color lightness.

Visual designAccessibility

Accessible brand colors

This tool shows you how ADA compliant your colors are in relation to each other. By adding your brand’s colors on the right, you can generate a chart to see how they can be used together for accessibility, and find similar colors that work better.

Visual designAccessibility

Accessible color palette builder

This is a tool to help designers build color palettes with combinations that conform with accessibility standards.

Visual designAccessibility

Button contrast checker

Enter your domain and we test if your buttons have enough contrast and are compliant with WCAG 2.1.

Accessibility

Color Safe

Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

Visual designAccessibility

Color Tool

Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.

AccessibilityVisual design

Colorable

Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.

Visual designAccessibility

Colorblind Web Page Filter

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

Visual designAccessibility

Colorbox

Comprehensive colour palette generator, now sponsored by Lyft.

AccessibilityVisual design

Leonardo

Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.

Visual designAccessibility

Pa11y

Here at Pa11y, we think making the web more accessible improves it for everyone. So we publish a range of free and open source tools to help designers and developers make their web pages more accessible:

Visual designAccessibility

The A11Y Project

Accessibility can be a complex and difficult topic. The Accessibility Project understands this and wants to help make it easier to implement on the web.

Accessibility


Tools

Sim Daltonism

The color blindness simulator.

Visual design Accessibility

Color Oracle

Design for the color impaired. A free color blindness simulator for Windows, Mac and Linux.

Accessibility Visual design

Contrast

A macOS app for quick access to WCAG color contrast ratios.

Accessibility Visual design


Books

A Web for Everyone

If you are in charge of the user experience, development, or strategy for a web site, A Web for Everyone will help you make your site accessible without sacrificing design or innovation.

Sarah Horton and Whitney Quesenbery

Accessibility

Accessibility for Everyone

You make the web more inclusive for everyone, everywhere, when you design with accessibility in mind.

Laura Kalbag

Accessibility

Mismatch: How Inclusion Shapes Design

How inclusive methods can build elegant design solutions that work for all.

Kat Holmes

Product management Accessibility

Inclusive Components

Inclusive Components examines common web UI patterns through the lens of inclusion.

Heydon Pickering

Design systems Accessibility

Form Design Patterns

A practical guide to designing and coding simple and inclusive forms for the web.

Adam Silver

Accessibility Design patterns Design systems

Inclusive Design Patterns

This book covers all the techniques, gotchas and front-end strategies you need to be aware of when building accessible, inclusive interfaces

Heydon Pickering

HTML and CSS Accessibility Design systems Design patterns


Plugins

Sketch Cluse – Cluse is the most comprehensive color contrast plugin for Sketch that ensures your products are WCAG 2.0 accessible. Free of charge.

Stark – Helps design and build products that are accessible, ethical, and inclusive.