Accessibility
The inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.
Articles
UX and the Importance of Web Accessibility
– 12 April 2021
Web accessibility is about giving everyone access to the same information, regardless of the impairments users may have.
Why UX should still care about international design standards
UX Booth
– 2 March 2021
By becoming familiar with standards, it is possible to instantly leverage the experience of industry experts and adopt best practices.
Material Design text fields are badly designed
Smashing Magazine
– 24 February 2021
Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead.
Stop using Material Design text fields!
– 6 March 2020
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.
HTML: The Inaccessible Parts
– 28 February 2020
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.
Accessible by design
Prototypr
– 25 February 2020
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.
Four ways design systems can promote accessibility – and what they can’t do
– 23 December 2019
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.
The business case for inclusive design: The Big Hack study findings
– 19 November 2019
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.
Designing accessible colour systems
– 15 October 2019
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.
Inclusive Design: An Overview of Current Thinking
UX Matters
– 25 August 2019
When designing products and services, you can challenge and stretch your thinking by actively engaging with people who have different perspectives and abilities.
Unexpected accessibility tips
– 6 August 2019
8+1 unexpected but practical tips for testing accessibility and inclusive design.
Placeholders in form fields are harmful
– 10 September 2018
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.
The Business Case for Digital Accessibility
– 11 May 2018
This article examines the rationale for organizations to address accessibility. It includes tangible and intangible benefits, and the risks of not addressing accessibility adequately.
What Is Web Accessibility?
A List Apart
– 29 April 2004
Who you need to consider when making your website accessible and what their unique requirements are.
Resources
Accessibility for Teams
A ‘quick-start’ guide for embedding accessibility and inclusive design practices into your team’s workflow.
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:
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.
Tools
Button contrast checker
Aditus
Enter your domain and we test if your buttons have enough contrast and are compliant with WCAG 2.1.
Colorable
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.
Accessible brand colors
Accessible brand colours
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.
Color Oracle
Design for the color impaired. A free color blindness simulator for Windows, Mac and Linux.
Colorblind Web Page Filter
Toptal
Use the Colorblind Colorlab to select safe colors earlier in the design process.
Color Safe
Colorsafe
Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
Accessible Colours
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.
Accessible color palette builder
Accessible color palette builder
This is a tool to help designers build color palettes with combinations that conform with accessibility standards.
Color Tool
Google Material Design
Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.
Leonardo
Leonardo
Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.
Courses
Accessibility: how to design for all
Gain practical, hands-on skills that’ll enable you to assess and optimize for common accessibility issues and improve the quality of the user experience by avoiding classic mistakes.
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.
Accessibility for Everyone
You make the web more inclusive for everyone, everywhere, when you design with accessibility in mind.
Mismatch: How Inclusion Shapes Design
How inclusive methods can build elegant design solutions that work for all.
Inclusive Components
Inclusive Components examines common web UI patterns through the lens of inclusion.
Form Design Patterns
A practical guide to designing and coding simple and inclusive forms for the web.
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
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.