Web Accessibility Tips
Tags: webaccessibility, webdev, a11y
Published: 2020-11-09 10:46:31

---
title: Web Accessibility Tips
published: true
description: Commonly used web accessibility tips
tags: webaccessibility, webdev, a11y
---

Web accessibility ensures that people with disabilities can use websites effectively. Here are some basic tips to make your website accessible,

## Semantic

Semantic elements provide information about the content between opening and closing tags so that the screen reader will able to read them better. It makes code easier to read. Some of the semantic elements are,

- header
- section
- nav
- main
- article
- figure
- aside

Using these semantic elements a html structure can be,

```html
<header>
  <nav></nav>
</header>
<main>
  <article>
    <figure></figure>
  </article>
</main>
```

## Headings

Headings give users an idea of page’s organization and structure. Heading elements are - h1, h2, h3, h4, h5 & h6.

```html
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
```

## Native HTML Elements

Use native html elements, you will get the default semantic information. For example,

```
<button>Add to cart</button>
----------------------------
name: Add to cart
role: button
Invalid user entry: false
Focusable: true
```

In case if you don't want to use native html elements, you have to specify it using `role`, `aria` attribute.

## Aria

Aria attribute is generally used to add semantics to an element so that the screen reader read the semantic information. It doesn't change element's behavior. Example can be,

- aria-label: aria-label is used to add an additional name for an element so that the screen reader can tell it.

```html
<div aria-label="Login button" class="btn">Login</div>
```

aria-labelledby, aria-expanded, aria-describedby, aria-checked are common examples of aria. You can find more in their official docs, [w3.org](https://www.w3.org/TR/wai-aria-practices-1.2/)

## Label tag

Use html `label` tag, this will help the user to understand the purpose of a control(ex, input).

```html
<label>
  Name:
  <input type="text" />
</label>
```

alternatively you can use for attribute,

```html
<label for="name">Name</label>
<input type="text" id="name" />
```

## Alt attribute

Use `alt` attribute inside `img` tag, the screen reader will read the text from the inside of `alt` attribute.

```html
<img alt="Image of a cat" src="./cat.jpg" />
```

## Tabindex

The `tabindex` attribute allows elements to be focused when using the keyboard. You can use this in three way, `tabindex: 0`, `tabindex: greater than 0` & `tabindex: -1`.

tabindex: 0, means the element is focusable in sequential keyboard navigation.

tabindex: greater than 0, defines manual tab order. example,

```html
<div tabindex="2">This is number 1 text</div>
<div tabindex="1">This is number 2 text</div>
<div tabindex="3">This is number 3 text</div>
```

You will see `tabindex="1"` focused first, `tabindex="2"` focused second & `tabindex="3"` focused last.

tabindex: -1, this will remove the element's focusability in tab order.

## Lang attribute

Use `lang` attribute, when you are using blocks of text in different languages if you add  `lang` attribute then the screen reader will know how to pronounce them.

```html
<ul>
  <li lang="de">Deutsch</li>
  <li lang="en">English</li>
  <li lang="jp">Japan</li>
</ul>
```

## Skip Link

Skip link allows users to skip contents which may not necessary for them.

```html
<body>
  <header>
    <nav>
      <a class='skip-link' href='#main-content'>
        Skip to Content
      </a>
    </nav>
  </header>

  <main id='main-content'>
    Lorem ipsum...
  </main>
</body>
```

```css
.skip-link {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}

.skip-link:focus {
  color: black;
  display: inline-block;
  height: auto;
  width: auto;
  position: static;
  margin: auto;
}
```

## Links

- Avoid Read More, Read, Click Here, Links to, etc inside link(a tag). 

> Why? These kinds of links can be confusing when screen reader reads them.

- Avoid longer text inside link.

## Color

Use of color should not interfere with the ability to view content on a page for a user. For that you can use online contrast checker like [webaim.org](https://webaim.org/resources/contrastchecker/)

## Avoid using outline: none

Avoid using `outline: none`, if you have to use it, it is better to provide an alternative styling.