Acessibilidade Na Web w3c 2009

Acessibilidade na Web:
o caminho das pedras para construir

sítios acessíveis.
Reinaldo Ferraz
junho/2009
o caminho das pedras para construir sítios acessíveis.
O Consórcio World Wide Web (W3C) 2
É um consórcio internacional, criado em 1994

por Tim Berners-Lee com
• organizações filiadas,
• uma equipe em tempo integral,
• participação do público
para colaborativamente desenvolver padrões

universais para a Web.
O W3C no Brasil 3
O escritório brasileiro começou suas atividades

em outubro de 2007.
É uma iniciativa do CGI.br, que é o responsável por coordenar e

integrar as iniciativas de serviços da Internet no País e do
NIC.br, criado para implementar as decisões e os projetos do
Comitê Gestor da Internet no Brasil.
Missão do W3C 4
Conduzir a World Wide Web para que atinja todo

seu potencial, desenvolvendo protocolos e
diretrizes que garantam seu crescimento de
longo prazo.
O W3C desenvolve padrões 5
Conduzir a World Wide Web para que atinja todo

seu potencial, desenvolvendo protocolos e
diretrizes que garantam seu crescimento de
longo prazo.
Desde sua fundação, o W3C publicou mais de 110 de

padrões, denominados Recomendações do W3C
Web Standards – Padrões Web
Metas W3C 6
• Web para todos
Metas W3C 7
• Web para todos

Tornar os benefícios da web (seu valor social: comunicação
humana, comércio, compartilhar conhecimentos)
disponíveis a todos, independente de
– Hardware – Cultura
– Software – Localização
– Infra-estrutura de geográfica
rede – Habilidade física
– Idioma – Habilidade mental
Metas W3C 8
• Web para todos

• Web em qualquer dispositivo
Metas W3C 9

Possibilitar que o acesso de qualquer tipo de dispositivo
seja tão simples, fácil e conveniente quanto de um
computador convencional
– Computadores – TV digital
– Desktops – Sistemas de
– Netbooks interação por voz
– Telefones – Aparelhos
domésticos
– PDAs
– … web ubíqua
Metas W3C 10
• Web para todos

• Web base de conhecimento
Metas W3C 11

Não apenas um grande livro hiperlinkado onde pessoas
possam pesquisar, navegar, ler e visualizar informações
Possibilitar que computadores interpretem, estabeleçam

inferências e relações na web
Interoperabilidade
– Web Semântica
Metas W3C 12
• Web para todos

• Web confiável e segura
Metas W3C 13
• Web confiável e segura

Uma web em que as transações sociais e comunicações com
terceiros sejam estabelecidas em relações de confiança,
sejam pessoas, organizações ou serviços
– Ambiente mas colaborativo

– Responsável
– Seguro
– Confiança
– Confidência
WAI e WCAG 14
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
Acessibilidade na Web 15
O que é acessibilidade?
O que é acessibilidade? 16
Segundo a legislação brasileira:

Acessibilidade é condição para utilização, com segurança e
autonomia, total ou assistida, dos espaços, mobiliários e
equipamentos urbanos, das edificações, dos serviços de
transporte e dos dispositivos, sistemas e meios de
comunicação e informação, por pessoa com deficiência
ou com mobilidade reduzida.
DECRETO Nº 5.296 DE 2 DE DEZEMBRO DE 2004.

https://www.planalto.gov.br/ccivil_03/_Ato2004-2006/2004/Decreto/D5296.htm
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.
Acessibilidade na web
diz respeito à facilidade de acesso, por
qualquer pessoa, independente de
condições físicas, técnicas ou
dispositivos.
Acessibilidade na web: A quem se destina? 19
Acessibilidade é para todos
Deficientes visuais
- Cegos: Pessoas que navegam com leitores de tela
- Daltônicos: Dificuldade em enxergar cores e contrastes
- Baixa visão: Necessidade de aumento de tela para ler
Deficientes auditivos
- Pessoas que não conseguem acompanhar um vídeo na internet com áudio.
Deficientes motores
- Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou
que tenham dificuldades com o uso do mouse.
Displays reduzidos
- Acessando a internet por um telefone celular.
Deficiência temporária
- Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas, tendinite,
etc.
Início de aprendizado
- Pessoas que estão iniciando seu processo de informatização ou crianças descobrindo o
computador.
Idade avançada
- Pessoas mais velhas, com dificuldades para ler letras pequenas e usar do mouse.
Fazer um site acessível não é só se

preocupar com um determinado grupo de
pessoas: É se preocupar com todas as
pessoas que acessam seu site.
23
Tutorial de
Acessibilidade na Web
WCAG 1.0 24
• É 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 1.0 25
• No entanto, faz também com que o conteúdo da Web se torne

de mais fácil acesso a todos os usuários:
• independentemente da ferramenta usada (computadores de mesa,

laptops, telefones celulares, ou navegador por voz) e das
• limitações associadas ao respectivo uso (ambientes barulhentos,

salas mal iluminadas ou com excesso de iluminação, utilização sem o
uso das mãos).
Introdução 26
Os desenvolvedores de páginas Web devem levar em consideração diferentes

situações ao criar uma página. A Web pode ser utilizada por pessoas que:
• sejam incapazes de ver, ouvir, se deslocar, ou interpretar determinados

tipos de informações;
• tenham dificuldade em ler ou compreender textos;
• não tenham um teclado ou mouse, ou não sejam capazes de utilizá-los;
• possuam tela que apresenta apenas texto, ou com dimensões

reduzidas, ou ainda uma conexão lenta com a Internet;
Introdução 27
Os desenvolvedores de páginas Web devem levar em consideração diferentes

situações ao criar uma página. A Web pode ser utilizada por pessoas que:
• não falem ou compreendam fluentemente o idioma em que o documento

foi escrito;
• estejam com seus olhos, mãos ou ouvidos ocupados (por exemplo em

um ambiente barulhento ou fora de casa ou do trabalho);
• possuam uma versão ultrapassada de navegador web, diferente dos

habituais, um navegador por voz, ou um sistema operacional pouco
convencional.
Introdução 28
Introdução 29
- Utilização de folhas de estilo (CSS)

- Tornar imagens acessíveis
Introdução 30
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
Introdução 31
Seu texto
body {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
}
Seu texto
Introdução 32

 CSS



 





















Introdução 33
























Introdução 34
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)
Introdução 35
<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>
Introdução 36
<body>
<img src="foto-01.gif" alt="">

</body>
Introdução 37
<body>
<img src="foto-01.gif" alt=“Foto: Divulgação">

</body>
Introdução 38
<body>
<img src="foto-01.gif" alt=“Foto do Arco do Triunfo">

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>
Introdução 39
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.
Introdução 40
Recomendações 41
Recomendações para a acessibilidade do

conteúdo da Web
Níveis de prioridade 42
O grupo de trabalho atribuiu a cada ponto de verificação um nível de prioridade, com

base no respectivo impacto, em termos de acessibilidade.
[Prioridade 1]
Pontos que os criadores de conteúdo Web devem satisfazer inteiramente.
Se não o fizerem, um ou mais grupos de usuários ficarão impossibilitados

de acessar as informações contidas no documento. A satisfação desse
tipo de pontos é um requisito básico para que determinados grupos
possam acessar documentos disponíveis na Web.
O grupo de trabalho atribuiu a cada ponto de verificação um nível de prioridade,

com base no respectivo impacto, em termos de acessibilidade.
[Prioridade 2]
Pontos que os criadores de conteúdos na Web deveriam satisfazer.
Se não o fizerem, um ou mais grupos de usuários terão dificuldades em

acessar as informações contidas no documento. A satisfação desse
tipo de pontos promoverá a remoção de barreiras significativas ao
acesso a documentos disponíveis na Web.
O grupo de trabalho atribuiu a cada ponto de verificação um nível de prioridade,

com base no respectivo impacto, em termos de acessibilidade.
[Prioridade 3]
Pontos que os criadores de conteúdos na Web podem satisfazer.
Se não o fizerem, um ou mais grupos poderão se deparar com algumas

dificuldades em acessar informações contidas nos documentos. A
satisfação deste tipo de pontos irá melhorar o acesso a documentos
armazenados na Web.
Recomendação 1 45
Fornecer alternativas ao conteúdo sonoro e visual

Fornecer um equivalente textual a cada elemento não textual (por ex., por
meio de "alt" ou "longdesc", ou como parte do conteúdo do elemento).
[Prioridade 1]
• Utilizar "alt" para os elementos IMG, INPUT e APPLET ou fornecer

um equivalente textual como parte do conteúdo dos elementos
OBJECT e APPLET.
Exemplos:
<img src="foto-01.gif" alt="Foto do Arco do Triunfo">
<applet alt=“Descrição do aplicativo"></applet>
<input type="image" src="enviar.gif" value="Enviar" alt="Enviar dados">
Recomendação 1 46

Fornecer links de texto redundantes relativos a cada região ativa de um
mapa de imagem armazenado no servidor. [Prioridade 1]
<img src="logos.gif" alt="Logotipos"

border="0" usemap="#Map">
<map name="Map">
<area shape="circle" coords="79,105,58"

href="logo-01.htm" alt=“Página do Logo 01">
<area shape="circle" coords="211,221,58"

href="logo-02.htm" alt=“Página do Logo 02">
</map>
Recomendação 1 47

Em apresentações multimídia baseadas em tempo (filme ou animação),
sincronizar as alternativas equivalentes (legendas ou descrições sonoras
dos trechos visuais) e a apresentação. [Prioridade 1]
48
Recomendação 2 - Não recorrer apenas à cor
Assegurar que todas as informações veiculadas com cor estejam também
disponíveis sem cor, por exemplo a partir do contexto ou de marcações.
[Prioridade 1]
Clique no botão vermelho para continuar
1 2 3 4 5 6 7 8
49
[Prioridade 1]
Clique no botão vermelho para continuar
50
[Prioridade 1]
Clique no número 3 para continuar
1 2 3 4 5 6 7 8
ou
Clique no botão “Continuar”
1 2 Continuar 5 6
51
Assegurar que a combinação de cores entre o fundo e o primeiro plano seja
suficientemente contrastante para poder ser vista por pessoas com
cromodeficiências, bem como pelas que utilizam monitores de vídeo
monocromáticos. [Prioridade 2 para imagens; prioridade 3 para texto]
52
Recomendação 3 - Utilizar corretamente marcações e folhas de estilo
Utilizar folhas de estilo para controlar a paginação (disposição em página) e

a apresentação. [Prioridade 2]
























53
Utilizar unidades relativas, e não absolutas, nos valores dos atributos da

linguagem de marcação e nos valores das propriedades das folhas de
estilo. [Prioridade 2]
Em CSS, utilizar 'em' ou percentagens em vez das unidades

absolutas 'pt' ou 'cm'
Alguns navegadores aumentam o tamanho da fonte dentro do

navegador. Utilizando unidades absolutas esse aumento fica
prejudicado.
Alguns navegadores já fazem “zoom” na tela inteira do website.
54
Utilizar elementos de cabeçalho indicativos da estrutura do documento, de

acordo com as especificações. [Prioridade 2]
H1
H2
H3
H3
H2
H3
H3
55
Marcar corretamente listas e pontos de enumeração em listas. [Prioridade 2]
<ul>
<li>Primeiro texto
<ul>
<li>Sub texto</li>
</ul>
</li>
<li>Segundo texto</li>
</ul>
56
Marcar corretamente listas e pontos de enumeração em listas. [Prioridade 2]
57
Recomendação 4 - Indicar claramente qual o idioma utilizado
Identificar claramente quaisquer mudanças de idioma no texto de um

documento, bem como nos equivalentes textuais (por ex., legendas).
[Prioridade 1]
HTML: XHTML:
<html lang="pt-br"> <html xml:lang="pt-br“>
HTML (acrônimo para a expressão inglesa HyperText

Markup Language, que significa Linguagem de Marcação de
Hipertexto) é uma linguagem de marcação utilizada para produzir páginas
na Web. Documentos HTML podem ser interpretados por navegadores. A
tecnologia é fruto do "casamento" dos padrões 
HyTime e SGML.
58
Recomendação 4 - Indicar claramente qual o idioma utilizado
Especificar por extenso cada abreviatura ou sigla quando da sua primeira

ocorrência em um documento. [Prioridade 3]
<acronym title="HyperText Markup Language">HTML</acronym>
<abbr title="HyperText Markup Language">HTML</abbr>
<acronym title="HyperText Markup Language">HTML</acronym>

(que significa Linguagem de Marcação de Hipertexto) é uma linguagem
de marcação utilizada para produzir páginas na Web.
Recomendação 5 - Criar tabelas passíveis de transformação 59
harmoniosa
Em tabelas de dados, identificar os cabeçalhos de linha e de coluna.
[Prioridade 1]
<table>
<tr>
<th>Limão</th>
<th>Maçã</th>
<th>Pera</th>
</tr>
<tr>
<td>R$ 10,00</td>
<td>R$ 12,00</td>
<td>R$ 11,00</td>
</tr>
</table>
harmoniosa
Em tabelas de dados, identificar os cabeçalhos de linha e de coluna.
[Prioridade 1]
<table>
<tr>
<th>Limão</th>
<td>R$ 10,00</td>
</tr>
<tr>
<th>Maçã</th>
<td>R$ 12,00</td>
</tr>
<tr>
<th>Pera</th>
<td>R$ 11,00</td>
</tr>
</table>
harmoniosa
Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de
linha ou de coluna, utilizar marcações para associar as células de dados
às células de cabeçalho. [Prioridade 1]
<table>
<thead>
<tr>
<th id="header1" >Produto</th>
<th id="header2" >Valor</th>
</tr>
</thead>
<tfoot>
<tr>
<td headers="header1" >Total</td>
<td headers="header2" >R$ 12,00</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="header1" >Maçã</td>
<td headers="header2" >R$ 12,00</td>
</tr>
</tbody>
</table>
Recomendação 6 - Assegurar que as páginas dotadas de novas 62
tecnologias sejam transformadas harmoniosamente
Organizar os documentos de tal forma que possam ser lidos sem recurso a
folhas de estilo. Por exemplo, se um documento em HTML for
reproduzido sem as folhas de estilo que lhe estão associadas, deve
continuar a ser possível lê-lo. [Prioridade 1]
Recomendação 6 - Assegurar que as páginas dotadas de novas 63
tecnologias sejam transformadas harmoniosamente
Assegurar que todas as páginas possam ser utilizadas mesmo que os
programas interpretáveis, os applets ou outros objetos programados
tenham sido desativados ou não sejam suportados. Se isso não for
possível, fornecer informações equivalentes em uma página alternativa,
acessível. [Prioridade 1]
<a href=“javascript.open.novajanela”>Texto</a>
JavaScript
var link = document. open.novajanela(‘link’);
function link() {
[…]
}
link.onclick = link;
link.onkeypress = link;
<a href=“link.htm” id=“link”>Texto</a>
Recomendação 7 - Assegurar o controle do usuário sobre as 64
alterações temporais do conteúdo
Evitar concepções que possam provocar intermitência da tela, até que os
agentes do usuário possibilitem o seu controle. [Prioridade 1]
Nota: Uma intermitência ou pulsar na faixa de 4 a 59

pulsos por segundo (Hertz), sendo o pico de
sensibilidade 20 pulsos por segundo, bem como uma
rápida passagem de uma quase escuridão para uma
iluminação excessiva (como a que ocorre nas luzes de
tipo "strobe"), pode desencadear ataques ou ausências
nas pessoas com epilepsia fotossensível.
Não criar páginas de atualização automática periódica, até
que os agentes do usuário possibilitem parar essa
atualização. [Prioridade 2]
“HTTP-EQUIV=refresh”
Não utilizar marcações para redirecionar as páginas automaticamente, até
que os agentes do usuário possibilitem parar o redirecionamento
automático. Ao invés de utilizar marcações, configurar o servidor para
que execute os redirecionamentos. [Prioridade 2]
HTTP-EQUIV=“Refresh” CONTENT=“1; URL=www”
Recomendação 9 - Projetar páginas considerando a independência 67
de dispositivos
Assegurar que qualquer elemento dotado de interface própria possa
funcionar de modo independente de dispositivos. [Prioridade 2]
de dispositivos
Assegurar que qualquer elemento dotado de interface própria possa
funcionar de modo independente de dispositivos. [Prioridade 2]
de dispositivos
Criar uma seqüência lógica de tabulação para percorrer links, controles de
formulários e objetos. [Prioridade 3]
70
Recomendação 10 - Utilizar soluções de transição
Não provocar o aparecimento de janelas de sobreposição ou outras
quaisquer, e não fazer com que o conteúdo da janela atual seja
modificado sem que o usuário seja informado disso, até que os agentes
do usuário tornem possível a desativação de janelas secundárias.
[Prioridade 2]
71
Assegurar o correto posicionamento de todos os controles de formulários
que tenham rótulos implicitamente associados, até que os agentes do
usuário venham a suportar associações explícitas entre rótulos e
controles de formulários. [Prioridade 2]
<form>
<label for="nome">Nome:
<input type="text" name="nome“ id="nome"></label>
Sexo:
<label for="masculino">Masculino
<input type="radio" name="sexo" value="masc" id="masculino"></label>
<label for="feminino">Feminino
<input type="radio" name="sexo" value=“fem" id="feminino"></label>
</form>
72
Incluir caracteres predefinidos de preenchimento nas caixas de edição e nas
áreas de texto, até que os agentes do usuário tratem corretamente os
controles vazios. [Prioridade 3]
<form>
<label for="nome">Nome:
<input type="text" name="nome“ id="nome“ value=“Digite seu nome”></label>
Sexo:
<label for="masculino">Masculino
<input type="radio" name="sexo" value="masc" id="masculino"></label>
<label for="feminino">Feminino
<input type="radio" name="sexo" value=“fem" id="feminino"></label>
</form>
Recomendação 11 - Utilizar tecnologias e 73
recomendações do W3C
Utilizar tecnologias do W3C sempre disponíveis e adequadas a uma
determinada tarefa; utilizar as versões mais recentes, desde que
suportadas. [Prioridade 2]
As presentes recomendações recomendam tecnologias do W3C (por ex., HTML,

CSS), por várias razões:
• As tecnologias do W3C incluem funções de acessibilidade "integradas".
• As especificações do W3C são apreciadas nas fases iniciais dos

projetos, para garantir que as questões de acessibilidade sejam levadas em
conta na fase de criação.
• As especificações do W3C são desenvolvidas segundo um processo aberto

e consensual no setor de informática.
Recomendação 11 - Utilizar tecnologias e 74
recomendações do W3C
Evitar funcionalidades desatualizadas de tecnologias do W3C. [Prioridade 2]
Recomendação 12 - Fornecer informações de 75
contexto e orientações.
Dar, a cada frame, um título que facilite a identificação dos frames e sua
navegação. [Prioridade 1]
Por exemplo, em HTML, utilizar o atributo "title" nos elementos FRAME.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%" title="Our library of electronic documents">
<FRAME src="nav.html" title="Navigation bar">
<FRAME src="doc.html" title="Documents">
<NOFRAMES> <A href="lib.html" title="Library link"> Select to go to the
electronic library</A>
</NOFRAMES>
</FRAMESET>
Recomendação 12 - Fornecer informações de 76
contexto e orientações.
Dividir grandes blocos de informação em grupos mais fáceis de gerenciar,
sempre que for o caso. [Prioridade 2]
<FORM action="http://example.com/adduser" method="post">

<FIELDSET>
<LEGEND>Personal information</LEGEND>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname" tabindex="1">
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname" tabindex="2">
...more personal information...
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
...medical history information...
</FIELDSET>
</FORM>
Recomendação 13 - Fornecer mecanismos de 77
navegação claros
Identificar claramente o destino de cada link. [Prioridade 2]
Utilize <a href=“noticia.htm”>Veja as notícias</a>
Em vez de <a href=“noticia.htm”>Clique aqui</a>
<a href=“lancamentos.htm” title=“Veja a nova coleção outono/inverno

2009”>Conheça nossos lançamentos</a>
Recomendação 13 - Fornecer mecanismos de 78
navegação claros
Dar informações sobre a organização geral de um site (por ex., por meio de
um mapa do site ou de um sumário). [Prioridade 2]
Recomendação 14 - Assegurar a clareza e a 79
simplicidade dos documentos.

Utilizar linguagem a mais clara e simples possível, adequada ao conteúdo do
site. [Prioridade 1]
Um site com linguagem clara facilita a possibilidade

de aprofundamento do usuário em seu conteúdo.
Recomendação 14 - Assegurar a clareza e a 80
simplicidade dos documentos.

Complementar o texto com apresentações gráficas ou sonoras, sempre que
facilitarem a compreensão da página. [Prioridade 3]
81
Validação
A validação da acessibilidade deve ser feita por meio de ferramentas

automáticas e da revisão direta. Os métodos automáticos são geralmente
rápidos, mas não são capazes de identificar todas as nuances da
acessibilidade. A avaliação humana pode ajudar a garantir a clareza da
linguagem e a facilidade da navegação.
1 - Utilizar uma ferramenta de acessibilidade

automatizada, e uma ferramenta de validação
de navegadores. Vale lembrar que as
ferramentas de software não incidem sobre
todas as questões da acessibilidade, tais como
clareza de um texto, aplicabilidade de um
equivalente textual.
http://www.w3.org/WAI/ER/tools/complete
82
Validação
2 - Validar a sintaxe (por ex., HTML, XML).

http://validator.w3.org/
3 - Validar as folhas de estilo (por ex., CSS).

http://jigsaw.w3.org/css-validator/
83
Validação
4 - Utilizar um navegador exclusivamente textual ou um emulador.
5 - Utilizar vários navegadores gráficos, com:

- som e gráficos ativos;
- sem gráficos;
- sem som;
- sem mouse;
- sem carregar frames, programas interpretáveis, folhas de estilo ou
applets.
6 - Utilizar vários navegadores, antigos e recentes.
7 - Utilizar um navegador de emissão automática de fala, um leitor de tela,

software de ampliação, uma tela de pequenas dimensões.
84
Validação
8 - Utilizar corretores ortográficos e gramaticais. A eliminação de

problemas gramaticais aumenta o grau de compreensão.
9 - Rever o documento, verificando sua clareza e simplicidade.
10 - Peça a pessoas com deficiências que revejam os documentos.
85
WCAG 2.0
86
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.
• Os critérios de sucesso do WCAG 2.0 são escritos como declarações

testáveis, que não são especificamente tecnológicas.
• As WCAG 2.0 foram desenvolvidas através do processo W3C em

colaboração com pessoas e organizações em todo o mundo, com o
objetivo de elaborar um padrão compartilhado referente à acessibilidade
para o conteúdo da Web, que satisfaça as necessidades das pessoas,
das organizações e dos governos, a nível internacional.
87
Níveis de Abordagem das WCAG 2.0
• Princípios - No topo estão quatro princípios que constituem a fundação da

acessibilidade da Web: perceptível, operável, compreensível e robusto.
• Recomendações - As 12 Recomendações apresentam os objetivos básicos que os

autores devem atingir para tornar o conteúdo mais acessível aos usuários com diferentes
incapacidades.
• Critérios de Sucesso - Para satisfazer as necessidades dos diferentes grupos e

situações, são definidos três níveis de conformidade:
A (o mais baixo), AA e AAA (o mais elevado).
• Técnicas de tipo Suficiente e de tipo Aconselhada - As técnicas têm caráter

informativo e enquadram-se em duas categorias: as que são de tipo suficiente e vão ao
encontro dos critérios de sucesso e as que são de tipo aconselhada. As técnicas de tipo
aconselhada vão além do que é requerido em cada um dos critérios de sucesso e
permitem aos autores um melhor cumprimento das recomendações.
88
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.
89
Princípio 1: Perceptível - A informação e os componentes da
interface do usuário têm de ser apresentados aos usuários em
formas que eles possam perceber.
Alternativas em Texto: Fornecer alternativas em texto.

Lembram do atributo “alt”?
Mídias com base no tempo: Fornecer alternativas para mídias com

base no tempo.
Legendas e descrição do conteúdo sonoro
Adaptável: Criar conteúdos que possam ser apresentados de

diferentes maneiras (por ex., um layout mais simples) sem perder
informação ou estrutura.
CSS para impressão (print) e telas menores (handheld)
90
Princípio 2: Operável - Os componentes de interface de

usuário e a navegação têm de ser operáveis.
91
Princípio 2: Operável - Os componentes de interface de
usuário e a navegação têm de ser operáveis.
Acessível por Teclado: Fazer com que toda a funcionalidade fique

disponível a partir do teclado.
Estruturação do conteúdo
Ataques Epilépticos: Não criar conteúdo de uma forma conhecida

que possa causar ataques epilépticos
Evitar piscar de telas
Navegável: Fornecer formas de ajudar os usuários a navegar,

localizar conteúdos e determinar o local onde estão.
Finalidade do link (contexto)
92
Princípio 3: Compreensível - A informação e a operação

da interface de usuário têm de ser compreensíveis.
93
Princípio 3: Compreensível - A informação e a operação da
interface de usuário têm de ser compreensíveis.
Legível: Tornar o conteúdo de texto legível e compreensível.

Identificação do idioma, abreviaturas (acronym), etc.
Previsível: Fazer com que as páginas Web surjam e funcionem de

forma previsível.
Evitar que links abram novas janelas sem que o usuário saiba.
94
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
Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente
para poder ser interpretado de forma concisa por diversos agentes
do usuário, incluindo tecnologias assistivas.
Compatível: Maximizar a compatibilidade com atuais e futuros

agentes de usuário, incluindo tecnologias assistivas.
Evitar elementos em desuso das tecnologias do W3C
96
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
97
DICAS RÁPIDAS PARA CONSTRUIR WEB SITES ACESSÍVEIS
Imagens e Animações. Use o atributo alt para descrever a função de cada

elemento visual.
Imagemaps. Use mapas client-side (o tag map) e texto para as regiões clicáveis.
Multimídia. Inclua legendas e transcrições para o audio, e descrições para o vídeo.
Híperlinks. Utilize texto que faça sentido fora do contexto. Evite a frase
"clique aqui".
Organização da Página. Use cabeçalhos, listas e uma estrutura consistente. Use

CSS para layout e estilo sempre que possível.
98
DICAS RÁPIDAS PARA CONSTRUIR WEB SITES ACESSÍVEIS
Scripts, applets e plug-ins. Para o caso de estarem desabilitados ou de não serem

suportados pelo browser, forneça conteúdo alternativo.
Frames. Use o tag noframes e empregue títulos significativos.
Tabelas. Torne compreensível a leitura linha a linha. Resuma.
Valide seu trabalho. Use as ferramentas, checklist e os guias disponíveis em

http://www.w3.org/TR/WCAG.
99
Música tema do WCAG 2.0
"Nós queremos lhes mostrar o WCAG“
O vídeo é uma criação de David MacDonald, que aparece cantando a canção do WCAG
pelas ruas. Enquanto isso o vídeo mostra também pessoas com diversos tipos de
deficiência utilizando tecnologias assistivas. Ele é baseado nos 4 princípios do WCAG 2.0.
1) A página web deve ser "Perceivable" (todos os elementos devem ser perceptíveis)
2) A página deve ser "Operable" (operacional, isto é navegável)
3) A página deve ser "Understandable" (compreensivel)
4) A página deve ser “Robust” (acessível com qualquer tipo de tecnologia, atuais e
futuras, incluindo aí as tecnologias assistivas).
http://www.youtube.com/watch?v=gtuna2AWvqk
Fonte: Rede Saci

http://www.saci.org.br/index.php?modulo=akemi&parametro=25093
100
Links importantes
WCAG 1.0
• Inglês: http://www.w3.org/TR/WCAG10/
• Português: http://www.geocities.com/claudiaad/acessibilidade_web.html
WCAG 2.0
• Inglês: http://www.w3.org/TR/WCAG20/
• Português: http://www.ilearn.com.br/TR/WCAG20/
WAI (Web Accessibility Initiative ): http://www.w3.org/WAI/

Lista de validadores de acessibilidade: http://www.w3.org/WAI/ER/tools/complete
HTML Validator: http://validator.w3.org/
CSS Validator: http://jigsaw.w3.org/css-validator/
Dicas rápidas de acessibilidade: http://www.w3.org/WAI/quicktips/qt.br.htm
W3C Escritório Brasil – http://www.w3c.br
101
Por uma Web para todos!
W3C Escritório Brasil

http://www.w3c.br
reinaldo@nic.br

Acessibilidade Na Web w3c 2009

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Acessibilidade Na Web w3c 2009

Transféré par

Droits d'auteur :

Formats disponibles

Acessibilidade na Web:

o caminho das pedras para construir

É um consórcio internacional, criado em 1994

para colaborativamente desenvolver padrões

O escritório brasileiro começou suas atividades

É uma iniciativa do CGI.br, que é o responsável por coordenar e

Conduzir a World Wide Web para que atinja todo

Conduzir a World Wide Web para que atinja todo

Desde sua fundação, o W3C publicou mais de 110 de

• Web para todos

• Web para todos

• Web para todos

• Web em qualquer dispositivo

• Web para todos

• Web base de conhecimento

Possibilitar que computadores interpretem, estabeleçam

• Web para todos

• Web confiável e segura

– Ambiente mas colaborativo

WAI - Web Accessibility Initiative

WCAG - Web Content Accessibility Guidelines

Versão 1.0: 5 de maio de 1999

Segundo a legislação brasileira:

DECRETO Nº 5.296 DE 2 DE DEZEMBRO DE 2004.

Acessibilidade é para todos

Fazer um site acessível não é só se

• É uma recomendação W3C de 5 de maio de 1999

• Foi traduzido para o português por Cláudia Dias, auditora da tecnologia da

• As recomendações explicam como tornar o conteúdo Web acessível a

• No entanto, faz também com que o conteúdo da Web se torne

• independentemente da ferramenta usada (computadores de mesa,

• limitações associadas ao respectivo uso (ambientes barulhentos,

Os desenvolvedores de páginas Web devem levar em consideração diferentes

• sejam incapazes de ver, ouvir, se deslocar, ou interpretar determinados

• tenham dificuldade em ler ou compreender textos;

• não tenham um teclado ou mouse, ou não sejam capazes de utilizá-los;

• possuam tela que apresenta apenas texto, ou com dimensões

Os desenvolvedores de páginas Web devem levar em consideração diferentes

• não falem ou compreendam fluentemente o idioma em que o documento

• estejam com seus olhos, mãos ou ouvidos ocupados (por exemplo em

• possuam uma versão ultrapassada de navegador web, diferente dos

- Utilização de folhas de estilo (CSS)

Utilização de Folhas de Estilo (CSS)

Vantagens da utilização de Folhas de Estilo

Utilização de Folhas de Estilo (CSS)

<font face=“Arial, Verdana, Helvetica, sans-serif” size=“2”

Utilização de Folhas de Estilo (CSS)

Utilização de Folhas de Estilo (CSS)

Tornar imagens acessíveis

Alguns usuários podem não ser capazes de ver imagens;

Tornar imagens acessíveis

<img src="foto-01.gif" alt="">

O Arco do Triunfo (francês: Arc de Triomphe) é um

Tornar imagens acessíveis

<img src="foto-01.gif" alt="">

O Arco do Triunfo (francês: Arc de Triomphe) é um

Tornar imagens acessíveis

<img src="foto-01.gif" alt=“Foto: Divulgação">

O Arco do Triunfo (francês: Arc de Triomphe) é um

Tornar imagens acessíveis

<img src="foto-01.gif" alt=“Foto do Arco do Triunfo">

O Arco do Triunfo (francês: Arc de Triomphe) é um

Tornar imagens acessíveis

Tornar imagens acessíveis