Sites acessíveis
Upcoming SlideShare
Loading in...5
×
 

Sites acessíveis

on

  • 1,620 views

Aula sobre diretrizes de acessibilidade. e-Mag e WCAG.

Aula sobre diretrizes de acessibilidade. e-Mag e WCAG.

Statistics

Views

Total Views
1,620
Views on SlideShare
1,620
Embed Views
0

Actions

Likes
0
Downloads
34
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sites acessíveis Sites acessíveis Presentation Transcript

  • Como construirsites acessíveis ©2012 Cláudio Diniz Alves e Janicy Rocha
  • 1 - Separando marcação/conteúdo (HTML/XHTML) deapresentaçã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 diretrize explicam como ela deve ser aplicada, oferecendoexemplos para sua implementação.Níveis de Prioridade: são associados aos Pontos deVerificação de cada recomendação e representam oimpacto destes na acessibilidade do site.Níveis de Conformidade: grau de acessibilidade dosite (A, AA ou AAA) medido a partir dos Níveis dePrioridade.
  • Nível de Conformidade Nível de Significado da (conforme atendimento a todas as recomendações daPrioridade Prioridade cada prioridade) A AA AAA Requisitos básicosPrioridade 1 X X X para acessibilidade Remoção de significativasPrioridade 2 X X barreiras de acessibilidade Melhoria do acessoPrioridade 3 X ao conteúdo
  • Exemplo:Princípio: Assegurar uma transformação harmoniosadas páginas.Diretriz: Fornecer alternativas equivalentes aoconteúdo sonoro e visual.Ponto de verificação: Fornecer um texto equivalente acada 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ídia1. 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údo2. 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ível3. 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 e4. Robusto futuros, incluindo as tecnologias assistivas
  • e-MAG 1.0: primeira versão do Modelo deAcessibilidade para o Governo Eletrônico, baseada noWCAG 2.0, lançada em janeiro de 2005 e colocada emConsulta Pública.e-MAG 2.0: segunda versão do Modelo deAcessibilidade para o Governo Eletrônico, lançada emdezembro de 2005, contendo alterações sugeridasdurante 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, àsquais 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 acessibilidadeocorre 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 ejaneiro de 2011, sendo lançada oficialmente em setembro de 2011, comdiversas 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çõ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 aum bloco de conteúdo.
  • MARCAÇÃO - Recomendação 9: Não abrir novas instâncias sem asolicitaçã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 comatualização automática periódica.
  • CONTEÚDO/INFORMAÇÃO - Recomendação 17: Oferecer um títulodescritivo e informativo à página.
  • CONTEÚDO/INFORMAÇÃO – Recomendação 18: Disponibilizarinformação sobre a localização do usuário na página.
  • CONTEÚDO/INFORMAÇÃO – Recomendação 19: Descrever linksclara e sucintamente.
  • CONTEÚDO/INFORMAÇÃO – Recomendação 20: Forneceralternativa em texto para imagens no sítio.FORMULÁRIOS - Recomendação 36: Fornecer alternativa em textopara 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: Disponibilizardocumentos em formatos acessíveis.
  • APRESENTAÇÃO/DESIGN - Recomendação 28: Oferecer contrastemínimo entre plano de fundo e primeiro plano.
  • APRESENTAÇÃO/DESIGN - Recomendação 30: Permitirredimensionamento de texto, sem perda de funcionalidade.
  • APRESENTAÇÃO/DESIGN - Recomendação 31: Dividir as áreas deinformaçã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ídeopré-gravado.MULTIMIDIA - Recomendação 36: Fornecer controle de áudio para som.
  • FORMULÁRIOS - Recomendação 42: Fornecer instruções paraentrada de dados.
  • FORMULÁRIOS - Recomendação 43: Identificar e descrever errosde entrada de dados.
  • FORMULÁRIOS - Recomendação 44: Agrupar campos deformulários.
  • FORMULÁRIOS - Recomendação 45: Fornecer captcha humano.
  • REFERÊNCIAShttp://www.slideshare.net/CassianaFerraz/acessibilidade-web-12581391http://www.ivogomes.com/apresentacoes/acessibilidade-web.pdfBRASIL. 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 naInternet: 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 dosProgramas 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 aEdificaçõ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_>