Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
Acessibilidade na Web:
o caminho das pedras ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
2
O Consórcio World Wide Web (W3C)
É um cons...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
3
O W3C no Brasil
O escritório brasileiro co...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
4
Missão do W3C
Conduzir a World Wide Web pa...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
5
O W3C desenvolve padrões
Conduzir a World ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
6
Metas W3C
• Web para todos
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
7
Metas W3C
Tornar os benefícios da web (seu...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
8
Metas W3C
• Web para todos
• Web em qualqu...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
9
Metas W3C
Possibilitar que o acesso de qua...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
10
Metas W3C
• Web para todos
• Web em qualq...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
11
Metas W3C
Não apenas um grande livro hipe...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
12
Metas W3C
• Web para todos
• Web em qualq...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
13
Metas W3C
Uma web em que as transações so...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
14
Acessibilidade na Web
O que é acessibilid...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
15
O que é acessibilidade?
Segundo a legisla...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
16
O que é acessibilidade?
Segundo a Wikiped...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
17
O que é acessibilidade?
Segundo a WAI:
Ac...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
18
O que é acessibilidade?
Acessibilidade na...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
19
Acessibilidade na web: A quem se destina?...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
20
Acessibilidade na web: A quem se destina?...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
21
Acessibilidade na web: A quem se destina?...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
22
Acessibilidade na web: A quem se destina?...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
23
WAI e WCAG
WAI - Web Accessibility Initia...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
24
Tutorial de
Acessibilidade na Web
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
25
WCAG 1.0
• É uma recomendação W3C de 5 de...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
26
WCAG 1.0
• No entanto, sua observância fa...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
27
Introdução
Os desenvolvedores de páginas ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
28
Introdução
Os desenvolvedores de páginas ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
29
Introdução
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
30
Introdução
Utilização de Folhas de Estilo...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
<font face=“verdana” size=“2” color=“black”>...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
32
Introdução
Utilização de Folhas de Estilo...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
33
Introdução
Utilização de Folhas de Estilo...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
34
Introdução
Tornar imagens acessíveis
Algu...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
35
Introdução
Tornar imagens acessíveis
<bod...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
36
Introdução
Tornar imagens acessíveis
<bod...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
37
Introdução
Tornar imagens acessíveis
<bod...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
38
Introdução
Tornar imagens acessíveis
<bod...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
39
Introdução
Tornar imagens acessíveis
Além...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
40
Introdução
Tornar imagens acessíveis
Embo...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
41
Temas para designs acessíveis
Para manter...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
42
Níveis de prioridade
O grupo de trabalho ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
43
Níveis de prioridade
O grupo de trabalho ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
44
Níveis de prioridade
O grupo de trabalho ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
45
Recomendações
Recomendações para a acessi...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
46Recomendação 1
Fornecer alternativas ao co...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
47Recomendação 1
Fornecer alternativas ao co...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
48Recomendação 1
Fornecer alternativas ao co...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
1
49
Recomendação 2 - Não recorrer apenas à ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
50
Recomendação 2 - Não recorrer apenas à co...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
1
51
Recomendação 2 - Não recorrer apenas à ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
52
Recomendação 2 - Não recorrer apenas à co...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
53
Recomendação 3 - Utilizar corretamente ma...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
Em CSS, utilizar 'em' ou percentagens em vez...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
H1
55
Recomendação 3 - Utilizar corretamente...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
56
Recomendação 3 - Utilizar corretamente ma...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
57
Recomendação 3 - Utilizar corretamente ma...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
HTML: XHTML:
<html lang="pt-br"> <html xml:l...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
<acronym title="HyperText Markup Language">H...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
60Recomendação 5 - Criar tabelas passíveis d...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
61Recomendação 5 - Criar tabelas passíveis d...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
62Recomendação 5 - Criar tabelas passíveis d...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
63Recomendação 6 - Assegurar que as páginas ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
64Recomendação 6 - Assegurar que as páginas ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
65Recomendação 7 - Assegurar o controle do u...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
66Recomendação 7 - Assegurar o controle do u...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
67Recomendação 7 - Assegurar o controle do u...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
68Recomendação 7 - Assegurar o controle do u...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
69Recomendação 9 - Projetar páginas consider...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
70Recomendação 9 - Projetar páginas consider...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
71Recomendação 9 - Projetar páginas consider...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
72
Recomendação 10 - Utilizar soluções de tr...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
73
Recomendação 10 - Utilizar soluções de tr...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
74
Recomendação 10 - Utilizar soluções de tr...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
75Recomendação 11 - Utilizar tecnologias e
r...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
76Recomendação 11 - Utilizar tecnologias e
r...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
77Recomendação 12 - Fornecer informações de
...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
78Recomendação 12 - Fornecer informações de
...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
79Recomendação 13 - Fornecer mecanismos de
n...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
80Recomendação 13 - Fornecer mecanismos de
n...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
81Recomendação 14 - Assegurar a clareza e a
...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
82Recomendação 14 - Assegurar a clareza e a
...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
83
Validação
A validação da acessibilidade d...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
84
Validação
2 - Validar a sintaxe (por ex.,...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
85
Validação
4 - Utilizar um navegador exclu...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
86
Validação
8 - Utilizar corretores ortográ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
87
WCAG 2.0
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
88
WCAG 2.0
• É uma recomendação W3C de 11 D...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
89
Níveis de Abordagem das WCAG 2.0
• Princí...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
90
Princípio 1: Perceptível - A informação e...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
91
Princípio 1: Perceptível - A informação e...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
92
Princípio 2: Operável - Os componentes de...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
93
Princípio 2: Operável - Os componentes de...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
94
Princípio 3: Compreensível - A informação...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
95
Princípio 3: Compreensível - A informação...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
96
Princípio 4: Robusto - O conteúdo tem de ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
97
Princípio 4: Robusto - O conteúdo tem de ...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
98
Documentos de Apoio das WCAG 2.0
Como cum...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
99
DICAS RÁPIDAS PARA CONSTRUIR WEB SITES AC...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
100
DICAS RÁPIDAS PARA CONSTRUIR WEB SITES A...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
101
Música tema do WCAG 2.0
"Nós queremos lh...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
102
Links importantes
WCAG 1.0
• Inglês: htt...
Acessibilidade na Web:
o caminho das pedras para construir sítios acessíveis.
103
W3C Escritório Brasil
Av. das Nações Uni...
Próximos SlideShares
Carregando em…5
×

Tutorial de acessibilidade na Web - 2009

1.413 visualizações

Publicada em

Tutorial de acessibilidade abordando WCAG 1.0 e alguns pontos da segunda versão dos padrões de acessibilidade

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.413
No SlideShare
0
A partir de incorporações
0
Número de incorporações
335
Ações
Compartilhamentos
0
Downloads
21
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tutorial de acessibilidade na Web - 2009

  1. 1. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. Reinaldo Ferraz junho/2009
  2. 2. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 2 O Consórcio World Wide Web (W3C) É um consórcio internacional, criado em 1994 por Tim Berners-Lee com • organizações filiadas, • uma equipe em tempo integral, • participação do público para colaborativamente desenvolver padrões universais para a Web.
  3. 3. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 3 O W3C no Brasil O escritório brasileiro começou suas atividades em outubro de 2007. É uma iniciativa do Comitê Gestor da Internet no Brasil (CGI.br) e do Núcleo de Informação e Coordenação do Ponto BR (NIC.br)
  4. 4. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 4 Missão do W3C Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.
  5. 5. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 5 O W3C desenvolve padrões Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo. Desde sua fundação, o W3C publicou mais de 110 de padrões, denominados Recomendações do W3C Web Standards – Padrões Web
  6. 6. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 6 Metas W3C • Web para todos
  7. 7. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 7 Metas W3C Tornar os benefícios da web (seu valor social: comunicação humana, comércio, compartilhar conhecimentos) disponíveis a todos, independente de • Web para todos – Hardware – Software – Infra-estrutura de rede – Idioma – Cultura – Localização geográfica – Habilidade física – Habilidade mental
  8. 8. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 8 Metas W3C • Web para todos • Web em qualquer dispositivo
  9. 9. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 9 Metas W3C Possibilitar que o acesso de qualquer tipo de dispositivo seja tão simples, fácil e conveniente quanto de um computador convencional • Web em qualquer dispositivo – Computadores – Desktops – Netbooks – Telefones – PDAs – TV digital – Sistemas de interação por voz – Aparelhos domésticos – … web ubíqua
  10. 10. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 10 Metas W3C • Web para todos • Web em qualquer dispositivo • Web base de conhecimento
  11. 11. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 11 Metas W3C Não apenas um grande livro hiperlinkado onde pessoas possam pesquisar, navegar, ler e visualizar informações Possibilitar que computadores interpretem, estabeleçam inferências e relações na web Interoperabilidade – Web Semântica • Web base de conhecimento
  12. 12. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 12 Metas W3C • Web para todos • Web em qualquer dispositivo • Web base de conhecimento • Web confiável e segura
  13. 13. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 13 Metas W3C Uma web em que as transações sociais e comunicações com terceiros sejam estabelecidas em relações de confiança, sejam pessoas, organizações ou serviços • Web confiável e segura – Ambiente mas colaborativo – responsável – seguro – Confiança – Confidência
  14. 14. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 14 Acessibilidade na Web O que é acessibilidade?
  15. 15. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 15 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
  16. 16. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 16 O que é acessibilidade? Segundo a Wikipedia: Acessibilidade significa não apenas permitir que pessoas com deficiências participem de atividades que incluem o uso de produtos, serviços e informação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população.
  17. 17. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 17 O que é acessibilidade? Segundo a WAI: Acessibilidade na Web significa que pessoas com deficiências podem usar a web. Mais especificamente, acessibilidade na Web significa que pessoas com deficiências possam perceber, entender, navegar e interagir com a web além de poder contribuir para a web.
  18. 18. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 18 O que é acessibilidade? Acessibilidade na web diz respeito à facilidade de acesso, por qualquer pessoa, independente de condições físicas, técnicas ou dispositivos.
  19. 19. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 19 Acessibilidade na web: A quem se destina? Acessibilidade é para todos
  20. 20. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 20 Acessibilidade na web: A quem se destina? Deficientes visuais - Cegos: Pessoas que navegam com leitores de tela - Daltônicos: Dificuldade em enxergar cores e contrastes - Baixa visão: Necessidade de aumento de tela para ler Deficientes auditivos - Pessoas que não conseguem acompanhar um vídeo na internet com áudio. Deficientes motores - Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou que tenham dificuldades com o uso do mouse.
  21. 21. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 21 Acessibilidade na web: A quem se destina? Displays reduzidos - Acessando a internet por um telefone celular. Deficiência temporária - Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas, tendinites, etc. Início de aprendizado - Pessoas que estão iniciando seu processo de informatização ou crianças descobrindo o computador Idade avançada - Pessoas mais velhas, com dificuldades para ler letras pequenas e usar do mouse
  22. 22. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 22 Acessibilidade na web: 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.
  23. 23. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 23 WAI e WCAG WAI - Web Accessibility Initiative Iniciativa do W3C que trabalha em conjunto com organizações de todo o mundo desenvolvendo estratégias, orientações e recursos para ajudar a tornar a Web acessível a pessoas com deficiência. WCAG - Web Content Accessibility Guidelines São as Recomendações para a acessibilidade do conteúdo da Web, documentos que explicam como tornar o conteúdo Web acessível a pessoas com deficiências, destinando-se a todos os criadores de conteúdo Web (autores de páginas e projetistas de sites) e aos programadores de ferramentas para criação de conteúdo. Versão 1.0: 5 de maio de 1999 Versão 2.0: 11 de dezembro de 2008
  24. 24. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 24 Tutorial de Acessibilidade na Web
  25. 25. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 25 WCAG 1.0 • É uma recomendação W3C de 5 de maio de 1999 • Foi traduzido para o português Cláudia Dias, auditora da tecnologia da informação do Tribunal de Contas da União (TCU) • As recomendações explicam como tornar o conteúdo Web acessível a pessoas com deficiências.
  26. 26. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 26 WCAG 1.0 • No entanto, sua observância 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).
  27. 27. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 27 Introdução 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;
  28. 28. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 28 Introdução 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.
  29. 29. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 29 Introdução
  30. 30. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 30 Introdução Utilização de Folhas de Estilo (CSS) Vantagens da utilização de Folhas de Estilo - Obter maior controle e domínio sobre as páginas criadas - Redução do tempo de transferência de páginas
  31. 31. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. <font face=“verdana” size=“2” color=“black”>Seu texto</font> body { color: #ffffff; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 2em; } Seu texto 31 Introdução Utilização de Folhas de Estilo (CSS)
  32. 32. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 32 Introdução Utilização de Folhas de Estilo (CSS) <font></font> <font></font> <font></font> <font></font> <font></font><font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font><font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> CSS
  33. 33. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 33 Introdução Utilização de Folhas de Estilo (CSS) <font></font> <font></font> <font></font> <font></font> <font></font><font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font><font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> CSS
  34. 34. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 34 Introdução Tornar imagens acessíveis Alguns usuários podem não ser capazes de ver imagens; outros podem utilizar navegadores textuais e que não suportam imagens; e ainda outros podem ter desativado o suporte a imagens (por ex., porque possuem uma conexão lenta com a Internet)
  35. 35. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 35 Introdução Tornar imagens acessíveis <body> <img src="foto-01.gif" alt=""> O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris, construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua construção em 1806. Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées. </body>
  36. 36. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 36 Introdução Tornar imagens acessíveis <body> <img src="foto-01.gif" alt=""> O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris, construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua construção em 1806. Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées. </body>
  37. 37. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 37 Introdução Tornar imagens acessíveis <body> <img src="foto-01.gif" alt=“Foto: Divulgação"> O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris, construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua construção em 1806. Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées. </body>
  38. 38. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 38 Introdução Tornar imagens acessíveis <body> <img src="foto-01.gif" alt=“Foto do Arco do Triunfo"> O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris, construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua construção em 1806. Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées. </body>
  39. 39. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 39 Introdução Tornar imagens acessíveis Além de beneficiarem os usuários deficientes, os equivalentes textuais contribuem para que todos e quaisquer usuários encontrem as páginas mais depressa, já que os mecanismos de busca podem se servir do texto em sua indexação.
  40. 40. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 40 Introdução Tornar imagens acessíveis Embora o fornecimento de equivalentes textuais de imagens e demais conteúdos multimídia seja da competência dos criadores de conteúdo Web, a apresentação das informações ao usuário é responsabilidade dos agentes do usuário (por ex., navegadores e tecnologias de apoio, como os leitores de tela, monitores Braille).
  41. 41. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 41 Temas para designs acessíveis Para manter uma página acessível, ela deve: • Separar a estrutura da apresentação • Incluir texto (equivalentes textuais) • Criar documentos que cumpram a sua finalidade e fornecer informações que se adaptem o melhor possível a canais sensoriais alternativos (áudio e vídeo) • Criar documentos que não dependam apenas de um tipo de equipamento.
  42. 42. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 42 Níveis de prioridade O grupo de trabalho atribuiu a cada ponto de verificação um nível de prioridade, com base no respectivo impacto, em termos de acessibilidade. [Prioridade 1] Pontos que os criadores de conteúdo Web devem satisfazer inteiramente. Se não o fizerem, um ou mais grupos de usuários ficarão impossibilitados de acessar as informações contidas no documento. A satisfação desse tipo de pontos é um requisito básico para que determinados grupos possam acessar documentos disponíveis na Web.
  43. 43. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 43 Níveis de prioridade O grupo de trabalho atribuiu a cada ponto de verificação um nível de prioridade, com base no respectivo impacto, em termos de acessibilidade. [Prioridade 2] Pontos que os criadores de conteúdos na Web deveriam satisfazer. Se não o fizerem, um ou mais grupos de usuários terão dificuldades em acessar as informações contidas no documento. A satisfação desse tipo de pontos promoverá a remoção de barreiras significativas ao acesso a documentos disponíveis na Web.
  44. 44. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 44 Níveis de prioridade O grupo de trabalho atribuiu a cada ponto de verificação um nível de prioridade, com base no respectivo impacto, em termos de acessibilidade. [Prioridade 3] Pontos que os criadores de conteúdos na Web podem satisfazer. Se não o fizerem, um ou mais grupos poderão se deparar com algumas dificuldades em acessar informações contidas nos documentos. A satisfação deste tipo de pontos irá melhorar o acesso a documentos armazenados na Web.
  45. 45. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 45 Recomendações Recomendações para a acessibilidade do conteúdo da Web
  46. 46. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 46Recomendação 1 Fornecer alternativas ao conteúdo sonoro e visual Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do conteúdo do elemento). [Prioridade 1] • 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="foto-01.gif" alt="Foto do Arco do Triunfo"> <applet alt=“Aplicativo gerador de documentos"></applet> <input type="text" name="nome" alt="Nome">
  47. 47. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 47Recomendação 1 Fornecer alternativas ao conteúdo sonoro e visual Fornecer links de texto redundantes relativos a cada região ativa de um mapa de imagem armazenado no servidor. [Prioridade 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>
  48. 48. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 48Recomendação 1 Fornecer alternativas ao conteúdo sonoro e visual Em apresentações multimídia baseadas em tempo (filme ou animação), sincronizar as alternativas equivalentes (legendas ou descrições sonoras dos trechos visuais) e a apresentação. [Prioridade 1]
  49. 49. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 1 49 Recomendação 2 - Não recorrer apenas à cor Assegurar que todas as informações veiculadas com cor estejam também disponíveis sem cor, por exemplo a partir do contexto ou de marcações. [Prioridade 1] Clique no botão vermelho para continuar 2 3 4 5 6 7 8
  50. 50. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 50 Recomendação 2 - Não recorrer apenas à cor Assegurar que todas as informações veiculadas com cor estejam também disponíveis sem cor, por exemplo a partir do contexto ou de marcações. [Prioridade 1] Clique no botão vermelho para continuar
  51. 51. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 1 51 Recomendação 2 - Não recorrer apenas à cor Assegurar que todas as informações veiculadas com cor estejam também disponíveis sem cor, por exemplo a partir do contexto ou de marcações. [Prioridade 1] Clique no número 3 para continuar 2 3 4 5 6 7 8 ou Clique no botão “Continuar” Continuar1 2 5 6
  52. 52. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 52 Recomendação 2 - Não recorrer apenas à cor Assegurar que a combinação de cores entre o fundo e o primeiro plano seja suficientemente contrastante para poder ser vista por pessoas com cromodeficiências, bem como pelas que utilizam monitores de vídeo monocromáticos. [Prioridade 2 para imagens; prioridade 3 para texto]
  53. 53. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 53 Recomendação 3 - Utilizar corretamente marcações e folhas de estilo Utilizar folhas de estilo para controlar a paginação (disposição em página) e a apresentação. [Prioridade 2] <font></font> <font></font> <font></font> <font></font> <font></font><font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font><font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> CSS
  54. 54. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. Em CSS, utilizar 'em' ou percentagens em vez das unidades absolutas 'pt' ou 'cm' Alguns navegadores aumentam o tamanho da fonte dentro do navegador. Utilizando unidades absolutas esse aumento fica prejudicado. Alguns navegadores já fazem “zoom” na tela inteira do website. 54 Recomendação 3 - Utilizar corretamente marcações e folhas de estilo Utilizar unidades relativas, e não absolutas, nos valores dos atributos da linguagem de marcação e nos valores das propriedades das folhas de estilo. [Prioridade 2]
  55. 55. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. H1 55 Recomendação 3 - Utilizar corretamente marcações e folhas de estilo Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações. [Prioridade 2] H2 H3 H3 H2 H3 H3
  56. 56. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 56 Recomendação 3 - Utilizar corretamente marcações e folhas de estilo Marcar corretamente listas e pontos de enumeração em listas. [Prioridade 2] <ul> <li>Primeiro texto <ul> <li>Sub texto</li> </ul> </li> <li>Segundo texto</li> </ul>
  57. 57. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 57 Recomendação 3 - Utilizar corretamente marcações e folhas de estilo Marcar corretamente listas e pontos de enumeração em listas. [Prioridade 2]
  58. 58. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. HTML: XHTML: <html lang="pt-br"> <html xml:lang="pt-br“> 58 Recomendação 4 - Indicar claramente qual o idioma utilizado Identificar claramente quaisquer mudanças de idioma no texto de um documento, bem como nos equivalentes textuais (por ex., legendas). [Prioridade 1] 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.
  59. 59. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. <acronym title="HyperText Markup Language">HTML</acronym> <abbr title="HyperText Markup Language">HTML</abbr> 59 Recomendação 4 - Indicar claramente qual o idioma utilizado Especificar por extenso cada abreviatura ou sigla quando da sua primeira ocorrência em um documento. [Prioridade 3] <acronym title="HyperText Markup Language">HTML</acronym> (que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.
  60. 60. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 60Recomendação 5 - Criar tabelas passíveis de transformação harmoniosa Em tabelas de dados, identificar os cabeçalhos de linha e de coluna. [Prioridade 1] <table> <tr> <th>Limão</th> <th>Maçã</th> <th>Pera</th> </tr> <tr> <td>R$ 10,00</td> <td>R$ 12,00</td> <td>R$ 11,00</td> </tr> </table>
  61. 61. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 61Recomendação 5 - Criar tabelas passíveis de transformação harmoniosa Em tabelas de dados, identificar os cabeçalhos de linha e de coluna. [Prioridade 1] <table> <tr> <th>Limão</th> <td>R$ 10,00</td> </tr> <tr> <th>Maçã</th> <td>R$ 12,00</td> </tr> <tr> <th>Pera</th> <td>R$ 11,00</td> </tr> </table>
  62. 62. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 62Recomendação 5 - Criar tabelas passíveis de transformação harmoniosa 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. [Prioridade 1] <table> <thead> <tr> <th>Produto</th> <th>Valor</th> </tr> </thead> <tbody> <tr> <td>Maçã</td> <td>R$ 12,00</td> </tr> </tbody> <tfoot> <tr> <td>R$ 10,00</td> <td>R$ 12,00</td> </tr> </tfoot> </table>
  63. 63. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 63Recomendação 6 - Assegurar que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente Organizar os documentos de tal forma que possam ser lidos sem recurso a folhas de estilo. Por exemplo, se um documento em HTML for reproduzido sem as folhas de estilo que lhe estão associadas, deve continuar a ser possível lê-lo. [Prioridade 1]
  64. 64. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 64Recomendação 6 - Assegurar que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente Assegurar que todas as páginas possam ser utilizadas mesmo que os programas interpretáveis, os applets ou outros objetos programados tenham sido desativados ou não sejam suportados. Se isso não for possível, fornecer informações equivalentes em uma página alternativa, acessível. [Prioridade 1] <a href=“javascript.open.novajanela”>Texto</a> JavaScript var link = document. open.novajanela(‘link’); function link() { […] } link.onclick = link; link.onkeypress = link; <a href=“link.htm” id=“link”>Texto</a>
  65. 65. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 65Recomendação 7 - Assegurar o controle do usuário sobre as alterações temporais do conteúdo Evitar concepções que possam provocar intermitência da tela, até que os agentes do usuário possibilitem o seu controle. [Prioridade 1] Nota: Uma intermitência ou pulsar na faixa de 4 a 59 pulsos por segundo (Hertz), sendo o pico de sensibilidade 20 pulsos por segundo, bem como uma rápida passagem de uma quase escuridão para uma iluminação excessiva (como a que ocorre nas luzes de tipo "strobe"), pode desencadear ataques ou ausências nas pessoas com epilepsia fotossensível.
  66. 66. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 66Recomendação 7 - Assegurar o controle do usuário sobre as alterações temporais do conteúdo Não criar páginas de atualização automática periódica, até que os agentes do usuário possibilitem parar essa atualização. [Prioridade 2] “HTTP-EQUIV=refresh”
  67. 67. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 67Recomendação 7 - Assegurar o controle do usuário sobre as alterações temporais do conteúdo Não utilizar marcações para redirecionar as páginas automaticamente, até que os agentes do usuário possibilitem parar o redirecionamento automático. Ao invés de utilizar marcações, configurar o servidor para que execute os redirecionamentos. [Prioridade 2] HTTP-EQUIV=“Refresh” CONTENT=“1; URL=www”
  68. 68. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 68Recomendação 7 - Assegurar o controle do usuário sobre as alterações temporais do conteúdo Nota: Os elementos BLINK e MARQUEE não são definidos em qualquer especificação HTML do W3C, e não devem ser utilizados.
  69. 69. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 69Recomendação 9 - Projetar páginas considerando a independência de dispositivos Assegurar que qualquer elemento dotado de interface própria possa funcionar de modo independente de dispositivos. [Prioridade 2]
  70. 70. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 70Recomendação 9 - Projetar páginas considerando a independência de dispositivos Assegurar que qualquer elemento dotado de interface própria possa funcionar de modo independente de dispositivos. [Prioridade 2]
  71. 71. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 71Recomendação 9 - Projetar páginas considerando a independência de dispositivos Criar uma seqüência lógica de tabulação para percorrer links, controles de formulários e objetos. [Prioridade 3]
  72. 72. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 72 Recomendação 10 - Utilizar soluções de transição Não provocar o aparecimento de janelas de sobreposição ou outras quaisquer, e não fazer com que o conteúdo da janela atual seja modificado sem que o usuário seja informado disso, até que os agentes do usuário tornem possível a desativação de janelas secundárias. [Prioridade 2] -Links interessantes - Link 01 (abre em uma nova janela) - Link 01 - Link 01
  73. 73. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 73 Recomendação 10 - Utilizar soluções de transição Assegurar o correto posicionamento de todos os controles de formulários que tenham rótulos implicitamente associados, até que os agentes do usuário venham a suportar associações explícitas entre rótulos e controles de formulários. [Prioridade 2] <form> <label for="nome">Nome: <input type="text" name="nome“ id="nome"></label> Sexo: <label for="masculino">Masculino <input type="radio" name="sexo" value="masc" id="masculino"></label> <label for="feminino">Feminino <input type="radio" name="sexo" value=“fem" id="feminino"></label> </form>
  74. 74. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 74 Recomendação 10 - Utilizar soluções de transição Incluir caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto, até que os agentes do usuário tratem corretamente os controles vazios. [Prioridade 3] <form> <label for="nome">Nome: <input type="text" name="nome“ id="nome“ value=“Digite seu nome”></label> Sexo: <label for="masculino">Masculino <input type="radio" name="sexo" value="masc" id="masculino"></label> <label for="feminino">Feminino <input type="radio" name="sexo" value=“fem" id="feminino"></label> </form>
  75. 75. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 75Recomendação 11 - Utilizar tecnologias e recomendações do W3C Utilizar tecnologias do W3C sempre disponíveis e adequadas a uma determinada tarefa; utilizar as versões mais recentes, desde que suportadas. [Prioridade 2] As presentes recomendações recomendam tecnologias do W3C (por ex., HTML, CSS), por várias razões: • As tecnologias do W3C incluem funções de acessibilidade "integradas". • As especificações do W3C são apreciadas nas fases iniciais dos projetos, para garantir que as questões de acessibilidade sejam levadas em conta na fase de criação. • As especificações do W3C são desenvolvidas segundo um processo aberto e consensual no setor de informática.
  76. 76. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 76Recomendação 11 - Utilizar tecnologias e recomendações do W3C Evitar funcionalidades desatualizadas de tecnologias do W3C. [Prioridade 2]
  77. 77. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 77Recomendação 12 - Fornecer informações de contexto e orientações. Dar, a cada frame, um título que facilite a identificação dos frames e sua navegação. [Prioridade 1] Por exemplo, em HTML, utilizar o atributo "title" nos elementos FRAME. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>A simple frameset document</TITLE> </HEAD> <FRAMESET cols="10%, 90%" title="Our library of electronic documents"> <FRAME src="nav.html" title="Navigation bar"> <FRAME src="doc.html" title="Documents"> <NOFRAMES> <A href="lib.html" title="Library link"> Select to go to the electronic library</A> </NOFRAMES> </FRAMESET>
  78. 78. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 78Recomendação 12 - Fornecer informações de contexto e orientações. Dividir grandes blocos de informação em grupos mais fáceis de gerenciar, sempre que for o caso. [Prioridade 2] <FORM action="http://example.com/adduser" method="post"> <FIELDSET> <LEGEND>Personal information</LEGEND> <LABEL for="firstname">First name: </LABEL> <INPUT type="text" id="firstname" tabindex="1"> <LABEL for="lastname">Last name: </LABEL> <INPUT type="text" id="lastname" tabindex="2"> ...more personal information... </FIELDSET> <FIELDSET> <LEGEND>Medical History</LEGEND> ...medical history information... </FIELDSET> </FORM>
  79. 79. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 79Recomendação 13 - Fornecer mecanismos de navegação claros Identificar claramente o destino de cada link. [Prioridade 2] <a href=“noticia.htm”>Clique aqui</a> <a href=“noticia.htm”>Veja as notícias</a> <a href=“lancamentos.htm” title=“Veja a nova coleção outono/inverno 2009”>Conheça nossos lançamentos</a> Utilize Em vez de
  80. 80. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 80Recomendação 13 - Fornecer mecanismos de navegação claros Dar informações sobre a organização geral de um site (por ex., por meio de um mapa do site ou de um sumário). [Prioridade 2]
  81. 81. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 81Recomendação 14 - Assegurar a clareza e a simplicidade dos documentos. Utilizar linguagem a mais clara e simples possível, adequada ao conteúdo do site. [Prioridade 1] Um site com linguagem clara e de fácil compreensão facilita a possibilidade de aprofundamento do usuário em seu conteúdo.
  82. 82. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 82Recomendação 14 - Assegurar a clareza e a simplicidade dos documentos. Complementar o texto com apresentações gráficas ou sonoras, sempre que facilitarem a compreensão da página. [Prioridade 3]
  83. 83. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 83 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 nuances da acessibilidade. A avaliação humana pode ajudar a garantir a clareza da linguagem e a facilidade da navegação. 1 - Utilizar uma ferramenta de acessibilidade automatizada, e uma ferramenta de validação de navegadores. Vale lembrar que as ferramentas de software não incidem sobre todas as questões da acessibilidade, tais como clareza de um texto, aplicabilidade de um equivalente textual. http://www.w3.org/WAI/ER/tools/complete
  84. 84. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 84 Validação 2 - Validar a sintaxe (por ex., HTML, XML). http://validator.w3.org/ 3 - Validar as folhas de estilo (por ex., CSS). http://jigsaw.w3.org/css-validator/
  85. 85. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 85 Validação 4 - Utilizar um navegador exclusivamente textual ou um emulador. 5 - Utilizar vários navegadores gráficos, com: - som e gráficos ativos; - sem gráficos; - sem som; - sem mouse; - 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.
  86. 86. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 86 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.
  87. 87. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 87 WCAG 2.0
  88. 88. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 88 WCAG 2.0 • É uma recomendação W3C de 11 Dezembro de 2008 • Foi traduzido para o português em 2 de março de 2009 pelo Prof. Everaldo Bechara • 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.
  89. 89. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 89 Níveis de Abordagem das WCAG 2.0 • Princípios - No topo estão quatro princípios que constituem a fundação da acessibilidade da Web: perceptível, operável, compreensível e robusto. • Recomendações - As 12 Recomendações apresentam os objetivos básicos que os autores 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: A (o mais baixo), AA e AAA (o mais elevado). • Técnicas de tipo Suficiente e de tipo Aconselhada - As técnicas têm caráter informativo e enquadram-se em duas categorias: as que são de tipo suficiente e vão ao encontro dos critérios de sucesso e as que são de tipo aconselhada. As técnicas de tipo aconselhada vão além do que é requerido em cada um dos critérios de sucesso e permitem aos autores um melhor cumprimento das recomendações.
  90. 90. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 90 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.
  91. 91. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 91 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. Lembram-se do atributo “alt”? Mídias com base no tempo: Fornecer alternativas para mídias com base no tempo. 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. CSS para impressão (print) e telas menores (handheld)
  92. 92. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 92 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis.
  93. 93. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 93 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. Estruturação do conteúdo Ataques Epilépticos: Não criar conteúdo de uma forma conhecida que possa causar ataques epilépticos 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. Finalidade do link (contexto)
  94. 94. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 94 Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis.
  95. 95. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 95 Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis. Legível: Tornar o conteúdo de texto legível e compreensível. Identificação do idioma, abreviaturas (acronym), etc. Previsível: Fazer com que as páginas Web surjam e funcionem de forma previsível. Evitar que links abram novas janelas sem que o usuário saiba.
  96. 96. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 96 Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas.
  97. 97. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 97 Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas. Compatível: Maximizar a compatibilidade com atuais e futuros agentes de usuário, incluindo tecnologias assistivas. Evitar elementos em desuso das tecnologias do W3C
  98. 98. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 98 Documentos de Apoio das WCAG 2.0 Como cumprir as WCAG 2.0 - Uma referencia rápida, passível de personalização, às WCAG 2.0, que inclui todas as recomendações, critérios de sucesso e técnicas a serem utilizados pelos autores à medida que desenvolvem e avaliam o conteúdo da Web. http://www.w3.org/WAI/WCAG20/quickref/ Entendendo as WCAG 2.0 - Um guia para compreender e implementar as WCAG 2.0. Existe um pequeno documento intitulado "Noções sobre" para cada recomendação e critério de sucesso nas WCAG 2.0, bem como tópicos-chave. http://www.w3.org/TR/UNDERSTANDING-WCAG20/ Técnicas para as WCAG 2.0 - Um conjunto de técnicas e falhas comuns, cada um num documento em separado que incluem uma descrição, exemplos, código fonte e testes. http://www.w3.org/TR/WCAG20-TECHS/ Os documentos das WCAG 2.0 - Um diagrama e uma descrição sobre a forma como os documentos técnicos estão relacionados e ligados. http://www.w3.org/WAI/intro/wcag20
  99. 99. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 99 DICAS RÁPIDAS PARA CONSTRUIR WEB SITES ACESSÍVEIS Imagens e Animações. Use o atributo alt para descrever a função de cada elemento visual. Imagemaps. Use mapas client-side (o tag map) e texto para as regiões clicáveis. Multimídia. Inclua legendas e transcrições para o audio, e descrições para o vídeo. Híperlinks. Utilize texto que faça sentido fora do contexto. Evite a frase "clique aqui". Organização da Página. Use cabeçalhos, listas e uma estrutura consistente. Use CSS para layout e estilo sempre que possível.
  100. 100. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 100 DICAS RÁPIDAS PARA CONSTRUIR WEB SITES ACESSÍVEIS Gráficos e Diagramas. Sumarize o conteúdo ou use o atributo longdesc. Scripts, applets e plug-ins. Para o caso de estarem desabilitados ou de não serem suportados pelo browser, forneça conteúdo alternativo. Frames. Use o tag noframes e empregue títulos significativos. Tabelas. Torne compreensível a leitura linha a linha. Resuma. Valide seu trabalho. Use as ferramentas, checklist e os guias disponíveis em http://www.w3.org/TR/WCAG.
  101. 101. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 101 Música tema do WCAG 2.0 "Nós queremos lhes mostrar o WCAG“ O vídeo é uma criação de David MacDonald, que aparece cantando a canção do WCAG pelas ruas. Enquanto isso o vídeo mostra também pessoas com diversos tipos de deficiência utilizando tecnologias assistivas. Ele é baseado nos 4 princípios do WCAG 2.0. 1) A página web deve ser "Perceivable" (todos os elementos devem ser perceptíveis) 2) A página deve ser "Operable" (operacional, isto é navegável) 3) A página deve ser "Understandable" (compreensivel) 4) A página deve ser “Robust” (acessível com qualquer tipo de tecnologia, atuais e futuras, incluindo aí as tecnologias assistivas). http://www.youtube.com/watch?v=gtuna2AWvqk Fonte: Rede Saci http://www.saci.org.br/index.php?modulo=akemi&parametro=25093
  102. 102. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 102 Links importantes WCAG 1.0 • Inglês: http://www.w3.org/TR/WCAG10/ • Português: http://www.geocities.com/claudiaad/acessibilidade_web.html WCAG 2.0 • Inglês: http://www.w3.org/TR/WCAG20/ • Português: http://www.ilearn.com.br/TR/WCAG20/ WAI (Web Accessibility Initiative ): http://www.w3.org/WAI/ Lista de validadores de acessibilidade: http://www.w3.org/WAI/ER/tools/complete HTML Validator: http://validator.w3.org/ CSS Validator: http://jigsaw.w3.org/css-validator/ Dicas rápidas de acessibilidade: http://www.w3.org/WAI/quicktips/qt.br.htm W3C Escritório Brasil – http://www.w3c.br
  103. 103. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. 103 W3C Escritório Brasil Av. das Nações Unidas, 11.541, 6º andar São Paulo, SP - Brasil CEP 04578-000 reinaldo@nic.br http://www.w3c.br

×