Acessibilidade na web

Transcript

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-fasci culo-I.html ❏ https://www.w3.org/Translations/WCAG20-pt- PT/ ❏ https://www.w3.org/WAI/intro/accessibility.ph p#i-what