Upload
claudio-alves
View
250
Download
2
Embed Size (px)
DESCRIPTION
Aula sobre acessibilidade na web.
Citation preview
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_>