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.
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 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.
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.
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.
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.
When designing products and services, you can challenge and stretch your thinking by actively engaging with people who have different perspectives and abilities.
8+1 unexpected but practical tips for testing accessibility and inclusive design.
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.
This article examines the rationale for organizations to address accessibility. It includes tangible and intangible benefits, and the risks of not addressing accessibility adequately.
A ‘quick-start’ guide for embedding accessibility and inclusive design practices into your team’s workflow.
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.
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.
This is a tool to help designers build color palettes with combinations that conform with accessibility standards.
Enter your domain and we test if your buttons have enough contrast and are compliant with WCAG 2.1.
Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.
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.
Use the Colorblind Colorlab to select safe colors earlier in the design process.
Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.
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:
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.
You make the web more inclusive for everyone, everywhere, when you design with accessibility in mind.
How inclusive methods can build elegant design solutions that work for all.
Inclusive Components examines common web UI patterns through the lens of inclusion.
A practical guide to designing and coding simple and inclusive forms for the web.