DEV Community

Cover image for Web Accessibility: By making your website accessible, you automatically increase the target audience.
Nikhil karkra
Nikhil karkra

Posted on

Web Accessibility: By making your website accessible, you automatically increase the target audience.

#productivity #ui #javascript #a11y

If you've been reading about the best practice in front-end development, you may have heard something called Web accessibility. In this article, we will cover what accessibility is, some of the facts/stats about it and the best practice to make you web accessibility friendly.

Web Accessibility means that people with disabilities can perceive, understand, navigate and interact with the Web, and that they can contribute to the Web.

Topics covered 

    * [Web Content Accessibility Guidelines](#chapter-1)
    * [Web Accessibility Statistics](#chapter-2)
    * [Accessibility Principles: POUR](#chapter-3)
    * [Types of Disabilities](#chapter-4)
    * [Different ways to Browse the web](#chapter-5)
    * [Keyboard Accessibility](#chapter-6)
    * [Tabtrapping](#chapter-7)
    * [Screen Readers](#chapter-8)
    * [Semantic HTML](#chapter-9)
    * [Contrast & Color](#chapter-10)
    * [Accessibility Developer Tools](#chapter-11)
    * [References](#chapter-12)
Enter fullscreen mode Exit fullscreen mode

Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines, often abbreviated to WCAG, are a series of guidelines for improving web accessibility.

The Web Content Accessibility Guidelines 2.0 are organised into three levels of conformance:

  • Level A – the most basic web accessibility features
  • Level AA – deals with the biggest and most common barriers for disabled users
  • Level AAA – the highest (and most complex) level of web accessibility

For most websites, Level AA plus some Level AAA is the best target.

Web Accessibility Statistics

1) Reading difficulties - 15%-20% of people in the US have reading difficulties, including dyslexia (source: nichd.nih.gov).

2) Color Blindness - 8% of caucasian males in the US suffer from some form of color blindness, compared to 0.5% of females. (source: nei.nih.gov).

3) Dexterity difficulties - 7% of working age adults have a severe dexterity difficulty (source: The Wide Range of Abilities and Its Impact on Computer Technology - Microsoft / Forrester). Severe dexterity difficulties mean users are unlikely to use a mouse, and rely on the keyboard instead.

4) Difficulty seeing - 3%-4% of people in the US, UK and Canada can't see well enough to read (sources: census.gov, Statistics Canada, UK ONS) Incidence increases with age, with more than 10% of over-70s affected.

The statistics shown have most impact on website use, and help assess the impact of accessibility problems, in terms of numbers of people affected. So let's see how we can face this issue.

Accessibility Principles: POUR

1. Perceivable - It means the user can identify content and interface elements by means of the senses(eg - An online application form contains numerous input fields. If the field labels are not readable, how can she successfully complete the application form?)
2. Operable - It means that a user can successfully use controls, buttons, navigation, and other necessary interactive elements(eg - able to control through keyboard)
3. Understandable - Understandable technology is consistent in its presentation and format, predictable in its design and usage patterns, concise, multimodal, and appropriate to the audience in its voice and tone. (eg- form field error messages should be understandable)
4. Robust - It means it should be designed to work with all technologies (eg- different browser's)

Types of Disabilities

  • Attention-Deficit
  • Blindness or Low Vision
  • Deaf/Herd of hearing
  • Learning Disabilities
  • Physical Disabilities
  • Speech and language Disabilities

Different ways to Browse the web

1) Keyboard
2) Head Wand and Mouthstick
3) Single Switch
4) Screen Reader

Keyboard Accessibility

  • keyboard shortcut help - Create some keyboard shortcuts like facebook and twitter used to show feeds, notification etc. This way is very helpful if you have many navigation links and user has to tab 20-30 times to reach to a particular link. Below is the sample image of keyboard shortcut help

Alt Text

  • Keyboard navigation works with Tab key . Shift+Tab key is used for backward navigation and only Tab key is used for forward navigation.

  • Tabbable Elements are <a>, <button>, <input>, <select>, <textarea>, <iframe>

  • Visible Focus - It is visually apparent which page element has the current keyboard focus(i.e., as you tab through the page, you can see where you are by focus color)

  • Div and Span aren't tabbable by default, but any item can be made tabbable by developer using a property called tabindex

<div tabindex="0">focusable</div>
Enter fullscreen mode Exit fullscreen mode 
**Tab index contains three values**

**1) Negative value** - Element should be focusable but should not be
Enter fullscreen mode Exit fullscreen mode

reachable via sequentail keyboard navigation

**2) 0** - Element should be focusable but should  be reachable via
Enter fullscreen mode Exit fullscreen mode

sequential keyboard navigation, but its relative order
is defined by the platform convention

**3) Positive value** - Element should be focusable but should
Enter fullscreen mode Exit fullscreen mode

be reachable via sequential keyboard navigation; Its relative
order is defined by the value of the attribute: the sequential follow
the increasing number of tabindex

  • Skip Links - You would have seen on website where a lot of content for tabbing . So to make keyboard tabbing friendly website provide a skip links like "SKIP TO NAVIGATION" or "SKIP TO CONTENT". 
<a href="maincontent" class="skip-link">skip to main content</a>

....

<div class="navigation">....</div>

....

<div id="maincontent" tabindex="-1">....</div>
Enter fullscreen mode Exit fullscreen mode

Here we keep the skip-link text to top-40px as soon as this text get focus it top set to 0 and it become visible.

#skip-link{
 position:absolute;
 top:-40px;
 left:0;
 padding:8px;
 color:black;
 z-index:9999;
}

#skip-link:focus{
  top:0
}
Enter fullscreen mode Exit fullscreen mode
  • Focus Control- There is an activeElement property of the document that returns the element that currently has focus. It can be queried via CSS pseudo class :focus 
var focusElement = document.activeElement
Enter fullscreen mode Exit fullscreen mode
  • Tabtrapping - Suppose you have a modal in your website and you want to use tabbing inside the modal only tabtrapping comes to save you. Follow the below mentioned steps to achieve tabtrapping.

1) Find and select all focusable children inside model and save them into an array

2) Find first and last tabbable item inside the modal.

3)Listen for keyboard tab event and shit tab event . If moving forwards and on last item , focus the first item similarly if moving backward and on the first item, focus the last item.

if(document.activeElement === lastTabStop){
  e.preventDefault()
  firstTabStop.focus()
}
Enter fullscreen mode Exit fullscreen mode

Screen Readers

There are many screen readers based on different operating system like voiceover(mac) , NVDA(windows) etc. There are few common ways to achieve accessibility for screen readers.

1) Alt text - Always provide alternative text to image. It helps to understand what kind of image it is on voice over. Always prefer to write accurate alternative text.

<img src="abc.png" alt="alternative text"/>
Enter fullscreen mode Exit fullscreen mode

alt="" (empty string) intentionally skip element and uppercase letter in alt attribute read letter by letter.

2) Hide Elements - You can use css class to hide element visually but show to screen reader.

.hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
Enter fullscreen mode Exit fullscreen mode

3) Label and ARIA Labels

If we define for and id attribute same in label and input field then whenever in screen reader you get focus to the input field it will announce the label text (Name).

<label for="username">Name</label>
<input type="text" id="username">
Enter fullscreen mode Exit fullscreen mode

4) aria-label - This attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen

<a href="..." aria-label="Google url">
  Google
</a>
Enter fullscreen mode Exit fullscreen mode

So a screen reader will announce:Google url Link

5) aria-labelledby - This property accept multiple ids to point to other elements of the page using a space separated list. This capability makes aria-labelledby especially useful in situations where sighted users use information from the surrounding context to identify a control.

<div id="myBillingId">Billing</div>
 <div>
  <div id="myNameId">Name</div>
  <input type="text" aria-labelledby="myBillingId myNameId">
 </div>
<div>
 <div id="myAddressId">Address</div>
 <input type="text" aria-labelledby="myBillingId myAddressId"/>
</div>
Enter fullscreen mode Exit fullscreen mode

So a screen reader will announce:
Billing Name
Billing Address

6) ARIA roles - It provides the meaning to the element such as menu, slider. It helps in describing the structure of the web page as well. You can check different type of roles here

<div id="header" role="banner">
<div id="nav"  role="navigation">
Enter fullscreen mode Exit fullscreen mode

7) ARIA CSS Selector

.dropdown[aria-expanded="false"].icon::after{
   content:'>'
}
Enter fullscreen mode Exit fullscreen mode

8) aria-describedby - This property is used to attach a descripted information to one or more elements through the use of an id reference list

<button aria-label="Close" aria-describedby="descriptionClose" 
    onclick  ​="myDialog.close()">X</button>
...
<div id="descriptionClose">Closing this window will discard any information entered and 
return you back to the main page</div>
Enter fullscreen mode Exit fullscreen mode

9) Live Regions - This property is useful when we have too much dynamism or any specific region that need attention in the screen like chatting, error handling, notification etc.

aria-live - By default this is "off" but we have polite and assertive mode as well

10) aria-live="polite"- The polite value, will ensure that users of assistive technology will be notified of any changes to the element. The notification will happen at the next available point, meaning that there will not be an interruption to whatever task or information the user was currently in the process of.

<fieldset>
 <legend>Planet information</legend>
 <label for="planetsSelect">Planet:</label>
 <select id="planetsSelect" aria-controls="planetInfo">
  <option value="">Select a planet</option>
  <option value="mercury">Mercury</option>
  <option value="venus">Venus</option>
</select>
<button id="renderPlanetInfoButton">Go</button>
</fieldset>

<div role="region" id="planetInfo" aria-live="polite">
 <h2 id="planetTitle">No planet selected</h2>
 <p id="planetDescription">Select a planet to view its description</p>
</div>

<p>
<small>Information courtesy 
<a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small>
</p>
Enter fullscreen mode Exit fullscreen mode

11)aria-live="assertive" - The assertive value will communicate changes to the element immediately, disrupting any other task or information the user was currently in the process of.

<button onclick="document.getElementById('content').textContent = 'I have changed!'">
    Click me to change the content of the div element below
</button>

<div id="content" aria-live="assertive">
  My content will change
</div>
</div>
Enter fullscreen mode Exit fullscreen mode

12) aria-relevant - The aria-relevant setting gives a hint about what types of changes are relevant and should be announced by assistive technology. Any change that is not relevant should be treated as if the region had aria-live="off" and should not be announced.

Semantic HTML

Semantic HTML is the key starting point toward good accessibility practices. It gives the meaning to the web page rather than just presentation. So it's always good to use semantic tags to structure your web page.

  • a) Structure Semantic tags 
<header>
<main>
<article>
<aside>
<footer>
Enter fullscreen mode Exit fullscreen mode
  • b) text level semantic tags 
<strong>
<em>
<small>
Enter fullscreen mode Exit fullscreen mode 



### Contrast & Color<a name="chapter-10"></a>
Find colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies.

**Best Practices**

**1) Ratio**: Text and interactive elements should have a color contrast ratio of at least 4.5:1.
**2) Color as indicator**: Color should not be the only indicator for interactive elements. For example, underline links on hover, or mark a required field with an asterisk.
**3) Color blindness**: Red/green color blindness is the most common, so avoid green on red or red on green. (Think especially about avoiding using red and green for “bad” and “good” indicators).

### Accessibility Developer Tools<a name="chapter-11"></a>

1) [Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb)

2) [axe](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)

3) [total11y](https://khan.github.io/tota11y/) - an accessibility visualization toolkit

4) [ally](https://github.com/addyosmani/a11y)

### References<a name="chapter-12"></a>
https://www.w3.org/WAI/fundamentals/accessibility-intro/

https://webaim.org/standards/wcag/checklist

http://web-accessibility.carnegiemuseums.org/design/color/

https://frontendmasters.com/courses/web-accessibility/
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
jhechtf profile image
Jim Burbridge •

Really nice article here, whenever I get to my website I'll keep a lot of this in mind.

Collapse
 
bayuangora profile image
Bayu Angora •

You can check your complete score here -> tiny.cc/-lighthouse

Read next

hitesh_developer profile image

Angular vs Next.js: A Detailed Comparison

Hitesh Chauhan -

abhay_yt_52a8e72b213be229 profile image

Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Mastering MobX: Simplified and Reactive State Management for React

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Controlled vs Uncontrolled Components in React: Choosing the Right Approach

Abhay Singh Kathayat -