DEV Community

loading...

Web Accessibility Tips

lahin31 profile image Muhammad Lahin ・3 min read

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,

<header>
  <nav></nav>
</header>
<main>
  <article>
    <figure></figure>
  </article>
</main>
Enter fullscreen mode Exit fullscreen mode

Headings

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

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
<div aria-label="Login button" class="btn">Login</div>
Enter fullscreen mode Exit fullscreen mode

aria-labelledby, aria-expanded, aria-describedby, aria-checked are common examples of aria. You can find more in their official docs, w3.org

Label tag

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

<label>
  Name:
  <input type="text" />
</label>
Enter fullscreen mode Exit fullscreen mode

alternatively you can use for attribute,

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

Alt attribute

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

<img alt="Image of a cat" src="./cat.jpg" />
Enter fullscreen mode Exit fullscreen mode

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,

<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>
Enter fullscreen mode Exit fullscreen mode

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.

<ul>
  <li lang="de">Deutsch</li>
  <li lang="en">English</li>
  <li lang="jp">Japan</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Skip Link

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

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

  <main id='main-content'>
    Lorem ipsum...
  </main>
</body>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

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

Avoid using outline: none

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

Discussion (0)

pic
Editor guide