Criando Páginas Acessíveis

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.

Porque se preocupar com acessibilidade

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.

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.

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>

Tabelas acessíveis:

<table>
      <caption>Quantidade de Dias 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>

Imagens acessíveis:

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

Indicando os campos em um Formulário:

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

Deixe os Links descritivos para o destino remetido:  

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

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.

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.

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.

 

  • Adicione uma Ferramente de Libras ao seu Site. A seguinte ferramenta é capaz de traduzir os textos e áudio (apenas em português) do seu site para Libras.

Outras recomendações

  • Valide a sua Página Web. Você pode validar a sua página web com uma Extensão ou com programas automatizados como o CynthiaSays ou o Wave.

Até a próxima!

Made with Slides.com