O documento discute a importância da acessibilidade na web para pessoas com deficiência, permitindo que elas percebam, entendam, naveguem e interajam no ambiente online. Ele fornece exemplos de como a web pode ser acessível para uma pessoa cega ou tetraplégica e destaca checklist e ferramentas para validar a acessibilidade de um site.

1. Murilo S. Ferreira
Dev. Frontend
Acessibilidade
na web

2. Acessibilidade na web
“Para as pessoas sem deficiência, a tecnologia
torna as coisas mais fáceis. Para as pessoas com
deficiência, a tecnologia torna as coisas
possíveis.” (RADABAUGH, 1993)

3. Acessibilidade na web
Acessibilidade na web significa
que pessoas com deficiência
podem usar a web. Mais
especificamente, a acessibilidade
na web significa que pessoas com
deficiência podem perceber,
entender, navegar, interagir e
contribuir para a web.

4. O Brasil tem 45,6 milhões de
pessoas com deficiência.
Visual, Auditiva, Motora, Cognitiva.

5. Acessibilidade para quem?
❏ Uma mulher cega, utilizando um leitor de
telas, pesquisa a restituição de imposto
de renda no sítio da Receita Federal;
❏ Uma jovem tetraplégica, utilizando
apenas um ponteiro na cabeça, procura
informações sobre células-tronco em
sítios especializados;

6. Acessibilidade para quem?
❏ Uma mulher com deficiência intelectual faz
exercícios pela web para melhorar sua
comunicação;
❏ Homem destro, com tendinite, faz pesquisa
na web para trabalho da faculdade,
utilizando com dificuldades o mouse, mas
navegando com a mão esquerda sem
encontrar barreiras de teclado na página;

7. SEO
Podemos considerar que o algoritmo
do Google é um usuário cego.
Logo, um site que está acessível para
cegos e para as pessoas com outras
deficiências vai ser percebido pelo
buscador como um site mais
relevante e bem estruturado.

8. Checklist
http://a11yproject.com/checklist.html
❏ Language attribute
❏ Document outline
❏ Links
❏ Table
❏ Images
❏ Color and Contrast
❏ Landmarks

9. Language
Declarar um atributo de idioma no
elemento HTML permite que um leitor de
tela leia o texto com a pronúncia correta.

11. Links
❏ :focus customizado
❏ Forneça um link "Ir para conteúdo
principal"

12. Tabelas
❏ Utilize tabelas com a finalidade de
disponibilizar dados tabulares, ou
seja, para organizar informações em
linhas e colunas.

13. Cabeçalhos
❏ Utilize apenas um h1 por página
❏ Usuários de leitores de tela, utilizam
a tecla h para navegar pelos
cabeçalhos da página.

14. ALT
❏ Descreva de forma clara e objetiva
suas imagens
❏ Imagens decorativas devem ser ir
para o css (background)

15. Cores e
Contraste
❏ Não transmita informações
unicamente por meio de
características sensoriais, tais como
cor.

16. Cores e
Contraste
❏ Um bom contraste é essencial para
pessoas com baixa visão, com
daltonismo e usuários que utilizam
monitores monocromáticos

17. Cores e
Contraste
https://developer.paciellogroup.com/r
esources/contrastanalyser

18. Teclado
Eventos que funcionam somente pelo
mouse são um grande problema para a
acessibilidade, pois nem todas as pessoas
conseguem utilizá-lo.

19. Validando
acessibilidade
http://wave.webaim.org/
http://www.dasilva.org.br/

20. Navegando com NVDA
Software leitor de tela
https://www.nvaccess.org/

21. Referências
❏ http://emag.governoeletronico.gov.br/cursode
senvolvedor/index.html
❏ http://www.w3c.br/pub/Materiais/Publicacoes
W3C/cartilha-w3cbr-acessibilidade-web-
fasciculo-I.html
❏ https://www.w3.org/Translations/WCAG20-pt-
PT/
❏ https://www.w3.org/WAI/intro/accessibility.ph
p#i-what