Acessibilidade no desenvolvimento web

1. Web acessível

2. Sumário
• Introdução
o O que é acessibilidade?
o A quem se destina?
• Acessibilidade na Web
• WCAG
o Princípios
o Recomendações
› Níveis de prioridade
• Validação
• Bibliografia

3. O que é acessibilidade?
• Segundo a legislação brasileira:
Acessibilidade é condição para utilização, com segurança e autonomia,
total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das
edificações, dos serviços de transporte e dos dispositivos, sistemas e
meios de comunicação e informação, por pessoa com deficiência ou
com mobilidade reduzida.
DECRETO Nº 5.296 DE 2 DE DEZEMBRO DE 2004.
https://www.planalto.gov.br/ccivil_03/_Ato2004-
2006/2004/Decreto/D5296.htm

4. O que é acessibilidade?
• Segundo a WAI(Web Accessibility Initiative):
Acessibilidade na Web significa que pessoas com deficiências podem
perceber, entender, navegar e interagir além de poder contribuir para a web.

5. O que é acessibilidade?
Acessibilidade na web diz respeito à facilidade de acesso, por
qualquer pessoa, independente de condições físicas, técnicas ou
dispositivos.

6. A quem se destina?
Acessibilidade é
para todos

7. A quem se destina?
• Deficientes visuais
o Cegos: Pessoas que navegam com leitores de tela
o Daltônicos: Dificuldade em enxergar cores e contrastes
o Baixa visão: Necessidade de aumento de tela para ler
• Deficientes auditivos
o Pessoas que não conseguem acompanhar um vídeo na internet com áudio.
• Deficientes motores
o Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou
que tenham dificuldades com o uso do mouse.

8. A quem se destina?
• Displays reduzidos
o Acessando a internet por um telefone celular.
• Deficiência temporária
o Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas,
tendinite, etc.
• Início de aprendizado
o Pessoas que estão iniciando seu processo de informatização ou crianças
descobrindo o computador.
• Idade avançada
o Pessoas mais velhas, com dificuldades para ler letras pequenas e usar do mouse.

9. A quem se destina?
Fazer um site acessível não é só se preocupar com um
determinado grupo de pessoas: É se preocupar com
todas as pessoas que acessam seu site.

10. Acessibilidade na Web
Os desenvolvedores de páginas Web devem levar em consideração
diferentes situações ao criar uma página. A Web pode ser utilizada por
pessoas que:
• sejam incapazes de ver, ouvir, se deslocar, ou interpretar determinados
tipos de informações;
• tenham dificuldade em ler ou compreender textos;
• não tenham um teclado ou mouse, ou não sejam capazes de utilizá-los;
• possuam tela que apresenta apenas texto, ou com dimensões
reduzidas, ou ainda uma conexão lenta com a Internet;

11. Acessibilidade na Web
Os desenvolvedores de páginas Web devem levar em consideração
diferentes situações ao criar uma página. A Web pode ser utilizada por
pessoas que:
• não falem ou compreendam fluentemente o idioma em que o
documento foi escrito;
• estejam com seus olhos, mãos ou ouvidos ocupados (por exemplo em
um ambiente barulhento ou fora de casa ou do trabalho);
• possuam uma versão ultrapassada de navegador web, diferente dos
habituais, um navegador por voz, ou um sistema operacional pouco
convencional.

12. WCAG 1.0
Web Content Accessibility Guidelines
• É uma recomendação W3C de 5 de maio de 1999
• As recomendações explicam como tornar o conteúdo Web acessível a pessoas
com deficiências.
No entanto, faz também com que o conteúdo da Web se torne de mais fácil acesso
a todos os usuários:
• independentemente da ferramenta usada (computadores de mesa, laptops,
telefones celulares, ou navegador por voz) e das
• limitações associadas ao respectivo uso (ambientes barulhentos, salas mal
iluminadas ou com excesso de iluminação, utilização sem o uso das mãos).

13. WCAG 2.0
• É uma recomendação W3C de 11 Dezembro de 2008
• Os critérios de sucesso do WCAG 2.0 são escritos como declarações
testáveis, que não são especificamente tecnológicas.
• As WCAG 2.0 foram desenvolvidas através do processo W3C em
colaboração com pessoas e organizações em todo o mundo, com o
objetivo de elaborar um padrão compartilhado referente à acessibilidade
para o conteúdo da Web, que satisfaça as necessidades das pessoas, das
organizações e dos governos, a nível internacional.

14. Níveis de Abordagem das WCAG 2.0
• Princípios - os principais princípios que constituem a fundação da
acessibilidade da Web: perceptível, operável, compreensível e robusto.
• Recomendações - apresentam os objetivos básicos que os
desenvolvedores devem atingir para tornar o conteúdo mais acessível aos
usuários com diferentes incapacidades.
• Critérios de Sucesso - para satisfazer as necessidades dos diferentes
grupos e situações, são definidos três níveis de conformidade:
o A (o mais baixo), AA e AAA (o mais elevado).

15. Princípio 1: Perceptível
A informação e os componentes da interface do usuário têm de ser
apresentados aos usuários em formas que eles possam perceber
• Alternativas em Texto: Fornecer alternativas em texto.
o Atributo “alt”?
• Mídias com base no tempo: Fornecer alternativas para mídias com base
no tempo.
o Legendas e descrição do conteúdo sonoro
• Adaptável: Criar conteúdos que possam ser apresentados de diferentes
maneiras (por ex., um layout mais simples) sem perder informação ou
estrutura.
o CSS para impressão (print) e telas menores (handheld)

16. Princípio 2: Operável
Os componentes de interface de usuário e a navegação têm de ser
operáveis
• Acessível por Teclado: Fazer com que toda a funcionalidade fique
disponível a partir do teclado.
o Estruturação do conteúdo
• Ataques Epilépticos: Não criar conteúdo de uma forma conhecida que
possa causar ataques epilépticos.
o Evitar piscar de telas
• Navegável: Fornecer formas de ajudar os usuários a navegar, localizar
conteúdos e determinar o local onde estão.
o Finalidade do link (contexto)

17. Princípio 3: Compreensível
A informação e a utilização da interface de utilizador têm de ser
compreensíveis.
• Legível: Tornar o conteúdo de texto legível e compreensível.
o Identificação do idioma, abreviaturas, etc.
• Previsível: Fazer com que as páginas Web surjam e funcionem de forma
previsível.
o Evitar que links abram novas janelas sem que o usuário saiba.

18. Princípio 4: Robusto
O conteúdo deve ser suficientemente robusto para ser interpretado de
forma fiável por uma ampla variedade de agentes de utilizador,
incluindo as tecnologias de apoio.
• Compatível: Maximizar a compatibilidade com atuais e futuros agentes de
usuário, incluindo tecnologias assistivas.
o Evitar elementos em desuso das tecnologias do W3C

19. Recomendações
As recomendações da W3C foram divididas em 3 prioridades:
• Prioridade 1 - O que os desenvolvedores web DEVEM satisfazer;
• Prioridade 2 - O que os desenvolvedores web DEVERIAM satisfazer;
• Prioridade 3 - O que os desenvolvedores web PODEM satisfazer;

20. Recomendação 1
• Fornecer alternativas ao conteúdo sonoro e visual
o Utilizar "alt" para os elementos IMG, INPUT e APPLET ou fornecer um
equivalente textual como parte do conteúdo dos elementos OBJECT e APPLET.
• Exemplos:
<img src=“imagem.jpg" alt="Foto do Arco do Triunfo">
<applet alt=“Descrição do aplicativo"></applet>
<input type="image" src=“enviar.png" value="Enviar" alt="Enviar dados">

21. Recomendação 1
<img src="logos.gif" alt="Logotipos" border="0" usemap="#Map">
<map name="Map">
<area shape="circle" coords="79,105,58" href="logo-01.htm" alt="Página do Logo 01">
<area shape="circle" coords="211,221,58" href="logo-02.htm" alt="Página do Logo 02">
</map>

22. Recomendação 2
• Não recorrer apenas à cor
o Clique no botão vermelho para continuar:
o Clique no número 3 para continuar:

23. • Indicar claramente qual o idioma utilizado
o Identificar claramente quaisquer mudanças de idioma no texto de um
documento, bem como nos equivalentes textuais (por ex., legendas).
HTML:
<html lang="pt-br">
XHTML:
<html xml:lang="pt-br“>
HTML (acrônimo para a expressão inglesa <span lang=“en”>HyperText Markup Language</span>, que
significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir
páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do
"casamento" dos padrões <span lang=“en”> HyTime</span> e SGML.
Recomendação 3

24. Recomendação 4
• Criar tabelas passíveis de transformação harmoniosa
o Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou
de coluna, utilizar marcações para associar as células de dados às células de
cabeçalho.

25. Recomendação 5
• Assegurar que as páginas dotadas de novas tecnologias sejam transformadas
harmoniosamente
o Organizar os documentos de tal forma que possam ser lidos sem recurso a folhas de
estilo.

26. Recomendação 6
• Assegurar a clareza e a simplicidade dos documentos
○ Utilizar linguagem mais clara e simples possível, adequada ao conteúdo do
site.
Um site com linguagem clara facilita a possibilidade de aprofundamento
do usuário em seu conteúdo.
o Complementar o texto com apresentações gráficas ou sonoras;

27. Validação
• A validação da acessibilidade deve ser feita por meio de ferramentas
automáticas e da revisão direta. Os métodos automáticos são
geralmente rápidos, mas não são capazes de identificar todas as
variantes da acessibilidade.
• A avaliação humana pode ajudar a garantir a clareza da linguagem e a
facilidade da navegação.

28. Validação
1 - Utilizar uma ferramenta de acessibilidade automatizada, e uma
ferramenta de validação de navegadores.
2 - Validar a sintaxe (por ex., HTML, XML).
o http://validator.w3.org/
3 - Validar as folhas de estilo (por ex., CSS).
○http://jigsaw.w3.org/css-validator/
4 - Utilizar um navegador exclusivamente textual ou um emulador.

29. Validação
5 - Utilizar vários navegadores gráficos, com:
o som e gráficos ativos;
o sem gráficos;
o sem som;
o sem mouse;
o sem carregar frames, programas interpretáveis, folhas de estilo ou applets.
6 - Utilizar vários navegadores, antigos e recentes.
7 - Utilizar um navegador de emissão automática de fala, um leitor de tela,
software de ampliação, uma tela de pequenas dimensões.

30. Validação
8 - Utilizar corretores ortográficos e gramaticais. A eliminação de problemas
gramaticais aumenta o grau de compreensão.
9 - Rever o documento, verificando sua clareza e simplicidade.
10 - Peça a pessoas com deficiências que revejam os documentos.

31. Web acessível na prática

32. Bibliografia
• BARBOSA, S. J.; SILVA B. S. Interação Humano-Computador. Rio de Janeiro:
Elsevier, 2010.
• http://www.maujor.com/tutorial/acessibilidade/tentest.php
• http://www.w3c.br/palestras/2009/conip2009/slidy/template.html
• http://www.w3.org/WAI/
• http://www.w3.org/Translations/WCAG20-pt-PT/#guidelines