SlideShare uma empresa Scribd logo
WCAG 2.0: a nova versão de padrões web de acessibilidade
WCAG 2.0: a nova versão de
padrões web de acessibilidade
Reinaldo Ferraz
Janeiro/2010
WCAG 2.0: a nova versão de padrões web de acessibilidade
2
Acessibilidade na Web
O que é acessibilidade?
WCAG 2.0: a nova versão de padrões web de acessibilidade
3
O que é acessibilidade?
Segundo a WAI:
Acessibilidade na Web significa que pessoas
com deficiências podem perceber, entender,
navegar e interagir além de poder contribuir
para a web.
WCAG 2.0: a nova versão de padrões web de acessibilidade
4
Acessibilidade na web: A quem se destina?
Acessibilidade na web:
A quem se destina?
WCAG 2.0: a nova versão de padrões web de acessibilidade
5
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
WCAG 2.0: a nova versão de padrões web de acessibilidade
6
Acessibilidade na web: A quem se destina?
Deficientes auditivos
- Pessoas que não
conseguem acompanhar
um vídeo na internet
com áudio.
WCAG 2.0: a nova versão de padrões web de acessibilidade
7
Acessibilidade na web: A quem se destina?
Deficientes motores
- Pessoas que utilizam o
computador com
apenas um dedo (ou
nem isso) ou que
tenham dificuldades
com o uso do mouse.
WCAG 2.0: a nova versão de padrões web de acessibilidade
8
Acessibilidade na web: A quem se destina?
Acessibilidade é para todos
WCAG 2.0: a nova versão de padrões web de acessibilidade
9
Acessibilidade na web: A quem se destina?
Displays reduzidos
- Acessando a internet
por um telefone celular.
WCAG 2.0: a nova versão de padrões web de acessibilidade
10
Acessibilidade na web: A quem se destina?
Deficiência temporária
- Pessoas obrigadas a usar o
computador com sua outra
mão devido a fraturas,
tendinite, etc.
WCAG 2.0: a nova versão de padrões web de acessibilidade
11
Acessibilidade na web: A quem se destina?
Início de aprendizado
- Pessoas que estão
iniciando seu
processo de
informatização ou
crianças descobrindo
o computador.
WCAG 2.0: a nova versão de padrões web de acessibilidade
12
Acessibilidade na web: A quem se destina?
Idade avançada
- Pessoas mais velhas,
com dificuldades para ler
letras pequenas e usar o
mouse.
WCAG 2.0: a nova versão de padrões web de acessibilidade
13
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
14
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 à 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
WCAG 2.0: a nova versão de padrões web de acessibilidade
15
WCAG 1.0
• É uma recomendação W3C de 5 de maio de 1999
• Foi traduzido para o português por 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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
16
WCAG 1.0
WCAG 1.0
14 Recomendações
Pontos de
Verificação
Técnicas para os
Pontos de
Verificação
WCAG 2.0: a nova versão de padrões web de acessibilidade
17
WCAG 2.0
WCAG 2.0: a nova versão de padrões web de acessibilidade
18
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, do Centro de Treinamento
iLearn.
• As WCAG 2.0 baseiam-se nas WCAG 1.0
• As WCAG 2.0 foram desenvolvidas através do processo
W3C em colaboração com pessoas e organizações em
todo o mundo.
WCAG 2.0: a nova versão de padrões web de acessibilidade
19
WCAG 2.0
WCAG 2.04 Princípios
Recomendações
(12 no total)
Critérios de
sucesso
Técnicas
suficientes e
aconselhadas
Como Cumprir os critérios de sucesso
Entendendo os critérios de sucesso
Entendendo as Recomendações
WCAG 2.0: a nova versão de padrões web de acessibilidade
20
Principios WCAG 2.0
WCAG 2.0: a nova versão de padrões web de acessibilidade
21
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.
Isto significa que os usuários devem ser capazes de perceber a
informação que está sendo apresentada, não podendo ser invisível
para todos os seus sentidos.
WCAG 2.0: a nova versão de padrões web de acessibilidade
22
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.
Fornecer alternativas de texto para
conteúdo não-textual.
Alternativas em Texto
WCAG 2.0: a nova versão de padrões web de acessibilidade
23
Proporcionar texto alternativo curto para o
conteúdo não-textual que tenha a mesma
finalidade e apresenta as mesmas informações
que o conteúdo não-textual.
Utilizando atributo ALT
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
24
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)
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
25
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>
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
26
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>
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
27
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>
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
28
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>
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
29
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.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
30
Tornar imagens acessíveis
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
31
Exemplo
<input type=“image” src=“lupa.jpg” alt=“Buscar”>
Um botão de busca com o
desenho de uma lupa.
O texto alternativo deve ser
“Buscar” e não “Lupa”
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
32
<img src=“img-01.jpg” alt=“Coloque as pontas juntas”>
<img src=“img-02.jpg” alt=“Passe a ponta da esquerda por baixo da ponta
da direita”>
Exemplo
Uma figura que mostra como fazer um nó de
gravata, com setas indicando como fazê-lo
O texto alternativo deve descrever como fazer o
nó na gravata e não como a imagem se parece.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
33
Exemplos
<img src=“title.jpg” alt=“Historia Geral”>
Um cabeçalho que
contenha uma imagem
com as palavras
“História geral” em
texto estilizado deve ter
o “alt text” dessa figura
como “História Geral”
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
34
Mas se uma breve descrição
não pode servir para a
mesma finalidade e
apresentar as mesmas
informações que o conteúdo
não-textual (por exemplo, um
gráfico ou diagrama):
Tabela de vendas de outubro
Descrição detalhada da imagem
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
35
Técnicas Suficientes
Adicionar um texto alternativo curto
que proporcione uma breve
descrição do conteúdo não
textual…
Exemplo: “Tabela de vendas do mês de
Outubro”
<img src=“graphic.jpg” alt=“Tabela de vendas do mês de Outubro”>
E uma das técnicas a seguir.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
36
1 – Adicionar uma descrição longa para elementos não
textuais que proporcione e apresente a mesma
informação.
<img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/>
Utilizando Longdesc
IMPORTANTE
Algumas tecnologias assistivas não suportam o atributo Longdesc
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
37
Vendas de outubro mostram Maria
liderando com 400 unidades, Michel em
seguida com 389 e Cris é a terceira com
350 unidades.
2 – Adicionar uma descrição longa em texto próximo ao
elemento não textual, com a referência para a descrição
longa em uma pequena descrição.
O texto alternativo curto diz: “Gráfico de vendas em
outubro dos três maiores vendedores”
O seguinte parágrafo deve ser posicionado logo depois
do gráfico: “Vendas de outubro mostram Maria
liderando com 400 unidades, Michel em seguida com
389 e Cris é a terceira com 350 unidades.”
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
38
D
3 – Adicionar uma descrição longa em outro local com
um link para ela que está imediatamente ao lado do
elemento não textual
O texto alternativo curto diz: “Gráfico de vendas
em outubro dos três maiores vendedores”
Ao lado da imagem, uma pequena imagem com
um link para uma página com a descrição
detalhada do gráfico (D link).
Ao final da descrição, existe um link para retornar
ao gráfico.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade39
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.
Técnicas suficientes
Se o elemento não
textual for um controle
ou necessitar de
entrada de dados do
usuário:
WCAG 2.0: a nova versão de padrões web de acessibilidade40
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.
Fornecer um texto alternativo
que identifique o propósito do
elemento não textual, utilizando
um texto alternativo curto.
O objetivo desta técnica é fornecer
informação útil via texto
alternativo mesmo se a
funcionalidade completa do
elemento não textual possa ser
fornecida.
Controle de
movimento de câmera
WCAG 2.0: a nova versão de padrões web de acessibilidade41
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.
Exemplos
Uma aplicação que tem um disco
onde é pressionado para controlar
os movimentos e o zoom de uma
câmera deve ter o seguinte texto
alternativo “Controle para
movimento e zoom de uma
câmera de vídeo”
WCAG 2.0: a nova versão de padrões web de acessibilidade
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.
Utilizar o elemento label para associar
rótulos de textos em controles de
formulários.
WCAG 2.0: a nova versão de padrões web de acessibilidade
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.
Exemplos
Em um campo de entrada de texto:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
Em um campo checkbox:
<input type="checkbox" id="markuplang" name="computerskills“>
<label for="markuplang">HTML</label>
Obs: Elemento Label deve estar posicionado depois dos elementos “input” de
type="checkbox" e type="radio"
WCAG 2.0: a nova versão de padrões web de acessibilidade
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.
Utilizar o elemento o atributo “title” para identificar
controles de formulários quando o elemento “label”
não puder ser utilizado
Exemplo: Campos de texto para números de telefone
<fieldset>
<legend>Phone number</legend>
<input id="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange“ title="First three digits of phone number" type="text“ value="" >
<input id="lastDigits“ title="Last four digits of phone number" type="text“ value="" >
</fieldset>
WCAG 2.0: a nova versão de padrões web de acessibilidade
45
Técnicas suficientes
Se conteúdo não
textual é um
CAPTCHA:
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
46
Identificar o elemento não textual como um teste CAPTCHA
Exemplo: O texto alternativo do CAPTCHA diz:
“Digite as palavras da imagem”
Fornecer texto alternativo que descreva o
objetivo do CAPTCHA
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
47
E…
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
48
Certificar-se que a página web contenha outro CAPTCHA
servindo o mesmo propósito, usando uma modalidade
diferente.
O objetivo desta técnica reduzir as situações em que um
usuário com deficiência não consiga completar um
CAPTCHA. Com mais de uma modalidade de CAPTCHA, é
mais provável que o usuário seja capaz de completar uma
das tarefas com sucesso.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
49
Exemplo
Digite as letras
da imagem
Ou digite as letras
faladas no áudio
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
50
Exemplos
Ou
Quanto é sete mais dois?
Digite o código
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
51
Técnicas suficientes
Se o elemento não
textual deve ser
ignorado pelas
tecnologias assistivas?
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
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.
Utilize CSS para incluir imagens decorativas
O objetivo desta técnica é fornecer um mecanismo que
adicione imagens meramente decorativas sem adicioná-
la dentro do conteúdo.
<style type="text/css">
body {
background: url('/images/home-bg.jpg');
}
</style>
WCAG 2.0: a nova versão de padrões web de acessibilidade
53
Fornecer legendas e alternativas de
conteúdo de áudio e vídeo.
Fornecer legendas
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
54
Proporcionar legendas (open ou closed caption)
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
55
Proporcionar uma alternativa para a mídia
baseada em tempo
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.
Veja a versão em texto do treinamento
Transcrição do vídeo em texto
WCAG 2.0: a nova versão de padrões web de acessibilidade
56
Faça o conteúdo adaptável e disponível
para tecnologias assistivas.
Conteúdo adaptável
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
57
Separar informação e estrutura de apresentação para
permitir diferentes apresentações
HTML com CSS
Um documento HTML utiliza as características
estruturais do HTML, como parágrafos, listas,
títulos, etc, e evita a apresentação recursos
como mudanças de fonte, etc.
O CSS é usado para formatar o documento
com base nas suas propriedades estruturais.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
58
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
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
<font face=“Arial, Verdana, Helvetica, sans-serif” size=“2”
color=“black”>Seu texto</font>
body {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
}
Seu texto
59
Utilização de Folhas de Estilo (CSS)
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
60
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
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
61
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
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
62
<table>
<tr>
<td> </td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<th>8:00-9:00</th>
<td>Meet with Sam</td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>9:00-10:00</th>
<td> </td>
<td> </td>
<td>Doctor Williams</td>
</tr>
</table>
Técnicas suficientes
Utilizar marcação “table” para
apresentar informações
tabulares
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
63
Um calendário de eventos com legenda
<table>
<caption>Schedule for the week of March 6</caption> ...
</table>
Técnicas suficientes
Utilizar elemento “caption” para associar
tabelas de dados
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
64
Técnicas suficientes
Utilizar o atributo summary do elemento table
para dar uma visão geral da tabela de dados
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
65
Exemplo
Uma tabela com um resumo, mas sem legenda
<table summary=“Horários da rota 7 seguindo para o centro. O serviço começa às 4h00 e termina à
meia-noite. Os pontos são listados na linha superior. Encontre o ponto mais próximo da sua
localização e leia a coluna para encontrar que horas o ônibus passa.">
<tr>
<th scope="col">State & First</th>
<th scope="col">State & Sixth</th>
<th scope="col">State & Fifteenth</th>
<th scope="col">Fifteenth & Morrison</th>
</tr>
<td>4:00</td>
<td>4:05</td>
<td>4:11</td>
<td>4:19</td>
</tr>
…
</table>
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
66
Exemplo
Uma tabela de dados com resumo e legenda
Neste exemplo, tanto um atributo summary e o elemento caption são usados. O caption
identifica a rota do ônibus. O summary ajuda pessoas cegas a entender como funciona a
tabela. Leitores de tele lêem a legenda, seguido pelo resumo.
<table summary=“Horários da rota 7 seguindo para o centro. O serviço começa às
4h00 e termina à meia-noite. Os pontos são listados na linha superior. Encontre o
ponto mais próximo da sua localização e leia a coluna para encontrar que horas o
ônibus passa.">
<caption>Rota 7 Centro (Dias da semana)</caption>
…
</table>
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
67
Uma simples agenda
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<td scope="col">Name</td>
<td scope="col">Phone#</td>
<td scope="col">City</td>
</tr><tr>
<td>1.</td>
<td scope="row">Joel Garner</td>
<td>412-212-5421</td>
<td>Pittsburgh</td>
</tr><tr>
<td>2.</td>
<td scope="row">Clive Lloyd</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr>
</table>
Utilizar o atributo scope
para associar células de
cabeçalho e células de
dados em tabelas de dados.
Técnicas suficientes
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
68
Uma tabela com múltiplas linhas de cabeçalhos
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
Utilizar os atributos ID e
headers para associar
células de dados com
células de cabeçalhos em
tabelas de dados.
Técnicas suficientes
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
69
Use contraste suficiente para tornar as
coisas fáceis de ver e ouvir.
Contraste suficiente
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
70
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
71
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
72
Princípio 2: Operável - Os componentes de
interface de usuário e a navegação têm
de ser operáveis.
Isto significa que os usuários devem ser capazes de operar a interface; a
interface de interação não pode exigir interação que o usuário não
possa executar.
WCAG 2.0: a nova versão de padrões web de acessibilidade
73
Faça todas as funcionalidades acessíveis por
teclado.
Acessível por Teclado
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
74
Técnicas suficientes
Assegurar o controle de teclado usando uma das
seguintes técnicas.
Usar os controles de formulário e links (HTML)
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
75
Exemplos - Links
<a href="www.example.com">Exemplo do site</a>
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
<a href=www.example.com>
<img src="example_logo.gif" alt="Exemplo“></a>
<a href="www.example.com">
<img src="example_logo.gif" alt=“Texto">Exemplo
</a>
WCAG 2.0: a nova versão de padrões web de acessibilidade
76
Exemplos - Botões
O exemplo usa o atributo “value”, neste caso, “Salvar”, “Enviar”, ou
“Reset” como nome.
<input type="button" value="Salvar" />
<input type="submit" value=“Enviar" />
<input type="reset" value="Reset" />
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
<input type="image" src="save.gif" alt=“Salvar" />
WCAG 2.0: a nova versão de padrões web de acessibilidade
77
Exemplos - Formulários
<label for="text_1">Tipo de fruta</label>
<input id="text_1" type="text" value=“bananas">
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
<input id="text_1" type="text" value="bananas"
title=“Tipo de fruta">
WCAG 2.0: a nova versão de padrões web de acessibilidade
78
Exemplos – Checkbox e Radiobox
<input id="cb_1" type="checkbox" checked="checked">
<label for="cb_1">Queijo</label>
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
<input type="radio" name="color" id="r1“ /><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
WCAG 2.0: a nova versão de padrões web de acessibilidade
79
Ajude os usuários a navegar e encontrar o
conteúdo.
Navegação
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
80
Técnicas Suficientes
Adicionar um link na parte superior de cada
página que vai diretamente para a área de
conteúdo principal
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
81
Exemplos
<p><a href="#content">Pular para o conteúdo</a></p>
<h2>Main Navigation</h2>
<ul>
<li><a href="#subnav">Sub Navigation</a></li>
<li><a href="/a/">Link A</a></li>
<li><a href="/b/">Link B</a></li>
<li><a href="/c/">Link C</a></li>
...
<li><a href="/j/">Link J</a></li>
</ul>
<div>
<h2 id="content">Título do conteúdo</h2>
<p>Now that I have your attention...</p>
</div>
Um link “Pular
para o conteúdo
principal”
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
82
Exemplos
<p><a href="#content">Pular para o conteúdo</a></p>
<h2>Main Navigation</h2>
<ul>
<li><a href="#subnav">Sub Navigation</a></li>
<li><a href="/a/">Link A</a></li>
<li><a href="/b/">Link B</a></li>
<li><a href="/c/">Link C</a></li>
...
<li><a href="/j/">Link J</a></li>
</ul>
<div>
<h2> <a name =“content” id="content"> </a>
Título do conteúdo</h2>
<p>Now that I have your attention...</p>
</div>
O leitor de tela
WebVox, desenvolvido
pela UFRJ, muito
utilizado por
deficientes visuais no
Brasil não lê o atributo
“id” de um elemento
para link. Para que o
software entenda essa
característica, é
necessário o uso do
atributo “name”.
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
83
Técnicas suficientes
Agrupamento de blocos de material repetido de
uma forma que pode ser ignorada, usando uma
das seguintes técnicas:
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
84
Técnicas suficientes
<h1>Search Technical Periodicals</h1>
<h2>Search</h2>
<form action="search.php">
<p><label for="searchInput">Enter search topic: </label>
<input type="text" size="30" id="searchInput">
<input type="submit" value="Go"></p>
</form>
<h2>Available Periodicals</h2>
<div class="jlinks">
<a href="pcoder.com">Professional Coder</a> |
<a href="algo.com">Algorithms</a> |
<a href="jse.com">Journal of Software Engineering</a>
</div>
<h2>Search Results</h2>
... search results are returned in this section ...
Este exemplo
organiza as seções de
uma página de
pesquisa através da
marcação de cada
título de seção
usando elementos h2.
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
Fornecer elementos de cabeçalho no início de cada seção de conteúdo
WCAG 2.0: a nova versão de padrões web de acessibilidade
85
Técnicas suficientes
Usar elementos estruturais para agrupar links
O objetivo desta técnica é para demonstrar como agrupar links em conjuntos
lógicos.
<a name="categories" id="categories"></a>
<h2>Product Categories</h2>
<ul class="navigation">
<li><p><a href="kitchen.html">Kitchen</a></p></li>
<li><p><a href="bedbath.html">Bed & Bath</a></p></li>
<li><p><a href="dining.html">Fine Dining</a></p></li>
<li><p><a href="lighting.html">Lighting</a></p></li>
<li><p><a href="storage.html">Storage</a></p></li>
</ul>
Usando listas para
agrupar links
Neste exemplo, os
links são agrupados
usando os elementos
ul e li.
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
86
Princípio 3: Compreensível - A informação
e a operação da interface de usuário têm
de ser compreensíveis.
Isto significa que os usuários devem ser capazes de compreender as
informações, bem como o funcionamento da interface do usuário; o
conteúdo ou operação não pode ir além de sua compreensão.
WCAG 2.0: a nova versão de padrões web de acessibilidade
87
Faça o texto legível e compreensível
Texto
Princípio 3: Compreensível - A informação e a operação da
interface de usuário têm de ser compreensíveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
88
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
Este exemplo define o
conteúdo de um
documento HTML para
ser no idioma francês.
Definir o idioma da página
Usando atributos de idioma no elemento HTML
Princípio 3: Compreensível - A informação e a operação da
interface de usuário têm de ser compreensíveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
89
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
Este exemplo define o
conteúdo de um documento
com XHTML 1.1 no idioma
frances.
Definir o idioma da página
Usando atributos de idioma no elemento HTML
Princípio 3: Compreensível - A informação e a operação da
interface de usuário têm de ser compreensíveis.
WCAG 2.0: a nova versão de padrões web de acessibilidade
90
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
</head>
<body>
...document écrit en français <span lang=“en”>and
english</span>...
</body>
</html>
Podem ocorrer
mudanças de
idioma dentro da
página
Princípio 3: Compreensível - A informação e a operação da
interface de usuário têm de ser compreensíveis.
Definir o idioma da página
Usando atributos de idioma no elemento HTML
WCAG 2.0: a nova versão de padrões web de acessibilidade
91
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.
Isto significa que os usuários devem ser capazes de acessar o conteúdo
conforme as tecnologias evoluem; como a tecnologia e os agentes de
usuário evoluem, o conteúdo deve permanecer acessível.
WCAG 2.0: a nova versão de padrões web de acessibilidade
92
Compatibilidade
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.
Maximizar a compatibilidade com as
tecnologias atuais e futuras.
WCAG 2.0: a nova versão de padrões web de acessibilidade
93
Os elementos da página devem:
- Dispor de marcações de início e fim completas,
- Estar encaixados de acordo com as respectivas
especificações,
-Não contêm atributos duplicados
Nota: Elementos que contem tags, tanto inicial quanto final, incompletas, ou
seja, falta de um sinal de menor ou barra invertida ou a aplicação de um
atributo incorreto, são considerados elementos incompletos.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
94
Técnicas suficientes
http://validator.w3.org/
Validar as páginas Web
O objetivo desta técnica é
evitar ambigüidades em
páginas da Web que muitas
vezes resultam em código
que não valida contra
especificações formais.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
95
Técnicas suficientes
http://www.w3.org/TR/
Usando HTML de acordo com a especificação
O objetivo desta técnica é
o uso de HTML e XHTML
de acordo com suas
respectivas
especificações.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
96
Usar HTML de acordo com a especificação
Técnicas suficientes
HTML
<img src=“img.gif” alt=“”>
XHTML
<img src=“img.gif” alt=“” />
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
97
Técnicas suficientes
Assegurar que abertura e fechamento de tags
sejam utilizadas de acordo com a especificação
(HTML)
O objetivo desta técnica é evitar
erros que são conhecidos por
causar problemas para as
tecnologias de apoio quando estão
tentando analisar o conteúdo.
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
98
Assegurar que abertura e fechamento de tags
sejam utilizadas de acordo com a especificação
(HTML)
Técnicas suficientes
<div><b>Texto </b>
<p><a href=“link.htm”>Texto </p></a>
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.
WCAG 2.0: a nova versão de padrões web de acessibilidade
99
Estatísticas
- Pesquisa online com 665 usuarios de leitores de tela
- Os dados foram colhidos em outubro de 2009
- Fonte: WebAIM - http://webaim.org (organização sem fins lucrativos dentro do
Centro para Pessoas com Deficiência na Universidade Estadual de Utah – USA )
Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/
WCAG 2.0: a nova versão de padrões web de acessibilidade
100
Estatísticas
Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/
Resposta %
Described as "Photo of smiling lady" 57.1%
Described as "Smiling lady" 20.2%
Ignored entirely by my screen reader 12.8%
Described as "Our company is personable and friendly" 9.9%
WCAG 2.0: a nova versão de padrões web de acessibilidade
101
Estatísticas
Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/
Resposta %
As text on the web page, immediately following the image 28.4%
As optional text, available on the same page but only if I request it by following a link 26.6%
On a separate page, available by following a link 19.8%
As a very long description (alt text) on the image itself 14.2%
On a separate page, announced by and available to my screen reader 9.1%
Ignored entirely by my screen reader 1.9%
Some images, such as charts, diagrams, or comic strips, are
too complex to describe in only a few words. If a long, detailed
description of these images is available, how would you prefer
to have it presented to you?
WCAG 2.0: a nova versão de padrões web de acessibilidade
102
Estatísticas
Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/
WCAG 2.0: a nova versão de padrões web de acessibilidade
103
Estatísticas
Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/
Resposta %
Web content has become more accessible 46.3%
Web content accessibility has not changed 33.3%
Web content has become less accessible 20.4%
WCAG 2.0: a nova versão de padrões web de acessibilidade
104
Estatísticas
Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/
Resposta %
Lack of awareness of web accessibility 38.0%
Lack of web accessibility skills or knowledge 27.6%
Fear that accessibility will hinder the look, feel, or functionality 25.7%
Lack of budget or resources to make it accessible 8.6%
WCAG 2.0: a nova versão de padrões web de acessibilidade
105
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
WCAG 2.0: a nova versão de padrões web de acessibilidade
106
Links importantes
WCAG 1.0
• Inglês: http://www.w3.org/TR/WCAG10/
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
WCAG 2.0: a nova versão de padrões web de acessibilidade
107
Por uma web para todos!
W3C Escritório Brasil
http://www.w3c.br
reinaldo@nic.br

Mais conteúdo relacionado

Semelhante a Campus Party - janeiro 2010

E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
Leo Serrao
 
Aula - Acessibilidade na Web
Aula - Acessibilidade na WebAula - Acessibilidade na Web
Aula - Acessibilidade na Web
Humberto Lidio Antonelli
 
Web acessível
Web acessívelWeb acessível
Web acessível
Mailson Queiroz
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações WebSofia Costa
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019
Maurício Pereiro
 
Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes Visuais
Logan Web
 
Programação para Web II: Visao geral e evolução das tecnologias
Programação para Web II: Visao geral e evolução das tecnologiasProgramação para Web II: Visao geral e evolução das tecnologias
Programação para Web II: Visao geral e evolução das tecnologias
Alex Camargo
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-webMarcio Mota
 
Avaliacao de acessibilidade de páginas Web
Avaliacao de acessibilidade de páginas WebAvaliacao de acessibilidade de páginas Web
Avaliacao de acessibilidade de páginas Web
Agrupamento de Escolas da Guia-Pombal
 
cartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-Icartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-ILuca Toledo
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC Dev
Lucas J Silva
 
Website Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto EWebsite Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto E
Isabela Loepert
 
Design de Navegacao
Design de NavegacaoDesign de Navegacao
Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016
Ruan Aragão
 
Cartilha de Acessibilidade na Web - Fascículo I - 2013
Cartilha de Acessibilidade na Web - Fascículo I - 2013Cartilha de Acessibilidade na Web - Fascículo I - 2013
Cartilha de Acessibilidade na Web - Fascículo I - 2013
Hudson Augusto
 
Oficina Ases2.0 beta6.0 - André Luiz Rezende
Oficina Ases2.0 beta6.0 - André Luiz RezendeOficina Ases2.0 beta6.0 - André Luiz Rezende
Oficina Ases2.0 beta6.0 - André Luiz Rezende
GovBR
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
Ubirajara Pelli
 
Usability x Accessibility - 2008 (Portuguese, pt-BR)
Usability x Accessibility - 2008 (Portuguese, pt-BR)Usability x Accessibility - 2008 (Portuguese, pt-BR)
Usability x Accessibility - 2008 (Portuguese, pt-BR)
Leo Abdala
 

Semelhante a Campus Party - janeiro 2010 (20)

E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
 
Aula - Acessibilidade na Web
Aula - Acessibilidade na WebAula - Acessibilidade na Web
Aula - Acessibilidade na Web
 
Web acessível
Web acessívelWeb acessível
Web acessível
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações Web
 
Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019
 
Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes Visuais
 
Programação para Web II: Visao geral e evolução das tecnologias
Programação para Web II: Visao geral e evolução das tecnologiasProgramação para Web II: Visao geral e evolução das tecnologias
Programação para Web II: Visao geral e evolução das tecnologias
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-web
 
Avaliacao de acessibilidade de páginas Web
Avaliacao de acessibilidade de páginas WebAvaliacao de acessibilidade de páginas Web
Avaliacao de acessibilidade de páginas Web
 
cartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-Icartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-I
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC Dev
 
Intro desenvolvimento-web
Intro desenvolvimento-webIntro desenvolvimento-web
Intro desenvolvimento-web
 
Website Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto EWebsite Fixie - Metodologia Projeto E
Website Fixie - Metodologia Projeto E
 
Design de Navegacao
Design de NavegacaoDesign de Navegacao
Design de Navegacao
 
Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016
 
Cartilha de Acessibilidade na Web - Fascículo I - 2013
Cartilha de Acessibilidade na Web - Fascículo I - 2013Cartilha de Acessibilidade na Web - Fascículo I - 2013
Cartilha de Acessibilidade na Web - Fascículo I - 2013
 
Oficina Ases2.0 beta6.0 - André Luiz Rezende
Oficina Ases2.0 beta6.0 - André Luiz RezendeOficina Ases2.0 beta6.0 - André Luiz Rezende
Oficina Ases2.0 beta6.0 - André Luiz Rezende
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Usability x Accessibility - 2008 (Portuguese, pt-BR)
Usability x Accessibility - 2008 (Portuguese, pt-BR)Usability x Accessibility - 2008 (Portuguese, pt-BR)
Usability x Accessibility - 2008 (Portuguese, pt-BR)
 

Mais de Reinaldo Ferraz

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
Reinaldo Ferraz
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
Reinaldo Ferraz
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
Reinaldo Ferraz
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na Web
Reinaldo Ferraz
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
Reinaldo Ferraz
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a Web?
Reinaldo Ferraz
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
Re-descentralizar a web
Re-descentralizar a webRe-descentralizar a web
Re-descentralizar a web
Reinaldo Ferraz
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
Reinaldo Ferraz
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
Reinaldo Ferraz
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
Reinaldo Ferraz
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
Reinaldo Ferraz
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
Reinaldo Ferraz
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
Reinaldo Ferraz
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
Reinaldo Ferraz
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Reinaldo Ferraz
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
Reinaldo Ferraz
 

Mais de Reinaldo Ferraz (20)

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na Web
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a Web?
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Re-descentralizar a web
Re-descentralizar a webRe-descentralizar a web
Re-descentralizar a web
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
 

Último

Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
Guardioes Digitais em ação: Como criar senhas seguras!
Guardioes Digitais em ação: Como criar senhas seguras!Guardioes Digitais em ação: Como criar senhas seguras!
Guardioes Digitais em ação: Como criar senhas seguras!
Jonathas Muniz
 

Último (7)

Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
Guardioes Digitais em ação: Como criar senhas seguras!
Guardioes Digitais em ação: Como criar senhas seguras!Guardioes Digitais em ação: Como criar senhas seguras!
Guardioes Digitais em ação: Como criar senhas seguras!
 

Campus Party - janeiro 2010

  • 1. WCAG 2.0: a nova versão de padrões web de acessibilidade WCAG 2.0: a nova versão de padrões web de acessibilidade Reinaldo Ferraz Janeiro/2010
  • 2. WCAG 2.0: a nova versão de padrões web de acessibilidade 2 Acessibilidade na Web O que é acessibilidade?
  • 3. WCAG 2.0: a nova versão de padrões web de acessibilidade 3 O que é acessibilidade? Segundo a WAI: Acessibilidade na Web significa que pessoas com deficiências podem perceber, entender, navegar e interagir além de poder contribuir para a web.
  • 4. WCAG 2.0: a nova versão de padrões web de acessibilidade 4 Acessibilidade na web: A quem se destina? Acessibilidade na web: A quem se destina?
  • 5. WCAG 2.0: a nova versão de padrões web de acessibilidade 5 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
  • 6. WCAG 2.0: a nova versão de padrões web de acessibilidade 6 Acessibilidade na web: A quem se destina? Deficientes auditivos - Pessoas que não conseguem acompanhar um vídeo na internet com áudio.
  • 7. WCAG 2.0: a nova versão de padrões web de acessibilidade 7 Acessibilidade na web: A quem se destina? Deficientes motores - Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou que tenham dificuldades com o uso do mouse.
  • 8. WCAG 2.0: a nova versão de padrões web de acessibilidade 8 Acessibilidade na web: A quem se destina? Acessibilidade é para todos
  • 9. WCAG 2.0: a nova versão de padrões web de acessibilidade 9 Acessibilidade na web: A quem se destina? Displays reduzidos - Acessando a internet por um telefone celular.
  • 10. WCAG 2.0: a nova versão de padrões web de acessibilidade 10 Acessibilidade na web: A quem se destina? Deficiência temporária - Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas, tendinite, etc.
  • 11. WCAG 2.0: a nova versão de padrões web de acessibilidade 11 Acessibilidade na web: A quem se destina? Início de aprendizado - Pessoas que estão iniciando seu processo de informatização ou crianças descobrindo o computador.
  • 12. WCAG 2.0: a nova versão de padrões web de acessibilidade 12 Acessibilidade na web: A quem se destina? Idade avançada - Pessoas mais velhas, com dificuldades para ler letras pequenas e usar o mouse.
  • 13. WCAG 2.0: a nova versão de padrões web de acessibilidade 13 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.
  • 14. WCAG 2.0: a nova versão de padrões web de acessibilidade 14 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 à 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
  • 15. WCAG 2.0: a nova versão de padrões web de acessibilidade 15 WCAG 1.0 • É uma recomendação W3C de 5 de maio de 1999 • Foi traduzido para o português por 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.
  • 16. WCAG 2.0: a nova versão de padrões web de acessibilidade 16 WCAG 1.0 WCAG 1.0 14 Recomendações Pontos de Verificação Técnicas para os Pontos de Verificação
  • 17. WCAG 2.0: a nova versão de padrões web de acessibilidade 17 WCAG 2.0
  • 18. WCAG 2.0: a nova versão de padrões web de acessibilidade 18 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, do Centro de Treinamento iLearn. • As WCAG 2.0 baseiam-se nas WCAG 1.0 • As WCAG 2.0 foram desenvolvidas através do processo W3C em colaboração com pessoas e organizações em todo o mundo.
  • 19. WCAG 2.0: a nova versão de padrões web de acessibilidade 19 WCAG 2.0 WCAG 2.04 Princípios Recomendações (12 no total) Critérios de sucesso Técnicas suficientes e aconselhadas Como Cumprir os critérios de sucesso Entendendo os critérios de sucesso Entendendo as Recomendações
  • 20. WCAG 2.0: a nova versão de padrões web de acessibilidade 20 Principios WCAG 2.0
  • 21. WCAG 2.0: a nova versão de padrões web de acessibilidade 21 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. Isto significa que os usuários devem ser capazes de perceber a informação que está sendo apresentada, não podendo ser invisível para todos os seus sentidos.
  • 22. WCAG 2.0: a nova versão de padrões web de acessibilidade 22 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. Fornecer alternativas de texto para conteúdo não-textual. Alternativas em Texto
  • 23. WCAG 2.0: a nova versão de padrões web de acessibilidade 23 Proporcionar texto alternativo curto para o conteúdo não-textual que tenha a mesma finalidade e apresenta as mesmas informações que o conteúdo não-textual. Utilizando atributo ALT 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.
  • 24. WCAG 2.0: a nova versão de padrões web de acessibilidade 24 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) 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.
  • 25. WCAG 2.0: a nova versão de padrões web de acessibilidade 25 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> 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.
  • 26. WCAG 2.0: a nova versão de padrões web de acessibilidade 26 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> 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.
  • 27. WCAG 2.0: a nova versão de padrões web de acessibilidade 27 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> 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.
  • 28. WCAG 2.0: a nova versão de padrões web de acessibilidade 28 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> 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.
  • 29. WCAG 2.0: a nova versão de padrões web de acessibilidade 29 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. 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.
  • 30. WCAG 2.0: a nova versão de padrões web de acessibilidade 30 Tornar imagens acessíveis 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.
  • 31. WCAG 2.0: a nova versão de padrões web de acessibilidade 31 Exemplo <input type=“image” src=“lupa.jpg” alt=“Buscar”> Um botão de busca com o desenho de uma lupa. O texto alternativo deve ser “Buscar” e não “Lupa” 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.
  • 32. WCAG 2.0: a nova versão de padrões web de acessibilidade 32 <img src=“img-01.jpg” alt=“Coloque as pontas juntas”> <img src=“img-02.jpg” alt=“Passe a ponta da esquerda por baixo da ponta da direita”> Exemplo Uma figura que mostra como fazer um nó de gravata, com setas indicando como fazê-lo O texto alternativo deve descrever como fazer o nó na gravata e não como a imagem se parece. 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.
  • 33. WCAG 2.0: a nova versão de padrões web de acessibilidade 33 Exemplos <img src=“title.jpg” alt=“Historia Geral”> Um cabeçalho que contenha uma imagem com as palavras “História geral” em texto estilizado deve ter o “alt text” dessa figura como “História Geral” 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.
  • 34. WCAG 2.0: a nova versão de padrões web de acessibilidade 34 Mas se uma breve descrição não pode servir para a mesma finalidade e apresentar as mesmas informações que o conteúdo não-textual (por exemplo, um gráfico ou diagrama): Tabela de vendas de outubro Descrição detalhada da imagem 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.
  • 35. WCAG 2.0: a nova versão de padrões web de acessibilidade 35 Técnicas Suficientes Adicionar um texto alternativo curto que proporcione uma breve descrição do conteúdo não textual… Exemplo: “Tabela de vendas do mês de Outubro” <img src=“graphic.jpg” alt=“Tabela de vendas do mês de Outubro”> E uma das técnicas a seguir. 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.
  • 36. WCAG 2.0: a nova versão de padrões web de acessibilidade 36 1 – Adicionar uma descrição longa para elementos não textuais que proporcione e apresente a mesma informação. <img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/> Utilizando Longdesc IMPORTANTE Algumas tecnologias assistivas não suportam o atributo Longdesc 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.
  • 37. WCAG 2.0: a nova versão de padrões web de acessibilidade 37 Vendas de outubro mostram Maria liderando com 400 unidades, Michel em seguida com 389 e Cris é a terceira com 350 unidades. 2 – Adicionar uma descrição longa em texto próximo ao elemento não textual, com a referência para a descrição longa em uma pequena descrição. O texto alternativo curto diz: “Gráfico de vendas em outubro dos três maiores vendedores” O seguinte parágrafo deve ser posicionado logo depois do gráfico: “Vendas de outubro mostram Maria liderando com 400 unidades, Michel em seguida com 389 e Cris é a terceira com 350 unidades.” 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.
  • 38. WCAG 2.0: a nova versão de padrões web de acessibilidade 38 D 3 – Adicionar uma descrição longa em outro local com um link para ela que está imediatamente ao lado do elemento não textual O texto alternativo curto diz: “Gráfico de vendas em outubro dos três maiores vendedores” Ao lado da imagem, uma pequena imagem com um link para uma página com a descrição detalhada do gráfico (D link). Ao final da descrição, existe um link para retornar ao gráfico. 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.
  • 39. WCAG 2.0: a nova versão de padrões web de acessibilidade39 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. Técnicas suficientes Se o elemento não textual for um controle ou necessitar de entrada de dados do usuário:
  • 40. WCAG 2.0: a nova versão de padrões web de acessibilidade40 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. Fornecer um texto alternativo que identifique o propósito do elemento não textual, utilizando um texto alternativo curto. O objetivo desta técnica é fornecer informação útil via texto alternativo mesmo se a funcionalidade completa do elemento não textual possa ser fornecida. Controle de movimento de câmera
  • 41. WCAG 2.0: a nova versão de padrões web de acessibilidade41 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. Exemplos Uma aplicação que tem um disco onde é pressionado para controlar os movimentos e o zoom de uma câmera deve ter o seguinte texto alternativo “Controle para movimento e zoom de uma câmera de vídeo”
  • 42. WCAG 2.0: a nova versão de padrões web de acessibilidade 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. Utilizar o elemento label para associar rótulos de textos em controles de formulários.
  • 43. WCAG 2.0: a nova versão de padrões web de acessibilidade 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. Exemplos Em um campo de entrada de texto: <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" /> Em um campo checkbox: <input type="checkbox" id="markuplang" name="computerskills“> <label for="markuplang">HTML</label> Obs: Elemento Label deve estar posicionado depois dos elementos “input” de type="checkbox" e type="radio"
  • 44. WCAG 2.0: a nova versão de padrões web de acessibilidade 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. Utilizar o elemento o atributo “title” para identificar controles de formulários quando o elemento “label” não puder ser utilizado Exemplo: Campos de texto para números de telefone <fieldset> <legend>Phone number</legend> <input id="areaCode" title="Area Code" type="text" size="3" value="" > <input id="exchange“ title="First three digits of phone number" type="text“ value="" > <input id="lastDigits“ title="Last four digits of phone number" type="text“ value="" > </fieldset>
  • 45. WCAG 2.0: a nova versão de padrões web de acessibilidade 45 Técnicas suficientes Se conteúdo não textual é um CAPTCHA: 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.
  • 46. WCAG 2.0: a nova versão de padrões web de acessibilidade 46 Identificar o elemento não textual como um teste CAPTCHA Exemplo: O texto alternativo do CAPTCHA diz: “Digite as palavras da imagem” Fornecer texto alternativo que descreva o objetivo do CAPTCHA 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.
  • 47. WCAG 2.0: a nova versão de padrões web de acessibilidade 47 E… 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.
  • 48. WCAG 2.0: a nova versão de padrões web de acessibilidade 48 Certificar-se que a página web contenha outro CAPTCHA servindo o mesmo propósito, usando uma modalidade diferente. O objetivo desta técnica reduzir as situações em que um usuário com deficiência não consiga completar um CAPTCHA. Com mais de uma modalidade de CAPTCHA, é mais provável que o usuário seja capaz de completar uma das tarefas com sucesso. 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.
  • 49. WCAG 2.0: a nova versão de padrões web de acessibilidade 49 Exemplo Digite as letras da imagem Ou digite as letras faladas no áudio 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.
  • 50. WCAG 2.0: a nova versão de padrões web de acessibilidade 50 Exemplos Ou Quanto é sete mais dois? Digite o código 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.
  • 51. WCAG 2.0: a nova versão de padrões web de acessibilidade 51 Técnicas suficientes Se o elemento não textual deve ser ignorado pelas tecnologias assistivas? 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.
  • 52. WCAG 2.0: a nova versão de padrões web de acessibilidade 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. Utilize CSS para incluir imagens decorativas O objetivo desta técnica é fornecer um mecanismo que adicione imagens meramente decorativas sem adicioná- la dentro do conteúdo. <style type="text/css"> body { background: url('/images/home-bg.jpg'); } </style>
  • 53. WCAG 2.0: a nova versão de padrões web de acessibilidade 53 Fornecer legendas e alternativas de conteúdo de áudio e vídeo. Fornecer legendas 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.
  • 54. WCAG 2.0: a nova versão de padrões web de acessibilidade 54 Proporcionar legendas (open ou closed caption) 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.
  • 55. WCAG 2.0: a nova versão de padrões web de acessibilidade 55 Proporcionar uma alternativa para a mídia baseada em tempo 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. Veja a versão em texto do treinamento Transcrição do vídeo em texto
  • 56. WCAG 2.0: a nova versão de padrões web de acessibilidade 56 Faça o conteúdo adaptável e disponível para tecnologias assistivas. Conteúdo adaptável 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.
  • 57. WCAG 2.0: a nova versão de padrões web de acessibilidade 57 Separar informação e estrutura de apresentação para permitir diferentes apresentações HTML com CSS Um documento HTML utiliza as características estruturais do HTML, como parágrafos, listas, títulos, etc, e evita a apresentação recursos como mudanças de fonte, etc. O CSS é usado para formatar o documento com base nas suas propriedades estruturais. 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.
  • 58. WCAG 2.0: a nova versão de padrões web de acessibilidade 58 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 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.
  • 59. WCAG 2.0: a nova versão de padrões web de acessibilidade <font face=“Arial, Verdana, Helvetica, sans-serif” size=“2” color=“black”>Seu texto</font> body { color: #ffffff; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 1em; } Seu texto 59 Utilização de Folhas de Estilo (CSS) 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.
  • 60. WCAG 2.0: a nova versão de padrões web de acessibilidade 60 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 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.
  • 61. WCAG 2.0: a nova versão de padrões web de acessibilidade 61 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 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.
  • 62. WCAG 2.0: a nova versão de padrões web de acessibilidade 62 <table> <tr> <td> </td> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> </tr> <tr> <th>8:00-9:00</th> <td>Meet with Sam</td> <td> </td> <td> </td> </tr> <tr> <th>9:00-10:00</th> <td> </td> <td> </td> <td>Doctor Williams</td> </tr> </table> Técnicas suficientes Utilizar marcação “table” para apresentar informações tabulares 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.
  • 63. WCAG 2.0: a nova versão de padrões web de acessibilidade 63 Um calendário de eventos com legenda <table> <caption>Schedule for the week of March 6</caption> ... </table> Técnicas suficientes Utilizar elemento “caption” para associar tabelas de dados 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.
  • 64. WCAG 2.0: a nova versão de padrões web de acessibilidade 64 Técnicas suficientes Utilizar o atributo summary do elemento table para dar uma visão geral da tabela de dados 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.
  • 65. WCAG 2.0: a nova versão de padrões web de acessibilidade 65 Exemplo Uma tabela com um resumo, mas sem legenda <table summary=“Horários da rota 7 seguindo para o centro. O serviço começa às 4h00 e termina à meia-noite. Os pontos são listados na linha superior. Encontre o ponto mais próximo da sua localização e leia a coluna para encontrar que horas o ônibus passa."> <tr> <th scope="col">State & First</th> <th scope="col">State & Sixth</th> <th scope="col">State & Fifteenth</th> <th scope="col">Fifteenth & Morrison</th> </tr> <td>4:00</td> <td>4:05</td> <td>4:11</td> <td>4:19</td> </tr> … </table> 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.
  • 66. WCAG 2.0: a nova versão de padrões web de acessibilidade 66 Exemplo Uma tabela de dados com resumo e legenda Neste exemplo, tanto um atributo summary e o elemento caption são usados. O caption identifica a rota do ônibus. O summary ajuda pessoas cegas a entender como funciona a tabela. Leitores de tele lêem a legenda, seguido pelo resumo. <table summary=“Horários da rota 7 seguindo para o centro. O serviço começa às 4h00 e termina à meia-noite. Os pontos são listados na linha superior. Encontre o ponto mais próximo da sua localização e leia a coluna para encontrar que horas o ônibus passa."> <caption>Rota 7 Centro (Dias da semana)</caption> … </table> 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.
  • 67. WCAG 2.0: a nova versão de padrões web de acessibilidade 67 Uma simples agenda <table border="1"> <caption>Contact Information</caption> <tr> <td></td> <td scope="col">Name</td> <td scope="col">Phone#</td> <td scope="col">City</td> </tr><tr> <td>1.</td> <td scope="row">Joel Garner</td> <td>412-212-5421</td> <td>Pittsburgh</td> </tr><tr> <td>2.</td> <td scope="row">Clive Lloyd</td> <td>410-306-5400</td> <td>Baltimore</td> </tr> </table> Utilizar o atributo scope para associar células de cabeçalho e células de dados em tabelas de dados. Técnicas suficientes 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.
  • 68. WCAG 2.0: a nova versão de padrões web de acessibilidade 68 Uma tabela com múltiplas linhas de cabeçalhos <table> <tr> <th rowspan="2" id="h">Homework</th> <th colspan="3" id="e">Exams</th> <th colspan="3" id="p">Projects</th> </tr> <tr> <th id="e1" headers="e">1</th> <th id="e2" headers="e">2</th> <th id="ef" headers="e">Final</th> <th id="p1" headers="p">1</th> <th id="p2" headers="p">2</th> <th id="pf" headers="p">Final</th> </tr> <tr> <td headers="h">15%</td> <td headers="e e1">15%</td> <td headers="e e2">15%</td> <td headers="e ef">20%</td> <td headers="p p1">10%</td> <td headers="p p2">10%</td> <td headers="p pf">15%</td> </tr> </table> Utilizar os atributos ID e headers para associar células de dados com células de cabeçalhos em tabelas de dados. Técnicas suficientes 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.
  • 69. WCAG 2.0: a nova versão de padrões web de acessibilidade 69 Use contraste suficiente para tornar as coisas fáceis de ver e ouvir. Contraste suficiente 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.
  • 70. WCAG 2.0: a nova versão de padrões web de acessibilidade 70 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.
  • 71. WCAG 2.0: a nova versão de padrões web de acessibilidade 71 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.
  • 72. WCAG 2.0: a nova versão de padrões web de acessibilidade 72 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. Isto significa que os usuários devem ser capazes de operar a interface; a interface de interação não pode exigir interação que o usuário não possa executar.
  • 73. WCAG 2.0: a nova versão de padrões web de acessibilidade 73 Faça todas as funcionalidades acessíveis por teclado. Acessível por Teclado Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis.
  • 74. WCAG 2.0: a nova versão de padrões web de acessibilidade 74 Técnicas suficientes Assegurar o controle de teclado usando uma das seguintes técnicas. Usar os controles de formulário e links (HTML) Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis.
  • 75. WCAG 2.0: a nova versão de padrões web de acessibilidade 75 Exemplos - Links <a href="www.example.com">Exemplo do site</a> Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. <a href=www.example.com> <img src="example_logo.gif" alt="Exemplo“></a> <a href="www.example.com"> <img src="example_logo.gif" alt=“Texto">Exemplo </a>
  • 76. WCAG 2.0: a nova versão de padrões web de acessibilidade 76 Exemplos - Botões O exemplo usa o atributo “value”, neste caso, “Salvar”, “Enviar”, ou “Reset” como nome. <input type="button" value="Salvar" /> <input type="submit" value=“Enviar" /> <input type="reset" value="Reset" /> Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. <input type="image" src="save.gif" alt=“Salvar" />
  • 77. WCAG 2.0: a nova versão de padrões web de acessibilidade 77 Exemplos - Formulários <label for="text_1">Tipo de fruta</label> <input id="text_1" type="text" value=“bananas"> Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. <input id="text_1" type="text" value="bananas" title=“Tipo de fruta">
  • 78. WCAG 2.0: a nova versão de padrões web de acessibilidade 78 Exemplos – Checkbox e Radiobox <input id="cb_1" type="checkbox" checked="checked"> <label for="cb_1">Queijo</label> Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. <input type="radio" name="color" id="r1“ /><label for="r1">Red</label> <input type="radio" name="color" id="r2" /><label for="r2">Blue</label> <input type="radio" name="color" id="r3" /><label for="r3">Green</label>
  • 79. WCAG 2.0: a nova versão de padrões web de acessibilidade 79 Ajude os usuários a navegar e encontrar o conteúdo. Navegação Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis.
  • 80. WCAG 2.0: a nova versão de padrões web de acessibilidade 80 Técnicas Suficientes Adicionar um link na parte superior de cada página que vai diretamente para a área de conteúdo principal Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis.
  • 81. WCAG 2.0: a nova versão de padrões web de acessibilidade 81 Exemplos <p><a href="#content">Pular para o conteúdo</a></p> <h2>Main Navigation</h2> <ul> <li><a href="#subnav">Sub Navigation</a></li> <li><a href="/a/">Link A</a></li> <li><a href="/b/">Link B</a></li> <li><a href="/c/">Link C</a></li> ... <li><a href="/j/">Link J</a></li> </ul> <div> <h2 id="content">Título do conteúdo</h2> <p>Now that I have your attention...</p> </div> Um link “Pular para o conteúdo principal” Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis.
  • 82. WCAG 2.0: a nova versão de padrões web de acessibilidade 82 Exemplos <p><a href="#content">Pular para o conteúdo</a></p> <h2>Main Navigation</h2> <ul> <li><a href="#subnav">Sub Navigation</a></li> <li><a href="/a/">Link A</a></li> <li><a href="/b/">Link B</a></li> <li><a href="/c/">Link C</a></li> ... <li><a href="/j/">Link J</a></li> </ul> <div> <h2> <a name =“content” id="content"> </a> Título do conteúdo</h2> <p>Now that I have your attention...</p> </div> O leitor de tela WebVox, desenvolvido pela UFRJ, muito utilizado por deficientes visuais no Brasil não lê o atributo “id” de um elemento para link. Para que o software entenda essa característica, é necessário o uso do atributo “name”. Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis.
  • 83. WCAG 2.0: a nova versão de padrões web de acessibilidade 83 Técnicas suficientes Agrupamento de blocos de material repetido de uma forma que pode ser ignorada, usando uma das seguintes técnicas: Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis.
  • 84. WCAG 2.0: a nova versão de padrões web de acessibilidade 84 Técnicas suficientes <h1>Search Technical Periodicals</h1> <h2>Search</h2> <form action="search.php"> <p><label for="searchInput">Enter search topic: </label> <input type="text" size="30" id="searchInput"> <input type="submit" value="Go"></p> </form> <h2>Available Periodicals</h2> <div class="jlinks"> <a href="pcoder.com">Professional Coder</a> | <a href="algo.com">Algorithms</a> | <a href="jse.com">Journal of Software Engineering</a> </div> <h2>Search Results</h2> ... search results are returned in this section ... Este exemplo organiza as seções de uma página de pesquisa através da marcação de cada título de seção usando elementos h2. Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. Fornecer elementos de cabeçalho no início de cada seção de conteúdo
  • 85. WCAG 2.0: a nova versão de padrões web de acessibilidade 85 Técnicas suficientes Usar elementos estruturais para agrupar links O objetivo desta técnica é para demonstrar como agrupar links em conjuntos lógicos. <a name="categories" id="categories"></a> <h2>Product Categories</h2> <ul class="navigation"> <li><p><a href="kitchen.html">Kitchen</a></p></li> <li><p><a href="bedbath.html">Bed & Bath</a></p></li> <li><p><a href="dining.html">Fine Dining</a></p></li> <li><p><a href="lighting.html">Lighting</a></p></li> <li><p><a href="storage.html">Storage</a></p></li> </ul> Usando listas para agrupar links Neste exemplo, os links são agrupados usando os elementos ul e li. Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis.
  • 86. WCAG 2.0: a nova versão de padrões web de acessibilidade 86 Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis. Isto significa que os usuários devem ser capazes de compreender as informações, bem como o funcionamento da interface do usuário; o conteúdo ou operação não pode ir além de sua compreensão.
  • 87. WCAG 2.0: a nova versão de padrões web de acessibilidade 87 Faça o texto legível e compreensível Texto Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis.
  • 88. WCAG 2.0: a nova versão de padrões web de acessibilidade 88 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> ...document écrit en français... </body> </html> Este exemplo define o conteúdo de um documento HTML para ser no idioma francês. Definir o idioma da página Usando atributos de idioma no elemento HTML Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis.
  • 89. WCAG 2.0: a nova versão de padrões web de acessibilidade 89 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> </head> <body> ...document écrit en français... </body> </html> Este exemplo define o conteúdo de um documento com XHTML 1.1 no idioma frances. Definir o idioma da página Usando atributos de idioma no elemento HTML Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis.
  • 90. WCAG 2.0: a nova versão de padrões web de acessibilidade 90 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> ...document écrit en français <span lang=“en”>and english</span>... </body> </html> Podem ocorrer mudanças de idioma dentro da página Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis. Definir o idioma da página Usando atributos de idioma no elemento HTML
  • 91. WCAG 2.0: a nova versão de padrões web de acessibilidade 91 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. Isto significa que os usuários devem ser capazes de acessar o conteúdo conforme as tecnologias evoluem; como a tecnologia e os agentes de usuário evoluem, o conteúdo deve permanecer acessível.
  • 92. WCAG 2.0: a nova versão de padrões web de acessibilidade 92 Compatibilidade 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. Maximizar a compatibilidade com as tecnologias atuais e futuras.
  • 93. WCAG 2.0: a nova versão de padrões web de acessibilidade 93 Os elementos da página devem: - Dispor de marcações de início e fim completas, - Estar encaixados de acordo com as respectivas especificações, -Não contêm atributos duplicados Nota: Elementos que contem tags, tanto inicial quanto final, incompletas, ou seja, falta de um sinal de menor ou barra invertida ou a aplicação de um atributo incorreto, são considerados elementos incompletos. 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.
  • 94. WCAG 2.0: a nova versão de padrões web de acessibilidade 94 Técnicas suficientes http://validator.w3.org/ Validar as páginas Web O objetivo desta técnica é evitar ambigüidades em páginas da Web que muitas vezes resultam em código que não valida contra especificações formais. 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.
  • 95. WCAG 2.0: a nova versão de padrões web de acessibilidade 95 Técnicas suficientes http://www.w3.org/TR/ Usando HTML de acordo com a especificação O objetivo desta técnica é o uso de HTML e XHTML de acordo com suas respectivas especificações. 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.
  • 96. WCAG 2.0: a nova versão de padrões web de acessibilidade 96 Usar HTML de acordo com a especificação Técnicas suficientes HTML <img src=“img.gif” alt=“”> XHTML <img src=“img.gif” alt=“” /> 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. WCAG 2.0: a nova versão de padrões web de acessibilidade 97 Técnicas suficientes Assegurar que abertura e fechamento de tags sejam utilizadas de acordo com a especificação (HTML) O objetivo desta técnica é evitar erros que são conhecidos por causar problemas para as tecnologias de apoio quando estão tentando analisar o conteúdo. 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.
  • 98. WCAG 2.0: a nova versão de padrões web de acessibilidade 98 Assegurar que abertura e fechamento de tags sejam utilizadas de acordo com a especificação (HTML) Técnicas suficientes <div><b>Texto </b> <p><a href=“link.htm”>Texto </p></a> 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.
  • 99. WCAG 2.0: a nova versão de padrões web de acessibilidade 99 Estatísticas - Pesquisa online com 665 usuarios de leitores de tela - Os dados foram colhidos em outubro de 2009 - Fonte: WebAIM - http://webaim.org (organização sem fins lucrativos dentro do Centro para Pessoas com Deficiência na Universidade Estadual de Utah – USA ) Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/
  • 100. WCAG 2.0: a nova versão de padrões web de acessibilidade 100 Estatísticas Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/ Resposta % Described as "Photo of smiling lady" 57.1% Described as "Smiling lady" 20.2% Ignored entirely by my screen reader 12.8% Described as "Our company is personable and friendly" 9.9%
  • 101. WCAG 2.0: a nova versão de padrões web de acessibilidade 101 Estatísticas Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/ Resposta % As text on the web page, immediately following the image 28.4% As optional text, available on the same page but only if I request it by following a link 26.6% On a separate page, available by following a link 19.8% As a very long description (alt text) on the image itself 14.2% On a separate page, announced by and available to my screen reader 9.1% Ignored entirely by my screen reader 1.9% Some images, such as charts, diagrams, or comic strips, are too complex to describe in only a few words. If a long, detailed description of these images is available, how would you prefer to have it presented to you?
  • 102. WCAG 2.0: a nova versão de padrões web de acessibilidade 102 Estatísticas Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/
  • 103. WCAG 2.0: a nova versão de padrões web de acessibilidade 103 Estatísticas Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/ Resposta % Web content has become more accessible 46.3% Web content accessibility has not changed 33.3% Web content has become less accessible 20.4%
  • 104. WCAG 2.0: a nova versão de padrões web de acessibilidade 104 Estatísticas Fonte: WebAIM - http://webaim.org/projects/screenreadersurvey2/ Resposta % Lack of awareness of web accessibility 38.0% Lack of web accessibility skills or knowledge 27.6% Fear that accessibility will hinder the look, feel, or functionality 25.7% Lack of budget or resources to make it accessible 8.6%
  • 105. WCAG 2.0: a nova versão de padrões web de acessibilidade 105 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
  • 106. WCAG 2.0: a nova versão de padrões web de acessibilidade 106 Links importantes WCAG 1.0 • Inglês: http://www.w3.org/TR/WCAG10/ 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
  • 107. WCAG 2.0: a nova versão de padrões web de acessibilidade 107 Por uma web para todos! W3C Escritório Brasil http://www.w3c.br reinaldo@nic.br