Sites Acessíveis

Como construir
sites acessíveis

©2012 Cláudio Diniz Alves e Janicy Rocha

1 - Separando marcação/conteúdo (HTML/XHTML) de
apresentação (CSS).

Exemplo:

2 - Seguindo as diretrizes de Acessibilidade
• WCAG
• e-MAG

WCAG 1.0:
Composto por 14 diretrizes de acessibilidade organizadas em torno de 2 princípios.
1. Fornecer alternativas equivalentes ao conteúdo sonoro e visual
2. Não recorrer apenas à cor para a percepção do conteúdo
3. Utilizar corretamente anotações e folhas de estilo
4. Indicar claramente qual a língua utilizada
5. Criar tabelas passíveis de transformação harmoniosa
Assegurar uma 6. Assegurar que as páginas dotadas de novas tecnologias sejam
transformação transformadas harmoniosamente
harmoniosa das 7. Assegurar o controle do usuário sobre as alterações temporais
páginas do conteúdo
8. Assegurar a acessibilidade direta de interfaces do usuário
integradas
9. Pautar a concepção pela independência face a dispositivos
10. Utilizar soluções de transição
11. Utilizar as tecnologias e as diretrizes do W3C
12. Fornecer contexto e orientações
Tornar o conteúdo
compreensível e 13. Fornecer mecanismos de navegação claros
navegável 14. Assegurar a clareza e a simplicidade dos documentos

WCAG 1.0:
Pontos de Verificação: são associados a cada diretriz
e explicam como ela deve ser aplicada, oferecendo
exemplos para sua implementação.
Níveis de Prioridade: são associados aos Pontos de
Verificação de cada recomendação e representam o
impacto destes na acessibilidade do site.
Níveis de Conformidade: grau de acessibilidade do
site (A, AA ou AAA) medido a partir dos Níveis de
Prioridade.

Nível de Conformidade
Nível de Significado da (conforme atendimento a
todas as recomendações da
Prioridade Prioridade cada prioridade)
A AA AAA
Requisitos básicos
Prioridade 1 X X X
para acessibilidade
Remoção de
significativas
Prioridade 2 X X
barreiras de
acessibilidade
Melhoria do acesso
Prioridade 3 X
ao conteúdo

Exemplo:
Princípio: Assegurar uma transformação harmoniosa
das páginas.
Diretriz: Fornecer alternativas equivalentes ao
conteúdo sonoro e visual.
Ponto de verificação: Fornecer um texto equivalente a
cada elemento não-textual.
Nível de Prioridade: 1

WCAG 2.0:
Composto por 12 diretrizes de acessibilidade organizadas em torno de 4 princípios
Princípios Diretrizes
1.1. Fornecer alternativas textuais para conteúdos não textuais
1.2. Fornecer alternativas sincronizadas para apresentações
multimídia
1. Perceptível 1.3. Criar o conteúdo apresentável de diferentes maneiras, sem que
a informação ou estrutura se percam
1.4. Separar o primeiro e segundo plano, facilitando a visão e a
audição do conteúdo
2.1. Tornar todas as funções disponíveis pelo teclado
2.2. Fornecer tempo suficiente de leitura e uso do conteúdo
2. Operável 2.3. Não criar conteúdos que pisquem, causando ataques ou
ausências
2.4. Fornecer auxílio de navegação e localização aos usuários
3.1. Disponibilizar conteúdo textual compreensível e legível
3. Compreensível 3.2. Tornar o funcionamento das páginas previsível
3.3. Fornecer auxílio na prevenção e correção de erros
4.1. Maximizar a compatibilidade com agentes de usuários atuais e
4. Robusto
futuros, incluindo as tecnologias assistivas

e-MAG 1.0: primeira versão do Modelo de
Acessibilidade para o Governo Eletrônico, baseada no
WCAG 2.0, lançada em janeiro de 2005 e colocada em
Consulta Pública.
e-MAG 2.0: segunda versão do Modelo de
Acessibilidade para o Governo Eletrônico, lançada em
dezembro de 2005, contendo alterações sugeridas
durante a Consulta Pública.

• O e-MAG 2.0 é composto por dois documentos:
• Visão do Cidadão: direcionado aos cidadãos, define os 3 níveis de
acessibilidade (A, AA e AAA), apresenta o histórico e os objetivos do
modelo e divide os princípios de acessibilidade nas áreas de:
• Percepção: refere-se à apresentação do conteúdo, preocupando-se
com a percepção de elementos como gráficos, imagens e sons.
• Operação: refere-se à manipulação da informação, preocupando-se
em ofertar formas alternativas de acesso às informações e controle
de navegação ao usuário.
• Entendimento: refere-se à compreensão do conteúdo,
preocupando-se em garantir a apresentação de conteúdos
compreensíveis a todos os usuários.
• Compatibilidade: refere-se à necessidade da adoção de
tecnologias acessíveis e compatíveis com o modelo.

Cartilha Técnica: documento com 8 diretrizes de acessibilidade, às
quais estão vinculadas 57 recomendações de acessibilidade.

Número Diretriz
1 Fornecer alternativas equivalentes para conteúdo gráfico e sonoro.
Assegurar que o site seja legível e compreensível mesmo sem o uso de
2
formatações.
3 Dar preferência às tecnologias de marcação e formatação.
Assegurar que toda a informação seja interpretada corretamente, com clareza
4
e simplicidade.
Assegurar que as tecnologias utilizadas funcionem - de maneira acessível -
5
independente de programas, versões e futuras mudanças.
6 Assegurar o controle do usuário sobre a navegação no sítio.
7 Identificar claramente os mecanismos de navegação.
Em casos não contemplados pelas diretrizes anteriores, utilizar recursos
8 reconhecidos por instituições com propriedade no assunto, como tecnologias
acessíveis.

Segundo o e-MAG 2.0 o processo de acessibilidade
ocorre em 4 etapas distintas:
• Verificação da necessidade de tornar o
conteúdo acessível;
• Aplicação e validação das recomendações;
• Promoção e divulgação da acessibilidade;
• Vigilância constante para que o site permaneça
acessível.

e-MAG 3.0
Passou por consulta pública entre os meses de novembro de 2010 e
janeiro de 2011, sendo lançada oficialmente em setembro de 2011, com
diversas modificações estruturais em relação à versão 2.0:
• Tornou-se um documento único, não mais dividido em duas
partes, como na versão anterior;
• Não adota mais dos níveis de prioridade A, AA e AAA,
“visto que o padrão é voltado às páginas do Governo, não
sendo permitidas exceções com relação ao cumprimento das
recomendações” (BRASIL, 2011).
• Não divide mais os princípios de acessibilidade nas áreas de
percepção, operação, entendimento e compatibilidade.

e-MAG 3.0: apresenta 45 recomendações de acessibilidade,
classificadas nas seções de:

• arcação: contém recomendações específicas sobre a construção do código
M
HTML (HyperText Markup Language) das páginas dos websites, com foco na mar-
cação (Markup), ou seja, no conjunto de códigos (tags) aplicados ao texto para
adicionar informações particulares sobre ele;

• omportamento: contém recomendações específicas sobre o comportamento
C
das páginas dos websites (atualização, redirecionamento automáticos e outros)
e dos elementos nelas contidos (scripts, Flash, conteúdos dinâmicos e outros);

• onteúdo/informação: contém recomendações específicas sobre o conteúdo das
C
páginas dos websites e das informações nelas contidas, como títulos e links cla-
ros, sucintos e significativos, mecanismos para indicar a localização do usuário
no website, descrição textual de conteúdos gráficos e outros;

• presentação/design: contém recomendações específicas sobre o design das
A
páginas dos websites, tais como layout, contraste entre cores, redimensiona-
mento de textos e outros;

• ultimídia: contém recomendações específicas sobre a inserção de elementos
M
multimídia (vídeos e áudio) nas páginas dos websites, tais como legendas, audi-
odescrição, controles de áudio e de animação e outros;

• ormulário: contém recomendações específicas para os formulários presentes
F
nas páginas dos websites, tais como alternativas textuais para botões em forma-
to de imagens, ordem lógica de navegação/tabulação, instruções para a entrada
de dados, captchas acessíveis e outros.

e-MAG 3.0 - Processo de Avaliação de Acessibilidade
a) Validar os códigos do conteúdo HTML e das folhas de estilo;
b) Verificar o fluxo de leitura da página, utilizando um navegador
textual, como o Lynx, ou um leitor de tela (NVDA ou ORCA).
c) Verificar o fluxo de leitura da página sem estilos, sem script e
sem as imagens;
d) Verificar as funcionalidades da barra de acessibilidade, aumen-
tando e diminuindo a letra, modificando o contraste, etc.;
e) Realizar a validação automática de acessibilidade utilizando o
ASES e outros avaliadores automáticos;
f) Realizar a validação manual, utilizando os checklists de vali-
dação humana.

e-MAG 3.0 - Algumas considerações
O e-MAG possui uma recomendação polêmica:
RECOMENDAÇÃO 25 – Garantir a leitura e compreensão das informações
• A avaliação com usuários não consta como um dos passos do Processo de
Avaliação de Acessibilidade. Entretanto o documento ressalta que uma etapa
essencial da validação de uma página é a realização de testes com usuários
com deficiência.
• O Mapa do Sítio não consta como uma recomendação de acessibilidade, mas
é mencionado em outra seção do documento.
• Muitas recomendações são detalhadas em documentos externos (Formulári-
os e Tabelas Acessíveis, Manual de Redação para a Web, etc), o que dificulta
que elas sejam seguidas.
• Desde o lançamento da versão 3.0 do e-MAG, é recomendada sua adoção pe-
los websites governamentais brasileiro, em substituição à versão 2.0, entre-
tanto os avaliadores automáticos ainda não foram atualizados.

Diretrizes de Acessibilidade: exemplos práticos

MARCAÇÃO - Recomendação 6: Fornecer âncoras para ir direto a
um bloco de conteúdo.

MARCAÇÃO - Recomendação 9: Não abrir novas instâncias sem a
solicitação do usuário. Não devem ser utilizados:
• Pop-ups
• Aberturas de novas abas ou janelas

COMPORTAMENTO - Recomendação 11: Não criar páginas com
atualização automática periódica.

CONTEÚDO/INFORMAÇÃO - Recomendação 17: Oferecer um título
descritivo e informativo à página.

CONTEÚDO/INFORMAÇÃO – Recomendação 18: Disponibilizar
informação sobre a localização do usuário na página.

CONTEÚDO/INFORMAÇÃO – Recomendação 19: Descrever links
clara e sucintamente.

CONTEÚDO/INFORMAÇÃO – Recomendação 20: Fornecer
alternativa em texto para imagens no sítio.
FORMULÁRIOS - Recomendação 36: Fornecer alternativa em texto
para botões de imagens em formulários.

<img src="crianca.jpg" alt="Foto de uma criança cheirando uma flor">

CONTEÚDO/INFORMAÇÃO – Recomendação 22: Disponibilizar
documentos em formatos acessíveis.

APRESENTAÇÃO/DESIGN - Recomendação 28: Oferecer contraste
mínimo entre plano de fundo e primeiro plano.

APRESENTAÇÃO/DESIGN - Recomendação 30: Permitir
redimensionamento de texto, sem perda de funcionalidade.

APRESENTAÇÃO/DESIGN - Recomendação 31: Dividir as áreas de
informação.

MULTIMIDIA - Recomendação 33: Fornecer alternativa para vídeo.
MULTIMIDIA - Recomendação 34: Fornecer alternativa para áudio.
MULTIMIDIA - Recomendação 35: Fornecer áudio-descrição para vídeo
pré-gravado.
MULTIMIDIA - Recomendação 36: Fornecer controle de áudio para som.

FORMULÁRIOS - Recomendação 42: Fornecer instruções para
entrada de dados.

FORMULÁRIOS - Recomendação 43: Identificar e descrever erros
de entrada de dados.

FORMULÁRIOS - Recomendação 44: Agrupar campos de
formulários.

FORMULÁRIOS - Recomendação 45: Fornecer captcha humano.

REFERÊNCIAS
http://www.slideshare.net/CassianaFerraz/acessibilidade-web-12581391
http://www.ivogomes.com/apresentacoes/acessibilidade-web.pdf
BRASIL. Decreto nº 5.296 de 02 de Dezembro de 2004. Diário Oficial da União, Brasília: Senado Federal, 03 dez.
2004. Disponível em: <http://www.trt02.gov.br/geral/tribunal2/Legis/Decreto/5296_04.html>.
BRASIL. Recomendações de Acessibilidade para Construção e Adaptação de Conteúdos do Governo Brasileiro na
Internet: eMag. Disponível em: <https://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG>.
DIAS, C. Usabilidade na Web: Criando Portais mais Acessíveis. Alta Books, 2007.
FERREIRA, Simone Bacellar Leal et al. Panorama da acessibilidade na web brasileira. In: Encontro Nacional dos
Programas de Pós Graduação em Administração, 2007, Rio de Janeiro. Anais do ENANPAD 2007.
NBR 9050: Associação Brasileira de Normas Técnicas. Acessibilidade de Pessoas Portadoras de Deficiências a
Edificações, Espaço, Mobiliário e Equipamentos Urbanos. ABNT. RJ. 1994. Disponível em <http://www.mpdft.
gov.br/sicorde/NBR9050-31052004.pdf>.
SERPRO. Serviço Federal de Processamento de Dados. Disponível em: <http://www.serpro.gov.br/
acessibilidade/>.
W3C. Web Content Accessibility Guidelines 1.0. 1999. Disponível em: <http://www.w3.org/TR/#tr_Web_Content_
Accessibility_Guidelines__WCAG_>

Sites Acessíveis

Mais conteúdo relacionado

Semelhante a Sites Acessíveis

Mais de Claudio Diniz - Designer Gráfico

Sites Acessíveis