---
title: The beginners guide to building an accessible web
description:
  Web accessibility is the method of making websites and web applications usable
  by everyone.
author: estheragbaje
publishedDate: 03/23/2022
---

Accessibility
([a11y](https://developer.mozilla.org/en-US/docs/Web/Accessibility)) is an
essential part of web development because it provides unrestricted access to
millions of users. Unfortunately, many developers fail to take the necessary
steps to ensure web accessibility and often overlook it. A recent report
revealed that
[98% of the top websites do not offer fully accessible experiences](https://webaim.org/projects/million/).

If you're building a web app or website, you'd want it to be usable by everyone
irrespective of their disabilities, age, and physical circumstances.
Accessibility shouldn't be an afterthought carried out close to production;
instead developers should include it from the start of the development process.

Luckily, accessibility isn’t so difficult to implement. Once you understand the
issues that make a site nearly impossible to use by certain people, you can take
the measures to prevent those issues and ensure your site is welcoming to all.

## What is Web Accessibility?

Web accessibility is the method of making websites and web applications usable
by everyone, including those with a form of disability, impairments, or
limitations.

[Nearly 15% of the world's population](https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health)
lives with some form of disability. Safe to say, if you don't develop your site
to work with Assistive Technology (AT) like a screen reader, you prevent almost
1 billion people from engaging with your content.

When you build an accessible website, you're breaking down the walls of web
exclusion and granting all users equal access to the web.

### Reasons for Web Accessibility

Building an accessible web is important for the following reasons:

**1. Improves usability:** Usability involves creating an effective, efficient,
and satisfying product. When you make the web accessible, you automatically
remove restrictions and make it available for everyone with or without a
disability.

**2. It is the law:** Some government policies and laws mandate web
accessibility compliance. Failure to comply with these laws could cause legal
actions to be taken against your company, as in the case of
[Domino's Pizza](https://arstechnica.com/tech-policy/2019/10/accessibility-the-future-and-why-dominos-matters/).
Hence, to prevent risks of lawsuits and complaints, it is best to ensure your
website or app is accessible.

**3. It is the right thing to do:** At the end of the day, accessibility is the
right thing to do. You’d want to promote inclusion and diversity to everyone who
wishes to use the web. Building an accessible web implies that you're opening
the door to anyone who wants to use your site regardless of their physical or
cognitive ability.

### Web Accessibility Standards

The two main guidelines that set web accessibility standards are:

#### 1. The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/) (WCAG 2.1)

The Web Accessibility Initiative (WAI), managed by the World Wide Web Consortium
(W3C), published these guidelines. They are basic rules that explain how
developers can create more accessible content for people with disabilities.

The WCAG is based on four principles, known as
["**POUR**."](https://www.w3.org/WAI/fundamentals/accessibility-principles/)

**1. Perceivable**: All information and user interface components must be
presented to users in a way they can perceive it.

**2. Operable**: User interface (UI) components and navigation must be operable.

**3. Understandable**: All information and the operation of the user interface
must be understandable by users

**4. Robust**: Content must be robust enough to be interpreted by many users and
assistive technologies.

#### 2. The [Web Accessibility Initiative — Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) (WAI-ARIA)

The Accessible Rich Internet Applications Working Group
([ARIA WG](https://www.w3.org/WAI/ARIA/)), also run by the W3C WAI, came up with
these guidelines. WAI-RAI focuses on more complex web apps and best practices
for building accessible web components and offers the following:

- Roles that describe widgets used, such as "menu," "slider," and "progress
  bar."

- Roles that describe web page structure, such as headings and tables.
- Properties that tell the state widgets are in, such as "checked" for a check
  box.
- A way to provide keyboard navigation for various web events.
- Properties that describe the live regions of a page that usually get frequent
  updates

## 10 best practices for building an accessible web

To build accessible websites and web apps following the principles and
guidelines above, let's examine some action items and best practices you can
implement:

### 1. Write Semantic HTML

HTML comprises both **semantic and non-semantic elements**.
[Semantic HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)
is the foundation for good web accessibility practices because it specifies the
type of content within the tags.

An example of a semantic HTML tag is the `<button>` tag because it conveys a
button and a user should take action. What about the `<div>` tag? You probably
guessed right! The `<div>` tag is a non-semantic HTML because it only acts as a
wrap and doesn't communicate the meaning of its enclosed content.

When developing a product, strive to write semantic HTML because assistive
technologies like screen readers use semantic HTML to understand how best to
interpret each element to a user.

![Semantic HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q75pkuu7m934yyqwml2.png)

_Source:
[SoftTeco](https://www.google.com/url?sa=i&url=https%3A%2F%2Fsoftteco.com%2Fblog%2Fsemantic-html&psig=AOvVaw3yLm1-dzYTxA2OJq8NvkKQ&ust=1648058946760000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCLiJxZSo2vYCFQAAAAAdAAAAABAD)_

### 2. Use ALT texts for images

Images make content more appealing and easy to understand. For visually impaired
web users who cannot see these images on the web, the ALT text helps them
understand that image.

ALT provides descriptive text to images. These ALT texts allow screen readers to
notify users of the kind of image. Without an ALT text, a screen reader would
simply say `<image>` and not the image's description.

Here's an example ALT text for the image below:

```jsx live=false
<img src='/images/towerbridge.jpg' alt='Tower bridge at dawn' />
```

![Tower bridge at dawn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80z7sddjqqlih0vs5jlp.jpeg)

_Source: [Flickr](https://www.flickr.com/photos/duncanh1/25316870168)_

### 3. Avoid using div for button

As a developer, the chances are that you can style a `<div>` to look exactly
like a `<button>`.

![Avoid using divs as buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fpbsydcgnhdupl6bhvw.png)

_Visual representation of div styled as a button vs a button_

Although, these two elements may look alike, they don't communicate the same
thing to a screen reader. In the first instance, the screen reader will only
read out the text content, and users aren't aware they should click the button
for the download. In the second instance, a screen reader will announce that
users should click the button to download.

To be fair, some people may argue that assigning `'role=button'` makes the div a
button. However, this approach is bad practice as you'd need to get many "bells
and whistles" going, such as `onClick` handlers, `preventDefault,` and more.

By all means, avoid using `<div>s` to build `<button>s` and other interactive
elements. Rather, use `<div>s` and `<span>s` as generic boxes for grouping
elements at the block or inline levels.

### 4. Use headings properly

Headings do more than give your text a fancy big, and bold look. They provide a
solid structure to your web page. Think of them as guides that help readers
quickly scan through the various sections of your webpage to get an idea of what
each entails.

A good heading structure uses the `<h1>` to `<h6>` tags to organize web content
for accessibility and a good user experience.

![HTML Heading structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n43qo8vap7psgahblsx.png)

_HTML Heading Structure_

Without proper headings, visually impaired users won't be able to do a quick
scan of the page sections and would have to read the entire web page for
information. However, with a proper heading structure, screen readers can read a
page's layout aloud, allowing users to quickly jump from one heading to another.

**A golden rule is to avoid using headings to set font sizes or for visual
styling.** For instance, using a `<h2>` tag because you need a large font size.
Doing this will result in a poor HTML structure and overall a bad user
experience for assistive technology users. In short, use CSS for styling.

### 5. Support keyboard navigation

Not all users navigate a site page using a trackpad or mouse; many users (with
or without motor disabilities) rely on the keyboard to navigate.

Developers need to be aware of the following to enforce keyboard accessibility:

- **Keyboard focus**: This enables sighted users to know what element on the
  webpage has focus. If the keyboard focus is missing, it becomes difficult for
  users to access information through a keyboard.

- **Keyboard tab order**: When a keyboard user navigates through a website using
  the tab, it must be logical, in the correct order, and direct them to the
  desired point on the page.

- **Keyboard traps**: A keyboard trap happens when a keyboard user cannot move
  focus away from an interactive element while using the keyboard only. Keyboard
  traps often occur in calendar widgets or dialogue boxes. A classic scenario is
  when a user opens a dialogue box but is unable to move to the next item with
  the tab key or is unable to close the dialog box with the ESC key.

To check the accessibility of your site:

1. Place the cursor at the address bar of the browser.
2. Start to press the tab.
3. Confirm if you're able to navigate through every link or button.

### 6. Provide sufficient color contrast

Color contrast describes the differences between the darkest and lightest color
brightness. If the color contrast between the background and text is low, users
with visual impairments like color blindness will have trouble reading content
on your page. As a standard, WCAG advises that for body text and background
(text with font sizes of 18px and below),
[the color contrast should be at least 4.5:1](http://web-accessibility.carnegiemuseums.org/design/color/).

The
[WCAG guidelines recommend](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)
the following contrast ratios for designing readable interfaces:

![WCAG color contrast standard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbrwlbdhaelp6mfs3bdb.png)

Web Developers should ensure they
[validate their color contrast according to accessibility standards](https://webaim.org/resources/contrastchecker/)
before building web pages. With a good color contrast, you make it easy for
every user to read text elements on your site easily.

![Example of poor and good color contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hamj79ivwglkvmap3dn2.png)

_Example of poor and good color contrast_

### 7. Underline links within a block of text

Link accessibility, although easily ignored is an essential aspect of
accessibility. On many sites, links are only differentiated from text by color
which makes it hard for users with color blindness to identify.

When it comes to making a link accessible, don't use only colors to communicate
or differentiate links within a block of tex. By standard,
[WCAG2.1](https://www.w3.org/TR/WCAG21/#use-of-color) recommends that links
should also be underlined.

![Underline links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1gat10np6tnm9eir271.png)

_Comparison between links_

### 8. Use ARIA landmarks

The previous versions of HTML lacked some tags that semantically described some
UI widgets like menus. To bridge this gap, developers had to use `<div>` tags to
create these widgets.

Although these widgets looked as they should visually, assistive technologies
couldn't adequately interpret them to users because the code didn't provide
enough information. This is because the `<div>` tag is a non-semantic HTML. ARIA
was introduced to cover up accessibility issues HTML couldn't handle. ARIA, also
known as WAI-ARIA, stands for Web Accessibility Initiative — Accessible Rich
Internet Applications.

By definition,
[ARIA is a W3C specification](https://www.w3.org/WAI/standards-guidelines/aria/)
that helps enhance accessibility for plain HTML by providing further information
to assistive technologies using HTML attributes. It is important to note that
ARIA solely provides an extra descriptive layer for screen readers and has no
impact on how these elements are presented.

There are two major categories of ARIA attributes: Roles and State & properties:

- Roles describe what an element does and doesn't change once set. For example,
  you describe the role of a search form as: `<form role=" search">`.

- States and Properties ARIA states and properties support ARIA roles that
  already exist on a page. While ARIA Properties describe the relationships with
  other elements and don't change once set, ARIA States are more dynamic and
  usually update when users interact with a page.

3 popular ARIA States and properties are: **aria-label**, **aria-labelledby**
and **aria-describedby**.

**Note that ARIA doesn't replace HTML; instead, it complements it.**

### 9. Add caption to tables

The same reason you would label a table for sighted users to get a quick idea of
its content is why you'd need to add a caption to your table for visually
impaired users. A caption describes the content of the table to screen readers.

To add caption to a table, use the `<caption>` tag and place it immediately
after opening the `<table>` tag.

Example:

```jsx live=false
<table>
  <caption>Computer Science students</caption>
  ...
</table>
```

With the caption, a screen reader can now understand the information in a table
and convey it to users.

### 10. Add `<label>` tags to forms

Without a `<label>` tag, assistive technologies won't be able to understand and
differentiate the input fields on your form. When a screen reader gets to a
form, it immediately reads out the label so that non-sighted users know the type
of input form.

There are two ways to attach `<label>` to `<input>` fields:

#### 1. Match the `for` attribute from the label with the id attribute from the input.

```jsx live=false
  <label for="first-name">First Name</label>
  <input type="text" name="name" id="first-name">
```

#### 2.Place `<input>` within the `<label>` tags.

```jsx live=false
 <label>
   First Name
   <input type="text" name="first-name">
 </label>
```

## Build a web that's inclusive of everyone

While there are many aspects to consider when weaving accessibility into your
site, the above information are a good foundation for building an accessible
web.

At [Chakra UI](https://chakra-ui.com/), we fully understand the importance of
accessibility and know that it may require a lot more time to build
accessibility into your sites and apps from the ground up. All our components
are fully accessible, giving developers the superpowers to create accessible
sites with speed. Feel free to
[use any of our components](https://chakra-ui.com/docs/components/overview).

Building an accessible web isn't a "nice to have" and should be a priority for
everyone.