Developing an Accessibility-First Culture among Developers

Peter Eze

·

April 04, 2019

·
Guest Post

Accessibility

Have you ever had an issue with your mouse and tried to navigate a web page with your keyboard but could not access certain interactive parts? Perhaps you have listened to the sad tales of a visually impaired who have difficulty accessing certain websites. These are experiences that may leave you wondering how inconsiderate the developer must have been. The web should not discriminate; everybody should be treated equally and given equal ability to access and use the web.

Accessibility

Web accessibility makes it possible for people with various disabilities to use the web equally. It means treating every web user the same and giving them equal opportunities, irrespective of their abilities, hardware, software, language or location.

Web accessibility encompasses all disabilities that affect access to the Web, including:

  • Auditory
  • Cognitive
  • Neurological
  • Physical
  • Speech
  • Visual

There is a popular misconception that web accessibility is entirely for people with disabilities. This is not entirely true. Accessibility also benefits people without disabilities. For instance, it benefits:

  • People using mobile phones, smartwatches, smart TVs, and other devices with small screens, different input modes, and so on.
  • Older adults with changing abilities due to aging.
  • People with “temporary disabilities” such as a broken arm or lost glasses.
  • People with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio
  • People using a slow Internet connection, or who have limited or expensive bandwidth

In this post, we’ll highlight a few tips to help you quickly get started on how to develop with accessibility in mind. It’ll serve as an introduction to a series of accessibility based topics we’ll be creating. Why? Accessibility is broad, and we can’t cover all you need to know in just one post. Subsequently, we’ll take up individual parts of the web and help you understand how to build them properly with accessibility in mind.

Why Accessibility?

  • The World Health Organization(WHO) fact sheet sheet shows that about 15% of the world’s population, have some form of disability. Making accessible websites and applications supports the social and web inclusion of these people.
  • Other good practices that improve accessibility also make your site more usable by other groups, such as the older people, people in rural areas, people in developing countries where the internet might be slow, and so on.
  • Accessible websites improve Search Engine Optimization(SEO), making your site index-able by search engines.
  • Accessibility is an excellent way to demonstrate Corporate Social Responsibility(CSR).
  • Access to information and communications technologies, including the Web, is defined as a fundamental human right in certain countries.

Adopting the Accessibility Culture

If you’re not currently proficient on the concepts of developing accessible websites and web applications, here are a few tips to help you get started on properly building the web with accessibility in mind.

1. Include Alternative Text for Non-Text Based Content

Text contents are easily accessible. However, a visually impaired person cannot view a picture or video content. Providing a plain text alternative for all functional and informative non-text contents makes it possible for such persons to access the content.

For images, use the alt attribute of the image element. The alternative text should be as descriptive as possible such that the message is conveyed. If an image is decorative, use empty alternative text, alt="" , or include them in the Cascading Style Sheet (CSS) instead. Consider the illustration below.

<!-- sample image -->
<img src="smiley.gif" alt="Smiley face">

For audio and video contents, use the track element to provide time-based text tracks for the video/audio element.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="caption.vtt" kind="captions" srclang="en" label="Audio">
</audio>

<video poster=video.png" controls>
  <source src="video.mp4" srclang="en" type="video/mp4">
  <track src="description.vtt" kind="descriptions" srclang="en" label="Video">
</video>

2. Specify the Language of a Page

Use the lang attribute to specify the language of a page on the <html> element. Also if the language of an element differs from the rest of the page use the lang attribute to specify the language of that element.

<html lang="en">
  <body>
    <p lang="fr">Ceci est un paragraphe.</p>
  </body>
</html>

3. Use Semantic Elements

Use the right element tag for paragraphs, headings, lists, and tables. Also use semantic elements such as <header>, <nav>, <footer> to structure the layout of your website.

4. Structure Elements in a Logical Reading Order

Assistive technologies read web contents in the order they appear in the source code. So elements should always be placed in the order it should be read. CSS can always be used to place elements anywhere, but the order in which it appears in the source code should be in the logical reading order.

5. Use the Label Element to Improve Form Accessibility

The label element is used to provide context for information that may be otherwise visually unclear. Adding the label element to all form control elements makes it easier for assistive technologies to understand and better present your form elements to the visually impaired readers. The label element should have a for attribute that the value is equal to the id of the form element. Here’s an example

<label for="firstname">Firstname</label>
<input id="firstname" type="text" name="firstname">

6. Ensure Interactive Elements Are Keyboard Accessible

Interactive elements such as buttons, links, and form controls are by default keyboard accessible. However other custom built interactive widgets are not accessible via the keyboard. To add keyboard accessibility, use the tabindex="0" attribute on the target element.

<div role="button" tabindex="0">Submit</div>

7. Specify the Function of Non-Standard Interactive Elements

Certain complex user interface(UI) controls and widgets such as accordions, custom made buttons involve the use of non-semantic elements. We can use the WAI-ARIA to add semantic information that browsers and assistive technologies can read and then use it to let users know what is going on.

<a class="link dropdown" href="#" id="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>

8. Avoid Using Captchas for Authentication

CAPTCHAs can be problematic to some kinds of users. You can opt for alternative methods such as automatic detection or interface interactions to verify that all inputs are generated by a human.

9. Use Appropriate Table Elements

  • Use <thead> , <tbody> and <tfoot> to differentiate the header, body and footer of a table
  • Define the header using the <th> elements — you can also specify if they are headers for rows or columns using the scope="row" attribute.
  • Use the <caption> to provide a summary for the table. This is a good accessible example of a table:
<table>
    <caption>A summary of companies democratizing learning</caption>
    <thead>
      <tr>
        <th scope="col">Company</th>
        <th scope="col">Year formed</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Cloudinary</th>
        <td>Cloudinary</td>
        <td>2012</td>
      </tr>
      <tr>
        <th scope="row">Scotch.io</th>
        <td>Scotch</td>
        <td>2014</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row" colspan="2">Total Companies</th>
        <td colspan="2">2</td>
      </tr>
    </tfoot>
  </table>

10. Use Linters

Is there any linter plugin available to let us know when images are missing the alt attribute?, or if you’re using an ARIA (Accessible Rich Internet Applications) attribute incorrectly? Well, If you’re working on a React project, the answer is yes. When creating a React app using the create-react-app tool, the application source files will be accompanied by a code linter plugin called eslint-plugin-jsx-a11y. It helps as much as it can, to ensure that your code conforms to accessibility standards. For instance, when you render an image tag without the alt attribute, the linter will throw a warning in the browser console like this

Lint error

The eslint-plugin-jsx-a11y is a utility used with the popular ESLint tool to help you write better accessible code. You may ask, what if I’m not using React? Are there other generic linting tools out there to help me? Well, if you’re a VueJS developer, the good news is, the Vue community just announced earlier this morning that there will be a vue-a11y community focused on accessibility.

Vue community

To find out about more tools, plugins and even libraries or techniques to help you with accessibility, I’ve found 24a11y to be a handy resource.

Conclusion

Accessibility should be considered at the start of a project, not at the end. Constant checks should be done throughout the life cycle of a project to identify specific accessibility issues and fix them early. Remember that about 15% of the world’s population are living with a disability, so making your websites accessible would ensure that everyone gets a fair treatment.


Peter Eze

Written by Peter Eze.
Follow on Twitter

© 2019, Codebeast.dev