Um guia prático da acessibilidade web: Parte 1: Meu site é acessível?
Tags: a11y, frontend, javascript, html
Published: 2020-10-03 19:58:24

## O que é a acessibilidade web?

A **Acessibilidade web** envolve uma série de recursos que possibilitam a navegação, a compreensão e a interação de todas as pessoa na internet, independentemente de suas dificuldades ou limitações. 
Isso significa que sites, ferramentas e tecnologias são projetados, desenvolvidos e codificados adequadamente para que pessoas com deficiências permanentes ou com incapacidades momentâneas possam usá-los. Dessa forma as pessoas, independentemente de suas limitações, podem perceber, entender, navegar, interagir e contribuir para o ambiente em que aquela página ou programa é disponibilizado na web.

## Porque eu deveria me preocupar com a acessibilidade? 

As pessoas com deficiência representam 15% da população mundial. Sites ou sistemas que não possuem adaptações especificas para esse publico, além de sofrerem com essa fatia de usuários perdida, ainda está sujeito a penalidades legais em certos países. 

## As diretrizes da acessibilidade web

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4tr5ovswtqau1642a2w5.jpeg)

A **Web Content Accessibility Guidelines (WCAG)**, criada em 2014 e renovada em 2018 é uma guideline de diretrizes a serem cumpridas para que um site ou sistema web se torne acessível. Dentre os elementos a serem discutidos nessas diretrizes estão: 

* Navegação limpa
* Ordem de tabulação
* Marcos e mapas do site
* Estrutura do HTML
* Títulos expressivos
* Cabeçalhos bem inseridos e definidos
* Listas de conteúdo
* Texto
* Contraste
* Cor
* Imagens descritivas

Cada um desses itens representa uma funcionalidade da construção de uma página (envolvendo HTML+CSS+JS) que pode ser implementada de forma a auxiliar o entendimento final do site. 

## Como saber se meu site é acessível?

Para testar se nosso site ou sistema é acessível ou não, podemos imaginar os seguintes cenários:

#### Pessoas cegas

Usuários cegos utilizam sites por meio de um leitor de tela, que é navegado exclusivamente pelo teclado. Para fazer esse teste, considere navegar em seu site com a tecla TAB. **Verifique se você consegue chegar em todos os inputs e botões possíveis, realizar ações com eles de forma sequencial.** 

#### Pessoas com baixa visão ou daltônicas

Usuários com daltonismo ou baixa visão utilizam funções de alto contraste ou adaptações de cores para imagens e textos. **Sua página possui alguma destas opções?**

#### Pessoas surdas ou com audição comprometida

Pessoas surdas fazem uso do transcritor de texto em língua de sinais integrado ao site e também, de descrições em vídeos. **Seu site possui alguma opção de tradução livre em língua de sinais?**

#### Dislexia e outras deficiências intelectuais

Esse grupo de pessoas possui dificuldade em interagir com elementos da tela muito pequenos ou de acesso complexo, como menus em navbars ou botões mal posicionados. **Seu site possui esses elementos bem posicionados?**

#### Qual o seu resultado?

Se seu site ou sistema não passou em uma, ou nenhuma das situações a seguir, não se preocupe. Na próxima parte desse artigo, abordaremos como podemos preparar nosso front-end para essas diversas situações, usando ferramentas simples e de fácil acesso na comunidade. Está preparado?