Web Accessibility — Beginner’s Guide

In simple terms, web accessibility is to make your website usable to every kind of user without discrimination whether he is visually impaired or Parkinson’s disease or he has a broken wrist, he or she should be able to use the website.

Have you ever tried using a mobile website, in a loud trembling train, or shaky bus? If your web app only allows accessibility by mouse or keyboard or sound, they might not work in every case, that means you are limiting your user base, which the least priority of a website owner, hence focus on making your web app accessible by any means (touch, mouse, keyboard, sound or gestures in same cases).

Basic steps to make your website accessible:

1. Use alternate text to images

<img src="example.jpg" alt="This is an example image"/>

So, for the people who are blind or people who have turned off images due to bandwidth issues, can still know the context of the image provided in the screen.

2. Keyboard First Website

People with Parkinson's disease or broken wrists, might not be able to move the mouse a lot, so it’s important to make your website keyboard accessible through tabs and shortcut keys.

People with complete disability can use the web, using other means like auditory keyboards which operates via speech. Web can incorporate all these input mediums easily if you make your website keyboard accessible.

3. Giving transcripts

People with hearing disability won’t able to listen, so it’s better to provide transcripts for your videos. So people with hearing disability can read.

4. Semantic Elements

HTML code is not about just providing header, footers and tables, it tells a lot about your use cases. There are certain practices you need to keep in mind to make your web app accessible

Use Container Elements for Layout Only

Elements like <div> and <span> are for layout only. They’re semantically meaningless, they don’t have keyboard or touch support in any browser, and they don’t communicate anything to the accessibility API. For example, never use a div or span for a button when you could use a semantically meaningful button element. So even though you are inclined too much towards Angular or React which allows you to create stylish clickable elements, some of your users will be restricted by them, so it is better to make a balance of design and usability.

Use Other HTML Elements the Way They’re Intended

There are other semantic elements to structure the pages like :

1. header
2. footer
3. aside
4. section
5. article
6. nav
7. section

When screen reader is accessing your page for your disabled user, sematics will give them better readability then normal div and spans.

Headings

Use single H1 per page, which will act as title of your page, so if your visually impaired user is coming on your page for first time, screen reader will call out this title, so keep it meaningful always.

5. ARIA Roles, States & Properties

ARIA attributes are divided into two categories: roles, and states & properties.

ARIA Roles

An ARIA role is added via a role="<ROLE TYPE>" attribute, and does not ever change for an element once it is set. There are four categories of ARIA roles:

• landmark
• document
• widget
• abstract

Below is the example of landmark area role.

<nav class=’mobile-nav’ role=’navigation’ aria-label=’Mobile Menu’> List of Links </nav>

While things might look redundant, it will be easier for screen readers. Aria-label define the string title of the element you are accessing, so screen reader will call out that, so that a blind people can understand the purpose of particular section.