Hoje em dia é difícil pensar numa atividade que fazemos que não dependa da Internet. Ela nos permite fazer compras no mercado, pagar boletos, assistir séries facilmente, através de poucos cliques. Mas, veja bem, quando digo “nos permite”, estou pensando na minha situação, sem nenhuma dificuldade ou restrição em usar a internet. Infelizmente, a realidade de milhões de pessoas não é a mesma.

Nesse blog post estarei falando sobre os seguintes temas:

• WAI-ARIA
• HTML Semântico
• Imagens
• Cores
• Como começar a desenvolver com acessibilidade?
• Outras boas práticas

Um levantamento publicado, recentemente, pelo Movimento Web Para Todos e pela plataforma BigDataCorp aponta que apenas 0,74% dos sites brasileiros são acessíveis a pessoas com deficiência.

E esse número não deve melhorar tão cedo, já que a legislação brasileira não define quais critérios de acessibilidade um site deveria atender, enquanto em Israel você pode ser processado se o seu site não for acessível.

Mas, por onde podemos começar a pensar em acessibilidade?

WAI-ARIA

Pra falar de acessibilidade na web precisamos falar de WAI-ARIA, diretrizes criadas pela W3C, a organização internacional que cuida dos padrões da Internet. Segundo a documentação oficial, WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) define maneiras de tornar o conteúdo de sites mais acessíveis para pessoas com deficiências ou que utilizam algum assistente de navegação, como leitor de tela e teclado.

Elas devem ser capazes de interagir com elementos da página como botões, formulários, drag-and-drop, calendários, listas de drop-down, submenus, etc.

Resumindo, ARIA possui 3 categorias: roles, estados e propriedades.

Roles

Podemos usar role para definir a natureza de um elemento, como também informar um grupo de elementos, regiões, estrutura da página, ou alertas.

Se você utilizar as tags semânticamente corretas do HTML, você pode não precisar definir as roles. As tags div ou span são as únicas que são genéricas e não possuem significado semântico, por isso, talvez você precise definir uma role quando utiliza-las pra algo importante.

Por exemplo, podemos criar um link válido usando a tag span e role dessa forma com HTML, CSS e JS:

<span
  data-href="https://medium.com"
  tabindex="0"
  role="link">
  Link com span
</span>

span[role="link"] {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

const spanElem = document.querySelector('span');
const navigateLink = (e) => {
  if (e.type === 'click' || e.key === 'Enter') {
    const ref = e.target != null ? e.target : e.srcElement;
    if (ref) {
      window.open(ref.getAttribute('data-href'), '_blank');
    }
  }
}

spanElem.addEventListener('click', navigateLink);
spanElem.addEventListener('keydown', navigateLink);

Ou, simplesmente usar a tag a:

<a href="https://medium.com" target="_blank">Link com a</a>

Estados e Propriedades

Através de estados e propriedades é possível indicar o estado de um elemento. Se ele está checado, selecionado, desabilitado, colapsado, oculto, aberto. Se é arrastável, clicável. Qual a ação de um botão sem texto, etc.

Para definir um modal:

<div role="dialog" aria-modal="true">
  // Conteúdo
</div>

Para informar a ação de um botão sem texto:

<button aria-label="Fechar">x</button>

Para definir um Slider:

<div
  role="slider"
  aria-valuenow="4"
  aria-valuemin="1"
  aria-valuemax="10" />

É importante dizer que ARIA apenas fornece informações para a API de acessibilidade do navegador e não afeta o conteúdo da página.

Existem inúmeras outras opções, todas podem ser consultadas na documentação oficial ou resumido no site da mozilla.

HTML Semântico

O propósito do HTML (Linguagem de marcação de hipertexto) é dar significado para o conteúdo da página através de tags. Atualmente, existem quase 100 tags, eu sei que é muita coisa mas você deve conhecer no mínimo as mais usadas.

• a para link.
• p para parágrafo.
• button para botão.
• ul, ol, li para lista.
• h1, h2, h3, h4, h5, h6 para títulos.
• form, label, input para formulários.
• table, thead, tbody, td, tr para tabelas.
• header para o cabeçalho.
• nav para navegação.
• footer para o rodapé.

Como já mencionado acima, div e span são tags genéricas e não tem nenhum significado semântico no HTML. Se for algo importante, você deve utilizar ARIA para dar sentido a elas.

Tabela semelhante a tabela periódica com todas as tags do HTML e sua categoria.

Imagens

Grande parte da internet hoje em dia são imagens, sejam propagandas, anúncios, memes, selfies e sem a propriedade alt definida, todas elas se tornam sem sentido para um leitor de tela.

A propriedade alt na tag img deve receber um texto descrevendo o conteúdo da imagem. Quanto mais descritivo for, melhor para acessibilidade e até para o SEO.

A descrição do alt também é exibido caso o link da imagem esteja quebrado.

Exemplo do uso da propriedade alt

Veja a foto desse belo hot dog:

Está tudo bem descrevê-la assim:

<img src="hotdog.png" alt="hot dog" />

Melhor ainda seria descrevê-la com mais detalhes, assim:

<img src="hotdog.png" alt="Hot dog num prato com mostarda e pure de batata"/>

Um péssimo uso da propriedade alt seria assim, como um spam, imagine um leitor de tela lendo isso:

<img src="hotdog.png" alt="hot dog hotdog comida fastfood receita almoço junk food" />

Cores

É comum designers se basearem em cores para indicar estados; verde quando está tudo certo, vermelho quando tem algum erro, laranja para um alerta, etc. Mas, para pessoas daltônicas é bem difícil distinguir essas cores. O auxílio de labels, ícones, texturas também devem ser utilizados nesse momento.

Como começar a desenvolver com acessibilidade?

Desenvolver pensando em acessibilidade pode parecer inicialmente complicado, mas ao longo do tempo isso tende a se tornar natural. Conforme você aprende a usar as tags semanticamente corretas do HTML, descobre a utilidade de outras ou tenta navegar pelo seu site através do teclado.

Testar a acessibilidade enquanto desenvolvemos deve ser tão importante quanto testar o suporte em diferentes navegadores. Por isso, segue alguns links que podem ajudar.

ChromeVox

ChromeVox é um leitor de tela gratuito e está disponível através de uma extensão do Chrome que você pode instalar por aqui. Ele lê o conteúdo do seu site conforme você navega com o teclado. (Para desativa-lo/ativa-lo, basta clicar cmd + ctrl + A + A no iOS).

Lighthouse

Você pode auditar a acessibilidade do seu site com a ferramenta Lighthouse da Google. Ela faz parte do Chrome em Ferramentas do Desenvolvedor e te dá uma nota de 0 a 100 em questão de perfomance, acessibilidade, boas práticas e SEO.

React + ESLint

Pra quem valida o código no React com o ESLint, tem o plugin eslint-plugin-jsx-a11y que também procura por problemas de acessibilidade no JSX.

WCAG Checklist

No site a11yproject tem um checklist que segue as diretrizes do WCAG (The Web Content Accessibility Guidelines), que é um padrão de acessibilidade compartilhado entre indivíduos, organizações e governos. Ele é bem organizado entre categorias de conteúdo. Você pode acessa-lo por aqui.

Outras boas práticas

Zoom

Não desabilite o zoom na página através da metatag viewport do HTML. Existem inúmeros motivos pelos quais usuários podem querer aplicar o zoom na tela, como ver um detalhe numa imagem ou ler uma fonte que está pequena.

Foco

Não desabilite a borda dos elementos com foco através da propriedade outline: none no CSS. É dessa forma que usuários que navegam pelo teclado conseguem saber aonde o pointeiro do mouse estaria.

Conclusão

Acessibilidade não é uma funcionalidade extra em um app. Como desenvolvedores, devemos construir uma internet melhor e mais inclusiva para qualquer pessoa, independente de região, dispositivo, região e/ou deficiências.

Acessibilidade não deve ser apenas uma preocupação do desenvolvedor. Designers, gerentes de produtos, publicitários e todos envolvidos na criação de uma página também devem pensar na importância de acessibilidade na web.

Somente juntos podemos criar uma internet melhor, acessível, inclusiva e sem barreira para todos.