Acessibilidade

Pela definição da W3C, acessibilidade significa que sites, ferramentas e tecnologias são projetadas e desenvolvidas para que todas as pessoas possam usá-las. Se espera todos possam: perceber, entender, navegar e interagir com a Web e contribuir para a Web.

Porque se preocupar com acessibilidade

Antes de tudo, você deveria se preocupar com isso como um exercício de humanidade. As pessoas com deficiência lidam com muitos desafios diariamente. Se elas estão entre seus clientes ou usuários, permitir que eles interajam com seu aplicativo da web é o mínimo que você precisa fazer.

Há dados de que 1 bilhão de pessoas em todo o mundo e 20% de todos os usuários de internet tenham alguma forma de deficiência.

No Brasil, segundo o , quase 46 milhões de brasileiros, cerca de 24% da população, declarou ter pelo menos um tipo de deficiência – visual, auditiva, motora e intelectual.

Além disso a legislação atual em todo o mundo está se movendo em uma direção onde a acessibilidade está se tornando uma característica obrigatória da web.

Respeite a semântica do HTML

Um site com uma boa estruturação, ou seja, com uma boa semântica é lido perfeitamente pelos os softwares de acessibilidade. Você pode adicionar atributos aos elementos para ajudar o usuário a saber o que está acontecendo ali. Exemplos:

Para navegar pela página com o botão Tab:

  <div tabindex="0">Div 1</div>
  <div tabindex="1">Div 2</div>
  <div tabindex="2">Div 3</div>
  <div tabindex="-1">Div Não-Acessível</div>

A função do tabindex é definir como um elemento deve se comportar durante a navegação através do teclado. Ele pode receber os seguintes valores.
Caso ele receba um valor negativo (ex: -1) ele não poderá ser acessado pela a tecla Tab.
Caso ele receba um número inteiro e ordenado (ex: 1,2) essa será a ordem o qual ele seguirá, e por final a última forma de utilização é atribuindo o valor zero, neste caso a ordem a ser selecionada será definida pelo o DOM.
Lembrando que para um elemento ser considerado focalizável deve satisfazer todas as seguintes condições: 1. Possuir a propriedade tabindex definida. 2. Estar renderizado na página. 3. Não ser um elemento inerte. 4. Não estar desabilitado (propriedade disabled).

Tabelas acessíveis:

  <table>
      <caption>Quantidade de Dias em no Mês</caption>
      <thead>
          <tr>
              <th scope="col">Mês</th>
              <th scope="col">Quantidade de Dias</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th scope="row">Janeiro</th>
              <td>31</td>
          </tr>
          <tr>
              <th scope="row">Fevereiro</th>
              <td>28</td>
          </tr>
      </tbody>
  </table>

O Caption tem como objetivo dizer sobre o que a tabela se trata. Quando você atribui ao scope um row ou col, você indica o que é Coluna e o que é Linha.

Imagens acessíveis:

  <img src="coelho.png" alt="Imagem de Coelho, sentado comendo uma Cenoura">

A função do alt é transcrever a imagem para o usuário.

Indicando os campos em um Formulário:

  <div>
      <label for="nome">Nome:</label>
      <input type="text" id="nome" name="nome" placeholder="Nome">
  </div>

O label é associado ao input, então fica fácil de indicar o que é solicitado no campo.

Deixe os Links descritivos para o destino remetido:

<a href="paginainicial.html" title="Ir para Página inicial">Página Inicial</a>

O atributo title é ótimo para dar uma descrição ao seu link. Essa descrição é lida pelos os softwares, e aparece um popover quando se passa o cursor em cima.

Manipulando o CSS de forma correta.

É possível mudar o tamanho das fontes e das cores de um site utilizando o CSS. Um dos cuidados especiais que temos que ter com o css é o Espaçamento entre as letras e os constrates de cores.

Devemos tomar alguns cuidados ao criar o design de um site, temos que pensar muito bem nas animações, e o contraste entre os planos.

Imagens decorativas.

A ideia é que as imagens decorativas sejam ignoradas pelo leitor de tela, então essas imagens devem ser inseridas pelo CSS e não deverão ter o alt para que possam ser ignoradas pelo leitor.

É possível inserir dessa forma:

  <span class="icone-social"></span>
  <a href="#">Meu Facebook!</a>

  .icone-social {
      background-image: url(../img/icone_facebook.png);
  }

Imagens com textos.

Quando há uma imagem com textos que informam e passam alguma mensagem importante, não é bom limitar apenas para aqueles que não utilizam leitores de tela.

Também, não use uma imagem com texto como botão, faça um botão manual com o HTML e CSS, para que seja lido pelo leitor de tela e o usuário entenda o que o botão faz e se deseja clicar nele, caso não seja possível, não esqueça de descrever com atributo alt o que o link significa. Seja claro com a frase de um botão, tomando cuidado para não deixar vago demais.

Outras recomendações

Não é uma boa ideia colocar um temporizador na página para que ela atualize após um tempo, pois pode causar confusão para uma pessoa com deficiência visual, já que utilizam leitores de tela.

Referências

PreviousCriando páginas acessíveis NextDesafios

Last updated 5 years ago

Was this helpful?

<table> <caption>Quantidade de Dias em no Mês</caption> <thead> <tr> <th scope="col">Mês</th> <th scope="col">Quantidade de Dias</th> </tr> </thead> <tbody> <tr> <th scope="row">Janeiro</th> <td>31</td> </tr> <tr> <th scope="row">Fevereiro</th> <td>28</td> </tr> </tbody> </table>