Table of contents
§11.4.

Accessibility

Many people suffer disabilities that are not immediately obvious. So, it may be easy to overlook how many people experience disability. Even some of your peers reading these notes will be taking advantage of assistive technology.

The World Health Organization reports that up to 15% of the population experience disability. These disabilities include the following:

  • Visual

    • Color blindness (1 in 12 men and 1 in 200 women)

    • Partial loss of vision

    • Total loss of vision (1 in 200 people worldwide)

  • Auditory (1 in 20 people worldwide)

  • Motor

    • No motor control

    • Limited motor control

  • Cognitive

Designing for everyone is referred to as accessibility or a11y (an abbreviation of the word accessibility: a — 11 letters — y).

Small steps have a tremendous impact

The best way to improve the accessibility of a site is to actively test it with diverse users: not just young, healthy people who share your cultural background.

Comprehensive user testing may be beyond the scope of your project. However, even small changes can make a vast improvement for user experience. Fortunately, accessible design is often the same as good design.

Some simple technological strategies to improve the accessibility of a site include:

  • Write semantic HTML

    • Create headings using <h1>…​<h6> elements, rather than using styled <div> elements

    • Create buttons using <input type="submit"> or <button>, rather than creating custom buttons using SVG or HTML Canvas

    • Use <table> for tabular data and other elements (<div>) for non-tabular data

    • Use content sectioning elements (e.g., <nav>, <main>, <header> and <footer>) to identify the purpose of different parts of your HTML page

  • Use HTML <label> elements (e.g., <label for="target">Enter your name:</label>) to associate captions with input fields

  • Add descriptive alt="Caption" tags to all <img> elements (e.g., <img src="photo.jpg" alt="Portrait of Alan Turing">)

  • Add tabindex="0" to selectable components (you can also customize the tab order using the value of the tabindex)

  • Use web fonts to style text, rather than rendering text in image files

In addition to clear HTML markup, simple and clear design will improve accessibility:

  • Use colors with high contrast

  • Use large buttons

  • Write in simple, clear text

  • JavaScript is fine, but try to avoid interactivity and animations if they do not add to your site’s experience

Exercise: Accessibility audit

Perform a quick accessibility audit on your web application or an application that you regularly use:

  • Can you use the site using only a keyboard (no mouse)?

  • Can you use the site on your phone, without looking at the screen, by enabling the ‘screen reader’ functionality in your phone’s settings (Android TalkBack and iOS VoiceOver)?