Solid Start

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 ways are testable, fixable and they improve usability for everybody.

Table of Contents

Four improvements

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. Your help can make it even better. Create inclusively.

Resources

Courses