5 deadly sins of web accessibility
Tags: a11y, webdev, html, beginners
Published: 2020-06-14 20:01:53

In this article, I'll point out the 5 most common mistakes related to web accessibility and share ideas about how you can cope with them.

## Table Of Contents
 * [No semantic HTML](#semhtml)
 * [Ommiting alt tag](#alt)
 * [Lack of labels](#labels)
 * [Too low contrast ratio](#contrast)
 * [No keyboard navigation support](#keyboard)

## 01. No semantic HTML <a name="semhtml"></a>

Using tags like `<section>`, `<article>`, `<nav>` or `<aside>` make your site much more accessible right on the starting point. Thanks to that, screen readers used by blind people can clearly recognize the purpose of different parts of the website. Tags like `<div>` or `<span>` haven't any informative value and make your content much harder to interpret.

A quick win for your app is using proper heading hierarchy. 
It's common that beginning developers think about heading tags (`<h1>,<h2>,...`) in size category. But it's not the point! Heading tags **are not about the size or design property, they are about the priority of the text.** If your text needs to be bigger just use CSS to achieve that.

Also, you shouldn't skip heading levels. Start from `<h1>` then `<h2>`, `<h3>` and etc.

## 02. Omitting `alt` tag <a name="alt"></a>

Remember, every `img` should have `alt` property. That makes photos accessible.
The rule is simple there. If the image is just a decoration element without any content message the value of `alt` should be an empty string. In another case, `alt` should have a descriptive description of the image. 

*Tip:* Don't write 'The image presents...' or 'In the photo...' in the `alt` text. The screen readers already have known that's an image.


## 03. Lack of labels <a name="labels"></a>

People need labeled inputs to know what kind of information they are supposed to provide.

Some people use the `placeholder` value to tell the user what the input is for. It's not the best idea when it comes to a11y. Firstly, some screen readers don't read placeholder value at all. Secondly, it's just a bad UX. When the user starts typing the placeholder value disappears.

## 04. Too low contrast ratio <a name="contrast"></a>

If the element's contrast ratio between background and foreground is too low people with vision disorders just can't see the content. 
The interesting fact is that it's very important even for your average users, for example on a sunny day it's almost impossible to capture low contrast elements.

If colors fail audit you should consider changing the palette to make your element accessible. 

*Tip:* You can check contrast ratio using this tool https://whocanuse.com

## 05. No keyboard navigation support <a name="keyboard"></a>

Sometimes users want to navigate your site using a keyboard only. You need to make their life easier. 

[Never remove the outline](http://www.outlinenone.com/) from the focused element if you don't provide any alternative styling (box-shadow, background, border).

What's more, your focus order can't behave unpredictably. The order of focus should be consistent with the reading direction in the user's country. You can use negative `z-index` value to make some elements unreachable from a keyboard (eg. emojis) but be aware of messing focus order up.

Thanks for reading, I hope those points will point your attention to some web accessibility issues.

--- 
Hey, If you want to find & join to some cool open-source project check out my latest side project [Just Contribute](https://justcontribute.netlify.app)