The ultimate guide for creating accessible tech (Website Edition)

An easy tutorial to get started with accessibility!

Accessibility pays off

Many of you may have wanted to create your own website at some point.

No matter if you are a designer, a developer or a business owner, creating a simple template-based website is an easy task nowadays, but achieving the highest standards in your product becomes a much bigger effort.

Imagine that after all your efforts defining your website features, the user experience, selecting the colors, the elements disposition, and probably investing time and money in design and development, your website turns out to be available only for blonde people. Sounds crazy, right?

Who would invest time and money in creating such a limited and non-inclusive product?

Well, something very similar happens in most of the Internet websites. According to a recent study conducted by WebAIM, 97.8% of home pages have significant accessibility failures. This leads to an increased risk of automatically excluding a 15% of the world population potential visitors.

In this tutorial, I will show you 5 essential steps to make your web accessible. These steps are included in Web Content Accessibility Guidelines 2.1 (WCAG) — the main standard for web content accessibility — and are described as Level A rules.

The Level A checkpoints have the biggest impact on accessibility and must be satisfied to ensure your site becomes accessible (at least for some groups).

Be prepared to see some stripes of code, but don’t be scared! It will be basic markup language everyone can easily understand.

The 5-step process for accessible website creation

1. Visible images for everyone

Text alternatives must be included on every image and graphical button included in your website. The purpose of Alt Text is to provide and alternative way to ‘show’ the information that an image provides.

Making your images accessible is as simple as including the alt attribute. Let’s see an example of how the next image could become accessible by just adding its content description:

<img src=“search.png” alt=“Magnifying glass”>

Many times, your images will include a link or trigger an action. In that case, instead of describing the image, you must describe its purpose. If our magnifying glass image was linked to show a search bar when clicked, you should rather use the following code:

<img src=“search.png” alt=“Open search”>

Your image content is complex — like a chart, a graph or a diagram — and can’t be described in a short sentence? Don’t worry! You can use the longdesc attribute to provide a link to a longer and more accurate description:

<img src=“chart.png” longdesc=“chart-info.html”>

2. Show your sound!

Just as we do for images, we must also provide an alternative text for sounds. A good option is to create transcripts and include them using the track tag.

<audio src=“example.mp3”>
  <track kind=“transcript” href=“link/to-transcript“>
</audio>

If you reproduce a sound to inform the user about something, be sure you also show a text explaining what just happen. When the audio is very short, you can include the transcript in the alt-text of an image right next to the sound file

<a href=“well-audio.mp3”>
<img src=“audio.gif” alt=“Sound file: Well done!”>

3. Now let’s combine images and sound. Time to transcribe video!

When it comes to video elements, providing a text equivalent — including the caption and the description — will make your content accessible for more people! Use the video transcript as synchronized text equivalent. QuickTime is a great tool to achieve this goal.

Don’t forget the track tag and use it for your video content too.

<video controls>
  <source src=”video.rm”>
  <track kind=“transcript” href=“link/to-transcript“>
  <track kind=”captions” src=”#YourCaptions”>
</video>

4. Color and contrast

Contrast and color are vital to accessibility. When they are not correctly managed, they can make users to not perceive some content on the page. There are two indispensable rules you need to follow to ensure these two elements.

• All the information with color must be also available without color. You can test it yourself by installing NoCoffe Vision Simulator browser extension. Go to Color deficiency option and select Achromatopsia (no color). You can now use your website in black & white mode and check if it’s still completely usable.
• There must be enough difference in brightness between any text color and its background. A correct luminosity contrast ratio will make your content easy to read for people with low contrast sensitivity. Furthermore, it will make your website content easier to read by everyone.
  
  Using NoCoffe we can simulate different Color deficiencies and confirm the website content is readable in any mode.
  
  You can also test the color contrast according to WCAG accessibility requirements. There are a ton of websites where you can introduce the color values and compare. I recommend you use the WCAG Color contrast checker. This tool checks each color contrast of the elements in your website providing a really useful list view of your website elements.

Bad and good contrast comparison

5. Disable CSS

Your website may be easy to read even without style sheets. Screen readers don’t read CSS; therefore, when rendering your website without style sheets, the content must still be easy to read. You can turn-off your website stylesheet using Web Developer browser extension. Do it and make sure your website looks clear!

Let’s check results!

If you followed these 5 steps… Congratulations! Your website has immersed in accessibility guidelines, you have implemented inclusive content and you are reaching out more people. You can check your progress using the W3C Validator and fix any lacks it may find.

This is a fantastic starting point for accessibility in your website, but you can do much better. If you want to jump to the next step you should implement all the Level A Success Criteria and officially get the Level A conformance.

This is not about ‘all or nothing’, each small improvement on your website will help some users and bring you closer to a 100% inclusive platform. Until you achieve your first official conformance level, I encourage you to already report the progress you achieved in your website.

Specify you implemented accessibility rules in your site and share it in your social media.

Let the people know you care about accessibility!