O documento discute boas práticas de acessibilidade em programação, incluindo: (1) fornecer descrições úteis de imagens, links e alerts para usuários com deficiência visual, e (2) apoiar a navegação por teclado através do uso de landmarks, tabindex, teclas de atalho e hierarquia de cabeçalhos.

1. Programação para
acessibilidade
Demonstrar como boas práticas de código
podem atingir as principais
recomendações de acessibilidade.

2. Ajude o usuário a saber o que está
acontecendo na tela
Porque é importante?
Leitores de tela ainda não conseguem descrever uma imagem e nem percebem alerts.
Então como alguém que não enxerga pode ter acesso a tudo que está na tela?
Como aplicar?
1. Descrição útil de imagens
2. Descrição de links
3. Alerts

3. 1. Descrição útil de imagens
<img src=”image.jpg” alt=”descricao da imagem”/>
Descrição útil quer dizer que se a imagem adiciona compreensão ao conteúdo ela deve ser
descrita de maneira explicativa ao usuário, senao ela nao deve ter descricao, ou seja, imagens
decorativas devem ter o alt vazio.
Como fazer:
● Na descrição de imagens, seguimos uma fórmula: o que/quem + onde + como + faz o quê +
como + quando + de onde. A fórmula simplificada: formato + sujeito + paisagem +
contexto + ação;
● Evite a redundância na descrição. “A foto ilustra” é um pleonasmo. Seja simples, direto;
● Evite adjetivos que representam juízo de valor (bonito, feio, bom, mau, etc.);

4. 2. Descrição de links
<a href="#" onclick="abrepopupdetestável()" onkeypress="abrepopupdetestável()" title="Abre
uma janela pop-up detestável com Javascript">Monstro</a>
Descreva o que aquele link faz e para onde ele leva o usuário.
Também é bom explicar o que devia (mas não vai) acontecer para usuários que não tem
Javascript.

5. 3. Alerts
<div class="message" role="status">Changes saved!</div>
A diferença entre status e alert é que um alert interromperá o leitor de tela se ele estiver
anunciando outra coisa, status aguardará até que o leitor de tela tenha terminado de anunciar.
Exemplo inacessível

6. De suporte para navegação por teclado
Porque é importante?
Pessoas com mobilidade reduzida, você que perdeu o mouse ou quebrou o braço. O
acesso a todo o site deve ser possível por meio do teclado
Como aplicar?
1. Landmarks roles e HTML5 semântico
2. Tabindex
3. Teclas de atalho
4. Hierarquia de cabeçalhos
5. Modais

7. 1. Landmarks roles e HTML5 semântico
<main role="main">Conteúdo principal</main>
Usando as tags do HTML5 e landmarks roles ajudamos usuários com leitores de tela a
perceberem que tipo de sessão eles estão acessando no site e pular de uma sessão para a outra.
ATENÇÃO: Como só funciona em leitores de tela, ainda precisamos adicionar botões invisíveis
para pular para conteúdo principal

8. 2. Tabindex
<p><a href="#" tabindex="3">Link 1</a></p>
<p><a href="#" tabindex="1">Link 2</a></p>
<p><a href="#" tabindex="2">Link 3</a></p>
O tabindex é usado para forçar uma ordem na navegação por tabs. Não é uma boa prática usa-
los
O tabindex = 0 é usado para elementos que não são focalizados mas devem ter focus. Devem ser
usados em elementos como modais

9. 3. Teclas de atalho
<a href="algumapagina.html" accesskey="a">Alguma Página</a>
O problema com teclas de atalho é que geralmente não existe nenhum jeito do usuário
descobrir onde elas estão (a não ser que ele olhe o código fonte).
Algumas técnicas para facilitar são:
1. Optar por uma página separada explicando as funcionalidades relacionadas à
acessiblilidade, incluindo as teclas de atalho.
2. Um método que está crescendo em popularidade é sublinhar a primeira letra do link,
similar ao método usado nos menus da maioria dos programas Windows.
3. Deixar um box de ajuda invisível definindo a largura e o comprimento do elemento como
zero (width: 0; height: 0; overflow: hidden;)
4. Deixar explícito na descrição do link (layout)

10. 4. Hierarquia de cabeçalhos
<h1> Texto principal </h1>
<h2> Texto secundario </h2>
<h3> Texto terciario </h3>
A ordem de importância dos textos orientam a navegação pelo leitor de tela, por isso e
importante cuidar para que haja esta hierarquia

11. 5. Modais
HTML
<div class="modal" id="modal2" tabindex="0"></div>
Javascript
function showModal() { var modal = document.getElementById('modal2'); modal.focus(); }
Exemplo inacessível
Exemplo acessivel

12. Obrigada!