Web Accessibility, easy to forget

Kim Massaro
29-12-2017

Code conventions, optimising performance, responsiveness, browser-compatibility, reviewing and testing your code is something that’s always in the back of your mind when developing in order to deliver a project as complete as possible. Often we forget about the things that matter to the users, such as web accessibility.

Personally, I never really paid much attention to it until it was one of the requirements within a project I worked on a few years ago. I quickly realised how important it is and would like to give a small introduction to it in this post. In a following one I will dive deeper into it.

So what’s Web Accessibility?

Basically in short: Making your content available for users. This means, making it available for users with temporarily and permanent disabilities e.g. visual, speech, physical, auditory and learning.
Besides disabilities there could also be random circumstances that could effect the usability of your application, such as reflections on a screen.

Where to start?

There are multiple ways of making your application accessible. You can already start in the design process by checking the font-size, colour contrast and saturation. Obviously within development the easiest way to start is to make sure you write Semantic HTML. This will not only make it more accessible, but also more readable for yourself. However, just making it Semantic isn’t going to fully make it accessible. Therefor there is something called WAI-ARIA roles that you can use. These are roles to support clarifying and/or adding functionalities and describing relations between elements.

WAI-ARIA

Stands for “Web Accessibility Initiative Accessible Rich Internet Applications”, within this you have 3 main features: roles, properties and states. Below a few examples.

Roles

Below an example of 3 different roles. They define the purpose of the components.

<header role="banner"></header>
<nav role="navigation">
    <ul>
        <li><a href=""></li>
        <li><a href=""></li>
    </ul>
</nav>
<footer role="contentinfo"></footer>

Properties

Below an example of a role and a property assigned to an element. As you can see there are 2 navigations but the properties define the characteristics.

<nav role="navigation" aria-label="Main menu">
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

<nav role="navigation" aria-label="Side menu">
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

States

Below an example of how to use states to define the current condition of the elements.

<button aria-expanded="false" aria-controls="read-more">
  Read more
</button>

<article id="read-more" role="region">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

Hope this introduction was helpful

LEAVE A REPLY

you might also like