Solid Start
Tags: html, a11y, webdev, beginners
Published: 2020-08-04 10:18:44

---
title: Solid Start 
published: true
description: Are you a person that makes digital things for other people? Awesome—because this page is all about making things for people.
tags: html, a11y, webdev, beginners
canonical_url: https://www.solidstart.info
//cover_image: https://direct_url_to_image.jpg
---

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](https://www.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

<ul>
  <li><a href="#four-things">Four things to get started</a>
    <ol>
      <li><a href="#keyboard">Keyboard</a></li>
      <li><a href="#contrast">Contrast</a></li>
      <li><a href="#alternatives">Alternatives</a></li>
      <li><a href="#sizing">Sizing</a></li>
    </ol>
  </li>
  <li><a href="#inclusive-design">Inclusive Design</a></li>
  <li><a href="#contributions">Contributions</a></li>
  <li><a href="#resources">Resources</a></li>
</ul>

<h2 id="four-things">Four things to get started</h2>

There is one big assumption in this guide. It assumes you know the basics of your tools. Validate your code.

<h3 id="keyboard">1. Keyboard</h3>

**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 <kbd>Tab</kbd> key should take you to every interactive element in an intuitive order. Pressing <kbd>Shift+Tab</kbd> 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.

<h3 id="contrast">2. Contrast</h3>

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](https://developer.paciellogroup.com/resources/contrastanalyser/) 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.

<h3 id="alternatives">3. Alternatives</h3>

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.

<h3 id="sizing">4. Sizing</h3>

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.

<h2 id="inclusive-design">Inclusive Design</h2>

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!

<h2 id="contributions">Contributions</h2>

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.

- Contribute on [GitHub](https://github.com/erikkroes/solidStart)
- Join a weekly accessibility stream on [Twitch](https://twitch.tv/erikKroes)
- Follow on [Twitter](https://twitter.com/erikKroes)

<h2 id="resources">Resources</h2>

- [WCAG Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
- [Color Contrast Analyser](https://developer.paciellogroup.com/resources/contrastanalyser/)
- [Contrast Grid](https://contrast-grid.eightshapes.com/) - A great tool for color palettes
- [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) - A W3C tool to determine the type of text alternative for images.
- [The WebAIM Million](https://webaim.org/projects/million/) - An annual accessibility analysis of the top 1,000,000 home pages
- [Axe](https://www.deque.com/axe/) - An open source automated tool for testing partial web accessibility. Great for learning and awareness.
- [Screen Reader Reference](https://dequeuniversity.com/screenreaders/)

<h3 id="courses">Courses</h3>

- [Web Accessibility by Google at Udacity](https://www.udacity.com/course/web-accessibility--ud891)
- [Digital Accessibility by University of Southampton at Future Learn](https://www.futurelearn.com/courses/digital-accessibility)
- [ICT Accessibility by Georgia Tech at edX](https://www.edx.org/course/information-and-communication-technology-ict-acces)