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

Assegurar uma transformação

harmoniosa das páginas

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 6. Assegurar que as páginas dotadas de novas tecnologias sejam

transformadas harmoniosamente 7. Assegurar o controle do usuário sobre as alterações temporais

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

Tornar o conteúdo compreensível e

navegável

12. Fornecer contexto e orientações 13. Fornecer mecanismos de navegação claros 14. Assegurar a clareza e a simplicidade dos documentos

WCAG 1.0:Composto por 14 diretrizes de acessibilidade organizadas em torno de 2 princípios.

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 Prioridade

Significado da Prioridade

Nível de Conformidade(conforme atendimento a

todas as recomendações da cada prioridade)

A AA AAA

Prioridade 1 Requisitos básicos para acessibilidade X X X

Prioridade 2

Remoção de significativas barreiras de

acessibilidade

X X

Prioridade 3 Melhoria do acesso ao conteúdo X

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

Princípios Diretrizes

1. Perceptível

1.1. Fornecer alternativas textuais para conteúdos não textuais1.2. Fornecer alternativas sincronizadas para apresentações

multimídia 1.3. Criar o conteúdo apresentável de diferentes maneiras, sem que

a informação ou estrutura se percam1.4. Separar o primeiro e segundo plano, facilitando a visão e a

audição do conteúdo

2. Operável

2.1. Tornar todas as funções disponíveis pelo teclado2.2. Fornecer tempo suficiente de leitura e uso do conteúdo2.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. Compreensível3.1. Disponibilizar conteúdo textual compreensível e legível3.2. Tornar o funcionamento das páginas previsível 3.3. Fornecer auxílio na prevenção e correção de erros

4. Robusto 4.1. Maximizar a compatibilidade com agentes de usuários atuais e futuros, incluindo as tecnologias assistivas

WCAG 2.0:Composto por 12 diretrizes de acessibilidade organizadas em torno de 4 princípios

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.

Número Diretriz1 Fornecer alternativas equivalentes para conteúdo gráfico e sonoro.

2 Assegurar que o site seja legível e compreensível mesmo sem o uso de formatações.

3 Dar preferência às tecnologias de marcação e formatação.

4 Assegurar que toda a informação seja interpretada corretamente, com clareza e simplicidade.

5 Assegurar que as tecnologias utilizadas funcionem - de maneira acessível - 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.

8Em casos não contemplados pelas diretrizes anteriores, utilizar recursos reconhecidos por instituições com propriedade no assunto, como tecnologias acessíveis.

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

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.0Passou 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:

•Marcação: contém recomendações específicas sobre a construção do código 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;

•Comportamento: contém recomendações específicas sobre o comportamento 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);

•Conteúdo/informação: contém recomendações específicas sobre o conteúdo das 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;

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

•Multimídia: contém recomendações específicas sobre a inserção de elementos 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;

•Formulário: contém recomendações específicas para os formulários presentes 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çõesO 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ÊNCIAShttp://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_>