The art of designing accessible websites

Published in

UX Collective

4 min readAug 28, 2018

8 tips to improve usability & accessibility of your web application

Last year I made a speech at the University of Milano-Bicocca about designing accessible web apps. I explained why it is important and how to do it. If you are a native Italian speaker, recordings and slides were published here.

In this story we’ll see 8 tips, took from the speech and translated into English.

1. Use open standards

Forget about Flash and Silverlight: they are a pain in the neck. Use HTML5 instead. In fact, the first two technologies lack of support on mobile and custom devices like screen readers. They also don’t have accessibility tools built around them because of their nature (they are not open standards).

2. Semantic web

Use HTML5 elements which have a semantic meaning instead of abusing of “div” and “span” elements. As an example, consider this snippet:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Lorem Ipsum - Hello world!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <h2>Lorem Ipsum</h2>
         <div>
            Lorem ipsum dolor ...<br>
            Etiam bibendum tincidunt urna...
        </div>

        <div id="footer">
            Example. UnixMiB rules.
        </div>
    </body>
</html>

In the next paragraph you will see the same page with semantic elements:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Lorem Ipsum - Hello world!</title>
    </head>
    <body>
        <header><h1>Hello world!</h1></header>
        <main>
          <article>
            <header><h2>Lorem Ipsum</h2></header>
            <section>
              <p>Lorem ipsum dolor ...</p>
              <p>Etiam bibendum tincidunt urna...</p>
            </section>
          </article>
        </main>
        <footer>
          Example. UnixMiB rules.
        </footer>
    </body>
</html>

The front-end will be clearer for you as a developer and for your team; it will also improve accessibility thanks to tools that use these pieces of information to improve their understanding of the page.

3. Don’t reinvent the wheel

Use stable frameworks like Bootstrap; consider also following design principles commonly used (for example Material Design): standing on the shoulders of giants is always a good idea. Remember that reinventing the wheel is an anti-pattern in the field of development. If you write from scratch everything you have to maintain all the codebase without the help of the community: try to make your website compatible with every browser and device used by your clients before everything else.

4. Design responsive stuff

Websites need to be viewed from PCs, smartphones and large TVs. Make sure that the page fits every screen, regardless of the size or the resolution.

5. Have always an alternative text for images and subtitles for videos and audios

Having a caption/subtitles for media elements allow blind and deaf people to understand what the content is.

For instance, if you have a picture with three cats who are sleeping you should insert an “alt” attribute:

<img src=”/cats.png” alt=”Three cats who are sleeping” />

If you are developing an application which allows users to upload media elements, you should consider using machine-learning based tools to label them automatically like Facebook does.

6. Use the correct units

Choosing between absolute units (like pixels and points) and relative units (like ems) could be difficult at first, but MDN is always a good resource to learn from: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units.

7. Make elements focusable when needed

The mouse isn’t the only input method used to navigate on the Internet. A lot of people (in particular people who suffer from a motor disability) use the keyboard instead.

Make elements in a table like rows or columns focusable will make life easier for end users. The code which follows allows users to navigate the table, focusing on each row, one at a time.

<table>
  <tr tabindex="0">
    <th>Index</th>
    <th>Value</th>
  </tr>
  <tr tabindex="0">
    <td>Index A</td>
    <td>Index B</td>
  </tr>
  <tr tabindex="0">
    <td>Value A</td>
    <td>Value B</td>
  </tr>
</table>

8. Test your application

Last but not least, you need auditing.

Testing with tools which let you simulate disabilities (for example ChromeVox and RGBlind) allow you to improve your software: only them will tell you if your application is really accessible or not.

Also, you always need to validate your code with checkers like https://validator.w3.org/ and https://jigsaw.w3.org/css-validator/.

Browser extensions like Lighthouse are also a plus, allowing you to have metrics.

Conclusions

Make software accessible could be difficult and frustrating at first, but following these few simple tips allow you to improve the quality of your websites.

As seen in the previous article (https://blog.prototypr.io/the-average-user-has-disabilities-c64233a7f2a4), making things accessible will lead you to have a broader userbase.

If you are interested in accessible web development, consider taking a free course online, like “Web Accessibility” by Google from Udacity.