Are you a person that makes digital things for other people? Awesome—because this page is all about making things for people. There are four ways you can improve your creation for everybody. All four are testable, fixable and they improve usability for everybody.
This is a copy of solidStart.info and might be less up-to-date. It's meant as a resource to be shared with others. Thanks for taking it to heart!
Table of Contents
Four things to get started
There is one big assumption in this guide. It assumes you know the basics of your tools. Validate your code.
1. Keyboard
You are not building for you.
Not everybody uses a mouse, so you shouldn’t test with just a mouse. The most universal device to test with is a keyboard. A lot of people either use a keyboard, or use something that interacts with your creation like a keyboard.
Pressing the Tab key should take you to every interactive element in an intuitive order. Pressing Shift+Tab should take you the opposite way. If you can reach and use every bit of functionality, you’re off to a good start.
People might feel lost when they don’t know where they are. Make sure it is clear which element is focused.
2. Contrast
It can be hard to communicate if your content isn’t visible to people. Contrast can help with this.
There are many tools to measure contrast by providing a ratio. The Color Contrast Analyser is used by a lot of people. You can also pick a tool from the resources, or one that might already be inside your favorite environment. Each tool will give you a contrast ratio between two colors, like a foreground and background color. The visibility of a higher contrast ratio is better. Pure black and white can be too harsh for people.
User interface components and states should have a contrast ratio of at least 3.0:1. Measure this ratio against their surrounding colors. The contrast ratio of large text (at least 24px, or at least 19px and bold) should be 3.0:1 or more. All other text should be at least 4.5:1. These are minimum requirements, not goals.
3. Alternatives
Ever tried to watch a movie in a busy place, or listen to a podcast without headphones? When you can’t see or hear, a text is a nice alternative to have!
Offer captions for video. Offer a transcript for podcasts. For images, offer text alternatives. Text alternatives should convey the purpose of the image or the content of the image. A decorative image needs no alternative.
4. Sizing
Compare a mobile phone to a tablet, a laptop or a PC. No screen size is the same. Make sure that what you make offers the same content and functionality to all sizes. Let people experience it at whatever size they want or need.
Inclusive Design
Congratulations! Follow these steps and you're helping a lot of people.
This is also just a first step, and there’s more you can do. Want to know more about Inclusive Design and WCAG (Web Content Accessibility Guidelines)? Check the resources!
Contributions
This page is not a collaboration without contributions. It has been created by Erik Kroes with the help of Eric Bailey, Ashley Bischoff, Eric Eggert, Pascal Schilp and others. Your help can make it even better. Create inclusively.
Resources
- WCAG Quick Reference
- Color Contrast Analyser
- Contrast Grid - A great tool for color palettes
- An alt Decision Tree - A W3C tool to determine the type of text alternative for images.
- The WebAIM Million - An annual accessibility analysis of the top 1,000,000 home pages
- Axe - An open source automated tool for testing partial web accessibility. Great for learning and awareness.
- Screen Reader Reference
Top comments (0)