Ministério do Planejamento, Orçamento e Gestão Secretaria de Logística e Tecnologia da Informação Departamento de Governo Eletrônico www.governoeletronico.gov.br Ministério da Educação Secretaria de Educação Profissional e Tecnológica Projeto de Acessibilidade Virtual Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul Instituto Federal de Educação, Ciência e Tecnologia do Ceará Instituto Federal de Educação, Ciência e Tecnologia Baiano Versão 3.1 Modelo de Acessibilidade em Governo Eletrônico Abril de 2014 Esta obra está licenciada por uma licença Creative Commons - Atribuição 4.0 Internacional(CC BY 4.0) http://creativecommons.org/licenses/by/4.0/deed.pt_BR Você tem a liberdade de: ? Compartilhar ? copiar e distribuir o material em qualquer meio ou formato. ? Adaptar ? remixar, transformar e desenvolver o material para qualquer finalidade, mesmo comercialmente. O concedente não pode revogar essas liberdades, contanto que você siga os termos da licença. Sob as seguintes condições: ? Atribuição ? Você deve creditar a obra da forma especificada pelo autor ou licenciante, e indicar as mudanças feitas (mas não de maneira que sugira que estes concedem qualquer aval a você ou ao seu uso da obra). ? Compartilhamento pela mesma licença ? Se você alterar, transformar ou criar em cima desta obra, você poderá distribuir a obra resultante apenas sob a mesma licença, ou sob uma licença similar à presente. Ficando claro que: 1.Renúncia ? Qualquer das condições acima pode ser renunciada se você obtiver permissão do titular dos direitos autorais. 2.Domínio Público ? Onde a obra ou qualquer de seus elementos estiver em domínio público sob o direito aplicável, esta condição não é, de maneira alguma, afetada pela licença. 3.Outros Direitos ? Os seguintes direitos não são, de maneira alguma, afetados pela licença: ? Limitações e exceções aos direitos autorais ou quaisquer usos livres aplicáveis; ? Os direitos morais do autor; Modelo de Acessibilidade em Governo Eletrônico eMAG 2 Brasil. Ministério do Planejamento, Orçamento e Gestão. Secretaria de Logística e Tecnologia da Informação eMAG Modelo de Acessibilidade em Governo Eletrônico/ Ministério do Planejamento, Orçamento e Gestão, Secretaria de Logística e Tecnologia da Informação - Brasília : MP, SLTI, 2014. 92 p.: color. 1. Acessibilidade 2. Sites da Web ? Projetos. 3. Sites na Web - Desenvolvimento 4. Programação para Internet 5. Informática - Serviço Público I. Título. CDU 004.5:35 CDD 004.678 ?Direitos que outras pessoas podem ter sobre a obra ou sobre a utilização da obra, tais como direitos de imagem ou privacidade. Aviso ? Para qualquer reutilização ou distribuição, você deve deixar claro a terceiros os termos da licença a que se encontra submetida esta obra. Modelo de Acessibilidade em Governo Eletrônico eMAG 3 Agradecimentos O Departamento de Governo Eletrônico (DGE) agradece à: Bruna Poletto Salton, Jucélia Poletto Almeida, Agebson Rocha Façanha, André Luiz Rezende, Andréa Poletto Sonza, Ângela Guimarães, Felipe Zap, Gleison Samuel do Nascimento, Jorge Fiore de Oliveira Junior, Júlia Marques Carvalho da Silva, Marco Antônio de Queiroz (in memoriam), Marcus Vinícius Bennett Ferreira, Maurício Covolan Rosito, Reinaldo Ferraz, Renato Busatto, Ricardo Moro, Ueslei Paterno e Woquiton Fernandes, que tornaram a versão 3.0 do eMAG possível. Por sua contribuição na versão 3.1 agradecemos à Anderson Luís Porto Costa, Everaldo Carniel, Lael Nervis, Jason Pilotti e Lívio Siqueira Lima. O DGE também agradece ao: André Pimenta Freire, Carol Scarton, Diego Roger Ramos Freitas, Edercio Marques Bento, Jorge Fernandes, Leonelo Dell Anhol Almeida, Maria Cecília Calani Baranauskas, Thiago Prado de Campos, Vagner Figueredo de Santana. Pelas contribuições, via consulta pública, com sugestões, esclarecimentos e correções para o presente documento. Equipe do DGE ? Departamento de Governo Eletrônico Ana Elisa Dourado Salina Gabriel ? Analista em Tecnologia da Informação César Gonçalves do Bomfim ? Analista em Tecnologia da Informação Edson Santos Martins Leite - Analista em Tecnologia da Informação Fernanda Hoffmann Lobato ? Coordenadora Geral Higo Gomes Mesquita - Analista em Tecnologia da Informação Modelo de Acessibilidade em Governo Eletrônico eMAG 4 Sum ário 1.Introdução......................................................................................................6 1.1 O acesso de pessoas com deficiência...........................................................6 1.2 Sobre as versões do eMAG.........................................................................7 1.3 Alterações na versão 3.1............................................................................9 1.4 Legislação..............................................................................................10 2 . O processo para desenvolver um sítio acessível..............................................12 2.1 Primeiro passo: Padrões Web....................................................................12 2.2 Segundo passo: Recomendações de Acessibilidade ......................................12 2.3 Terceiro passo: Avaliação de Acessibilidade.................................................13 2.4 Manutenção da acessibilidade...................................................................14 2.5 Recursos, ferramentas e leitura complementar............................................15 3 . Recomendações de acessibilidade.................................................................16 3.1 Marcação................................................................................................16 Recomendação 1.1 ? Respeitar os Padrões Web ..............................................16 Recomendação 1.2 ? Organizar o código HTML de forma lógica e semântica .......17 Recomendação 1.3 ? Utilizar corretamente os níveis de cabeçalho.....................19 Recomendação 1.4 ? Ordenar de forma lógica e intuitiva a leitura e tabulação....21 Recomendação 1.5 ? Fornecer âncoras para ir direto a um bloco de conteúdo .....22 Recomendação 1.6 ? Não utilizar tabelas para diagramação.............................24 Recomendação 1.7 ? Separar links adjacentes................................................25 Recomendação 1.8 ? Dividir as áreas de informação........................................27 Recomendação 1.9 ? Não abrir novas instâncias sem a solicitação do usuário.....32 3.2 Comportamento (Document Object Model ? DOM) .......................................34 Recomendação 2.1 - Disponibilizar todas as funções da página via teclado.........34 Recomendação 2.2 ? Garantir que os objetos programáveis sejam acessíveis ....37 Recomendação 2.3- Não criar páginas com atualização automática periódica ......38 Recomendação 2.4 ? Não utilizar redirecionamento automático de páginas ........39 Recomendação 2.5 ? Fornecer alternativa para modificar limite de tempo..........39 Recomendação 2.6 ? Não incluir situações com intermitência de tela.................40 Recomendação 2.7 ? Assegurar o controle do usuário sobre as alterações temporais do conteúdo................................................................................40 3.3 Conteúdo / Informação............................................................................41 Recomendação 3.1 ? Identificar o idioma principal da página............................41 Recomendação 3.2 ? Informar mudança de idioma no conteúdo .......................42 Recomendação 3.3 ? Oferecer um título descritivo e informativo à página..........42 Recomendação 3.4 ? Informar o usuário sobre sua localização na página..........43 Recomendação 3.5 ? Descrever links clara e sucintamente...............................43 Recomendação 3.6 ? Fornecer alternativa em texto para as imagens do sítio......45 Recomendação 3.7 ? Utilizar mapas de imagem de forma acessível ...................50 Recomendação 3.8 ? Disponibilizar documentos em formatos acessíveis ............51 Recomendação 3.9 ? Em tabelas, utilizar títulos e resumos de forma apropriada.51 Recomendação 3.10 ? Associar células de dados às células de cabeçalho...........52 Modelo de Acessibilidade em Governo Eletrônico eMAG 5 Recomendação 3.11 ? Garantir a leitura e compreensão das informações ...........56 Recomendação 3.12 ? Disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns......................................................................................57 3.4 Apresentação / Design.............................................................................57 Recomendação 4.1 - Oferecer contraste mínimo entre plano de fundo e primeiro plano.........................................................................................................57 Recomendação 4.2 ? Não utilizar apenas cor ou outras características sensoriais para diferenciar elementos...........................................................................58 Recomendação 4.3 ? Permitir redimensionamento sem perda de funcionalidade 60 Recomendação 4.4 ? Possibilitar que o elemento com foco seja visualmente evidente....................................................................................................65 3.5 Multimídia..............................................................................................66 Recomendação 5.1 ? Fornecer alternativa para vídeo.......................................66 Recomendação 5.2 ? Fornecer alternativa para áudio.......................................69 Recomendação 5.3 ? Oferecer audiodescrição para vídeo pré-gravado ...............70 Recomendação 5.4 ? Fornecer controle de áudio para som ...............................70 Recomendação 5.5 ? Fornecer controle de animação .......................................71 3.6 Formulários............................................................................................72 Recomendação 6.1 ? Fornecer alternativa em texto para os botões de imagem de formulários.................................................................................................72 Recomendação 6.2 ? Associar etiquetas aos seus campos ................................72 Recomendação 6.3 ? Estabelecer uma ordem lógica de navegação ....................73 Recomendação 6.4 ? Não provocar automaticamente alteração no contexto .......73 Recomendação 6.5 ? Fornecer instruções para entrada de dados ......................74 Recomendação 6.6 ? Identificar e descrever erros de entrada de dados e confirmar o envio das informações...............................................................................81 Recomendação 6.7 ? Agrupar campos de formulário ........................................84 Recomendação 6.8 ? Fornecer estratégias de segurança específicas ao invés de CAPTCHA ..................................................................................................86 4 . Elementos padronizados de acessibilidade digital no Governo Federal................88 4.1 Atalhos de teclado...................................................................................88 4.2 Primeira folha de contraste.......................................................................88 4.3 Barra de acessibilidade.............................................................................89 4.4 Apresentação do mapa do sítio..................................................................90 4.5 Página de descrição com os recursos de acessibilidade.................................91 5 . Práticas desaconselhadas.............................................................................93 6 . Glossário....................................................................................................94 7 . Tabelas de Contraste de Cores......................................................................96 Modelo de Acessibilidade em Governo Eletrônico eMAG 6 1.Introdução Uma das principais atribuições do Governo Federal é promover a inclusão social, com distribuição de renda e diminuição das desigualdades. Entre as diversas iniciativas que visam atingir esse objetivo, o governo investe no uso adequado e coordenado da tecnologia porque compreende a inclusão digital como caminho para a inclusão social. Na última década, a expansão prodigiosa da Internet vem revolucionando as formas de comunicação, de acesso à informação e de realização de negócios em todo o mundo. Mas a que se deve este fenômeno? Basicamente, deve-se ao seu potencial para atingir instantaneamente um grande número de pessoas, independentemente de localização geográfica e de contexto sócio-cultural. Neste contexto, a inacessibilidade de sítios eletrônicos exclui uma parcela significativa da população brasileira do acesso às informações veiculadas na internet. O governo brasileiro - tendo em vista suas atribuições - não pode aceitar tal situação na entrega de informações e serviços sob sua responsabilidade. O Modelo de Acessibilidade em Governo Eletrônico (eMAG) tem o compromisso de ser o norteador no desenvolvimento e a adaptação de conteúdos digitais do governo federal, garantindo o acesso a todos. As recomendações do eMAG permitem que a implementação da acessibilidade digital seja conduzida de forma padronizada, de fácil implementação, coerente com as necessidades brasileiras e em conformidade com os padrões internacionais. É importante ressaltar que o eMAG trata de uma versão especializada do documento internacional WCAG (Web Content Accessibility Guidelines: Recomendações de Acessibilidade para Conteúdo Web) voltado para o governo brasileiro, porém o eMAG não exclui qualquer boa prática de acessibilidade do WCAG. 1.1 O acesso de pessoas com deficiência O computador e a Internet representam um enorme passo para a inclusão de pessoas com deficiência, promovendo autonomia e independência. Mas como pessoas com deficiência utilizam o computador? No que se refere a acesso ao computador, as quatro principais situações vivenciadas por usuários com deficiência são: ?Acesso ao computador sem mouse: no caso de pessoas com deficiência visual, dificuldade de controle dos movimentos, paralisia ou amputação de um membro superior; ?Acesso ao computador sem teclado: no caso de pessoas com amputações, grandes limitações de movimentos ou falta de força nos membros superiores; ?Acesso ao computador sem monitor: no caso de pessoas com cegueira; Modelo de Acessibilidade em Governo Eletrônico eMAG 7 ?Acesso ao computador sem áudio : no caso de pessoas com deficiência auditiva. Muitas vezes, a deficiência não é severa o suficiente a ponto de tornar-se uma barreira à utilização do computador. Entretanto, na maioria das páginas da Web, as pessoas cegas ou com baixa visão, pessoas com deficiência auditiva, com dificuldade em utilizar o mouse, por exemplo, encontram barreiras de acessibilidade que dificultam ou impossibilitam o acesso aos seus conteúdos. Muitas pessoas também apresentam outras limitações relacionadas à memória, resolução de problemas, atenção, compreensão verbal, leitura e linguística, compreensão matemática e compreensão visual. Uma pessoa com dislexia, por exemplo, pode apresentar dificuldade de leitura de uma página devido a um desenho inadequado. Por isso, um sítio desenvolvido considerando a acessibilidade deve englobar diferentes níveis de escolaridade, faixa etária e pouca experiência na utilização do computador, bem como ser compatível com as diversas tecnologias utilizadas para acessar uma página da Web. Um dos aliados das pessoas com deficiência para o uso do computador são os recursos de tecnologia assistiva, que auxiliam na realização de tarefas antes muito difíceis ou impossíveis de realizar, promovendo, desta maneira, a autonomia, independência, qualidade de vida e inclusão social de pessoas com deficiência. Existe atualmente uma enorme gama de recursos de tecnologia assistiva, desde artefatos simples até objetos ou softwares mais sofisticados e específicos, de acordo com a necessidade de cada pessoa. Uma pessoa com limitado movimento das mãos, por exemplo, pode utilizar um teclado adaptado que contém teclas maiores ou um mouse especial para operar o computador. Já as pessoas com baixa visão podem recorrer a recursos como ampliadores de tela, enquanto usuários cegos podem utilizar softwares leitores de tela para fazer uso do computador. Apesar de sua enorme importância na promoção da acessibilidade às pessoas com deficiência, os recursos de tecnologia assistiva, por si só, não garantem o acesso ao conteúdo de uma página da Web. Para tal, é necessário que a página tenha sido desenvolvida de acordo com os padrões Web (Web Standards) e as recomendações de acessibilidade, os quais serão abordados ao longo deste documento. 1.2 Sobre as versões do eMAG O governo brasileiro, comprometido com a inclusão, buscou, através da elaboração do Modelo de acessibilidade do governo eletrônico, facilitar o acesso para todas as pessoas às informações e serviços disponibilizados nos sítios e portais do governo. O eMAG foi desenvolvido em 2004 baseado no estudo de 14 normas existentes em outros países acerca de acessibilidade digital. Dentre as normas analisadas estavam a Section 508 do governo dos Estados Unidos, os padrões CLF do Canadá, as diretrizes irlandesas de acessibilidade e documentos de outros países como Portugal e Espanha. Modelo de Acessibilidade em Governo Eletrônico eMAG 8 Também foi realizada uma análise detalhada das regras e pontos de verificação do órgão internacional WAI/W3C, presentes na WCAG 1.0. Assim, a primeira versão do eMAG, a 1.4, elaborada pelo Departamento de Governo Eletrônico em parceria com a ONG Acessibilidade Brasil, foi disponibilizada para consulta pública em 18 de janeiro de 2005, e a versão 2.0, com as alterações propostas, foi disponibilizada em 14 de dezembro do mesmo ano. Em 2007, a Portaria nº 3, de 7 de maio, institucionalizou o eMAG no âmbito do sistema de Administração dos Recursos de Informação e Informática ? SISP, tornando sua observância obrigatória nos sítios e portais do governo brasileiro. As versões 1.4 e 2.0 eram divididas em dois documentos: ?a visão do cidadão, voltada a todos os cidadão brasileiros e gestores, apresentava o modelo de acessibilidade de forma simples e tinha cerca de 16 páginas. ?a cartilha técnica, voltada a desenvolvedores de sítios, apresentava detalhadamente a proposta de implementação das recomendações de acessibilidade em sítios do governo, tinha 44 páginas com 57 recomendações de boas práticas e era voltada a área técnica. As recomendações estavam divididas em três níveis de prioridades de acordo com o WCAG 1.0. A divisão do eMAG em dois documentos apresentou alguns inconvenientes durante o processo de disseminação do Modelo, como a dificuldade das pessoas entenderem as áreas da Visão do Cidadão e seu relacionamento com a aplicação efetiva da acessibilidade. O aprendizado durante os seis anos da versão 2.0 do eMAG e o lançamento da versão 2.0 do WCAG em 2008 marcaram o caminho para a revisão do Modelo. A revisão do modelo 2.0, que resultou na versão 3.0, foi desenvolvida através da parceria entre o Departamento de Governo Eletrônico e o Projeto de Acessibilidade Virtual da RENAPI (Rede de Pesquisa e Inovação em Tecnologias Digitais). A elaboração da versão 3.0 foi embasada na versão anterior do eMAG, apoiando-se na WCAG 2.0, lançada em dezembro de 2008, e considerando as novas pesquisas na área de acessibilidade à Web, sendo a minuta enviada para consulta de 30 especialistas nas diversas áreas da acessibilidade e tipos de deficiência. Apesar de utilizar a WCAG como referência, e estar alinhado a esta, o eMAG 3.0 foi desenvolvido e pensado para as necessidades locais, visando atender as prioridades brasileiras. Seguindo a diretriz do programa de Governo Eletrônico de promover a Cidadania, o documento-proposta passou por Consulta Pública no período de novembro de 2010 a janeiro de 2011, recebendo contribuições tanto pelo sistema de Consulta Pública do Portal do Programa, quanto por e-mail. Em 21 de setembro de 2011, a versão 3.0 do eMAG foi lançada oficialmente no evento Acessibilidade Digital ? Um Direito de Todos. A versão 3.0 do eMAG unificou em apenas um documento o Modelo, retirando a separação entre visão técnica e visão do cidadão. Outra decisão foi o abandono dos Modelo de Acessibilidade em Governo Eletrônico eMAG 9 níveis de prioridade A, AA e AAA, visto que o padrão é voltado as páginas do Governo, não sendo permitido exceções com relação ao cumprimento das recomendações. Além disso, no eMAG 3.0 foi incluída a seção chamada ?Padronização de acessibilidade nas páginas do governo federal?, com o intuito de padronizar elementos de acessibilidade que devem existir em todos os sítios e portais do governo. 1.3 Alterações na versão 3.1 A versão 3.1 do eMAG apresenta melhorias no conteúdo do texto para torná-lo mais compreensível. O subitem O processo para desenvolver um sítio acessível, ganhou um capítulo próprio. O capítulo 4 teve sua terminologia alterada de ?Padrões de acessibilidade digital no Governo Federal? para ?Elementos padronizados de acessibilidade digital no Governo Federal?. A quantidade de itens também foi alterada, eram 7 e agora são 5, incluindo uma padronização para a primeira folha de contraste e removendo as funcionalidades aumentar e diminuir fonte da barra de acessibilidade, pois os navegadores de internet já possuem estas funcionalidades nativas e são conhecidas pela maioria dos usuários. Outros elementos foram removidos do capítulo como ?Apresentação de formulário?, ?Conteúdo alternativo para imagens? e ?Apresentação de documentos?, pois estes já são contemplados pelas 45 recomendações deste documento, o que causava redundância. As recomendações foram numeradas de acordo com as seções do eMAG, o que facilitará a manutenção das recomendações do modelo: 1.Marcação; 2.Comportamento (Document Object Model - DOM); 3.Conteúdo/Informação; 4.Apresentação/Design; 5.Multimídia; 6.Formulário. Outras modificações nas recomendações: ?Algumas recomendações tiveram seus enunciados refeitos com uma redação mais clara. ?A recomendação numero 5 foi movida para comportamento, sendo numerada como 2.1; ?A Recomendação 27 foi movida para sua sequencia lógica próxima sendo numerada como 3.2; ?A 31 mudou para marcação sendo numerada como 1.8. Modelo de Acessibilidade em Governo Eletrônico eMAG 10 Foram inseridos novos exemplos, inclusive com o uso de HTML5 e WAI-ARIA para determinadas recomendações. Por fim, os links de Recursos e Leitura complementar foram retirados para permitir alterações mais dinâmicas ao conteúdo, que pode ser consultado na página do eMAG no Portal do Programa de Governo Eletrônico: http://www.governoeletronico.gov.br/eixos-de-atuacao/governo/acessibilidade/emag- modelo-de-acessibilidade-em-governo-eletronico. 1.4 Legislação Estão listados os principais documentos, que fazem parte da legislação que norteia o processo de promoção da acessibilidade e a implementação do eMAG: 1.Comitê Brasileiro (CB-40) da Associação Brasileira de Normas Técnicas (ABNT), que se dedica à normatização no campo de acessibilidade, atendendo aos preceitos de desenho universal. O Comitê possui diversas comissões, definindo normas de acessibilidade em todos os níveis, desde o espaço físico até o virtual; 2.Lei Nº 10.098, de 19 de dezembro de 2000, que estabelece normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida, e dá outras providências. 3.Decreto número 5296, de 2 de dezembro de 2004, que regulamenta as leis n° 10.048, de 8 de novembro de 2000, que dá prioridade de atendimento às pessoas que especifica, e 10.098, de 19 de dezembro de 2000, que estabelece normas gerais e critérios básicos para a promoção da acessibilidade das pessoas com deficiência, e dá outras providências; 4.Portaria nº 3, de 7 de maio de 2007, que institucionalizou o eMAG no âmbito do sistema de Administração dos Recursos de Informação e Informática (SISP), tornando sua observância obrigatória nos sítios e portais do governo brasileiro. 5.Convenção Internacional sobre os Direitos das Pessoas com Deficiência (2007), de 30 de março de 2007, elaborada pela Nações Unidas, define, em seu artigo 9°, a obrigatoriedade de promoção do acesso de pessoas com deficiência a novos sistemas e tecnologias da informação e comunicação, inclusive à Internet. 6.Decreto n° 6949, de 25 de agosto de 2009, que promulga a Convenção Internacional sobre os Direitos das Pessoas com Deficiência, tornando-a um marco legal no Brasil. 7.Instrução Normativa MP/SLTI Nº04, de 12 de novembro de 2010, dispõe sobre o processo de contratação de Soluções de Tecnologia da Informação pelos órgãos integrantes do Sistema de Administração dos Recursos de Informação e Informática - SISP do Poder Executivo Federal. Modelo de Acessibilidade em Governo Eletrônico eMAG 11 8.Lei nº 12.527, de 18 de novembro de 2011 (Lei de Acesso à Informação), que no seu artigo 8º, parágrafo 3º, inciso VIII preconiza que: ?Os sítios de que trata o § 2º deverão, na forma de regulamento, atender, entre outros, aos seguintes requisitos: (?) adotar as medidas necessárias para garantir a acessibilidade de conteúdo para pessoas com deficiência?. 9.Decreto de nº 7724, de 16 de maio de 2012, que regulamentou a lei de acesso a informação, indica no seu artigo 8º parágrafo 3º: ?Os sítios na Internet dos órgãos e entidades deverão, em cumprimento às normas estabelecidas pelo Ministério do Planejamento, Orçamento e Gestão, (...)?. Modelo de Acessibilidade em Governo Eletrônico eMAG 12 2 . O processo para desenvolver um sítio acessível A acessibilidade à Web refere-se a garantir acesso facilitado a qualquer pessoa, independente das condições físicas, dos meios técnicos ou dispositivos utilizados. No entanto, ela depende de vários fatores, tanto de desenvolvimento quanto de interação com o conteúdo. O processo para desenvolver um sítio acessível é realizado em três passos: 1.Seguir os padrões Web; 2.Seguir as diretrizes ou recomendações de acessibilidade; 3.Realizar a avaliação de acessibilidade. 2.1 Primeiro passo: Padrões Web Para se criar um ambiente online efetivamente acessível é necessário, primeiramente, que o código esteja dentro dos padrões Web internacionais definidos pelo W3C. Os padrões de desenvolvimento Web do W3C, ou Web Standards, são um conjunto de recomendações que visam padronizar o conteúdo Web, possibilitando melhores práticas no desenvolvimento de páginas da Web. Uma página desenvolvida de acordo com os padrões Web deve estar em conformidade com as normas HTML, XML, XHTML e CSS, seguindo as regras de formatação sintática. Além disso, é muito importante que o código seja semanticamente correto, ou seja, que cada elemento seja utilizado de acordo com um significado apropriado, valor e propósito. A conformidade com os padrões Web permite que qualquer sistema de acesso à informação interprete a mesma adequadamente e da mesma forma, seja por meio de navegadores, leitores de tela, dispositivos móveis (celulares, tablets, etc.) ou agentes de software (mecanismos de busca ou ferramentas de captura de conteúdo). Páginas que não possuem um código de acordo com os padrões do W3C apresentam comportamento imprevisível, e na maioria das vezes impedem ou pelo menos dificultam o acesso. Para conhecer as boas práticas em desenvolvimento de sítios de acordo com os padrões veja a página do Escritório Brasileiro do W3C http://w3c.br/. A Cartilha de Codificação dos Padrões Web em Governo Eletrônico (ePWG), disponível em http://www.governoeletronico.gov.br/eixos-de-atuacao/governo/epwg-padroes-web- em-governo-eletronico/cartilha-de-codificacao, lista uma série de boas práticas. 2.2 Segundo passo: Recomendações de Acessibilidade As diretrizes ou recomendações de acessibilidade explicam como tornar o conteúdo Web acessível a todas as pessoas, destinando-se aos criadores de conteúdo Web (autores de páginas e criadores de sítios) e aos programadores de ferramentas para criação de conteúdo. A principal documentação nessa área é a WCAG ( Web Content Modelo de Acessibilidade em Governo Eletrônico eMAG 13 Accessibility Guidelines - http://www.w3.org/TR/#tr_Accessibility__All em inglês) atualmente em sua versão 2.0, desenvolvida pelo consórcio W3C a partir da criação do WAI (Web Accessibility Initiative), contendo as recomendações de acessibilidade para conteúdo Web. O WAI ainda desenvolveu especificações para aplicações web (Web Rica), ainda boa parte em status de 'rascunho? chamado WAI-ARIA ( Accessible Rich Internet Applications ? http://w3.org/standards/techs/aria#w3c_all), que busca resolver muitos dos problemas da camada de comportamento (DOM), sendo parte já implementada por alguns navegadores. Por fim, o eMAG é o documento que norteia o desenvolvimento de sítios e portais acessíveis no âmbito do governo federal. 2.3 Terceiro passo: Avaliação de Acessibilidade Após a construção do ambiente online de acordo com os padrões Web e as diretrizes de acessibilidade, é necessário testá-lo para garantir sua acessibilidade. No caso dos padrões Web, há validadores automáticos. No que diz respeito às diretrizes de acessibilidade, é necessário realizar, inicialmente, uma validação automática, que é realizada através de softwares ou serviços online que ajudam a determinar se um sítio respeitou ou não as recomendações de acessibilidade, gerando um relatório de erros. Uma das ferramentas que podem ser utilizadas é o ASES, avaliador e simulador de acessibilidade em sítios. É preciso salientar que, apesar de tornarem a avaliação de acessibilidade mais rápida e menos trabalhosa, os validadores automáticos por si só não determinam se um sítio está ou não acessível. Para uma avaliação efetiva, é necessária uma posterior validação manual. A validação manual é necessária porque nem todos os problemas de acessibilidade em um sítio são detectados mecanicamente pelos validadores. Para a validação manual, são utilizados checklists de validação humana. Deve-se lembrar que após cada teste, os ajustes devidos devem ser feitos e novamente testados. Assim, os passos sugeridos para a avaliação de acessibilidade em um sítio são os seguintes: 1.Validar os códigos do conteúdo HTML e das folhas de estilo ; 2.Verificar o fluxo de leitura da página. A forma mais simples é inibir o CSS, imagens e scripts, lendo apenas o HTML da página. Boa parte dos navegadores possuem ferramentas ou extensões que permitem essa visualização. Outra opção é utilizar navegadores textuais, como o Lynx ou um leitor de tela. Para maiores detalhes, ver documento Descrição dos Leitores de Tela, disponível Modelo de Acessibilidade em Governo Eletrônico eMAG 14 em: http://www.governoeletronico.gov.br/eixos-de- atuacao/governo/acessibilidade/material-de-apoio. 3.Realizar a validação automática de acessibilidade utilizando o ASES e outros avaliadores automáticos sugeridos no Capítulo 4; 4.Realizar a validação manual. A validação manual é uma etapa essencial na avaliação de acessibilidade de um sítio, já que os validadores automáticos não são capazes de detectar todos os problemas de acessibilidade em um sítio, pois muitos aspectos requerem um julgamento humano. Por exemplo, validadores automáticos conseguem detectar se o atributo para descrever imagens foi utilizado em todas as imagens do sítio, mas somente uma pessoa poderá verificar se a descrição da imagem está adequada ao seu conteúdo. Para realizar uma validação manual efetiva, o desenvolvedor deverá ter conhecimento sobre as diferentes tecnologias, as barreiras de acessibilidade enfrentadas por pessoas com deficiência e as técnicas ou recomendações de acessibilidade. A validação manual deve ser feita preferencialmente com dispositivos de tecnologia assistiva como leitores de tela. Deve-se percorrer toda página apenas utilizando teclado, verificando comportamentos, atalhos, folhas alternativas de contraste, se os textos alternativos estão descritos de acordo com a imagem e seu contexto, entre outros. Listas com os itens a serem testados (checklists) na validação humana podem ser encontradas em http://www.governoeletronico.gov.br/eixos-de- atuacao/governo/acessibilidade/material-de-apoio. 5.Teste com usuários reais. Outra etapa essencial da validação de uma página é a realização de testes com usuários reais (pessoas com deficiência ou limitações técnicas). Um usuário real poderá dizer se um sítio está realmente acessível, compreensível e com boa usabilidade e não simplesmente tecnicamente acessível. Quanto maior e mais diversificado o número de usuários reais participando da avaliação de acessibilidade, mais eficaz e robusto será o resultado. 2.4 Manutenção da acessibilidade A promoção da acessibilidade é um processo contínuo, recomenda-se que testes sejam realizados, de forma pontual, a cada alteração de conteúdo e validações globais em espaços determinados de tempo. O intervalo depende de diversos fatores, mas é altamente recomendável que se valide o sítio todo quando for feita a atualização do Sistema de Gestão de Conteúdo ou mudança de desenho. Recomenda-se, também, que constem informações sobre a acessibilidade do sítio (ver Capítulo 4 - Elementos padronizados de acessibilidade digital no Governo Federal), incluindo formas de contato em caso de dificuldade de acesso . Modelo de Acessibilidade em Governo Eletrônico eMAG 15 2.5 Recursos, ferramentas e leitura complementar Na página http://www.governoeletronico.gov.br/eixos-de- atuacao/governo/acessibilidade/emag-modelo-de-acessibilidade-em-governo- eletronico é possível encontrar ferramentas, aplicativos, cursos, tutoriais e links para outros sites que auxiliam a implementação da acessibilidade. Modelo de Acessibilidade em Governo Eletrônico eMAG 16 3 . Recomendações de acessibilidade Os padrões de acessibilidade compreendem recomendações ou diretrizes que visam tornar o conteúdo Web acessível a todas as pessoas, inclusive às pessoas com deficiência, destinando-se aos autores de páginas, projetistas de sítios e aos desenvolvedores de ferramentas para criação de conteúdo. A observação destes padrões também facilita o acesso ao conteúdo da Web, independente da ferramenta utilizada (navegadores Web para computadores de mesa, laptops, telefones celulares, ou navegador por voz) e de certas limitações de ordem técnicas, como, por exemplo, uma conexão lenta, a falta de recursos de mídia, etc. Para facilitar a implementação das recomendações, no eMAG elas são separadas por seções de acordo com as necessidades de implementação: 1.Marcação; 2.Comportamento (Document Object Model - DOM); 3.Conteúdo/Informação; 4.Apresentação/Design; 5.Multimídia; 6.Formulário. No eMAG, diferente da WCAG internacional, as recomendações de acessibilidade deste documento não estão divididas por níveis de prioridade e sim por área. Por se tratar de recomendações para páginas de governo, todas as recomendações necessárias para determinada situação devem ser seguidas. Assim, se a página é a área de contato, as recomendações de formulário (além das de marcação, conteúdo, etc) devem ser seguidas, se apresentar vídeo, atenção especial deve ser dada as recomendações de multimídia. 3.1 Marcação Recomendação 1.1 ? Respeitar os Padrões Web Ver WCAG 2.0 Critérios de Sucesso 4.1.1 e 4.1.2 Os Padrões Web são recomendações do W3C (World Wide Web Consortium), as quais são destinadas a orientar os desenvolvedores para o uso de boas práticas que tornam a web acessível para todos, permitindo assim que os desenvolvedores criem experiências ricas, alimentadas por um vasto armazenamento de dados, os quais estão disponíveis para qualquer dispositivo e compatíveis com atuais e futuros agentes de usuário (ex: navegadores). Modelo de Acessibilidade em Governo Eletrônico eMAG 17 Quando tratamos de acessibilidade as principais recomendações são as de Web Design e Aplicações (http://www.w3c.br/Padroes/WebDesignAplicacoes ), que referem-se aos padrões para o desenvolvimento de páginas Web, incluindo HTML5 CSS, SVG, Ajax, e outras tecnologias para Aplicações Web (WebApps), assim como o padrão internacional de acessibilidade WCAG, internacionalização e dispositivos móveis. Outro ponto importante no respeito aos Padrões Web é a separação de camadas. As camadas lógicas deverão ser separadas, de acordo com o objetivo para o qual elas foram desenvolvidas. Assim, para a camada de conteúdo devem ser utilizadas as linguagens de marcação, como HTML e xHTML. Para a camada de apresentação visual do conteúdo, utilizam-se as folhas de estilo css em qualquer uma de suas versões. Já para a camada que modifica o comportamento dos elementos, são utilizadas linguagens javascript e modelos de objeto (dom). Modelo de Acessibilidade em Governo Eletrônico eMAG 18 Para mais detalhes a respeito dos padrões de desenvolvimento web, ver a Cartilha de Codificação Padrões Web e-GOV do padrão e-PWG, disponível em: http://www.governoeletronico.gov.br/eixos-de-atuacao/governo/epwg-padroes-web- em-governo-eletronico/cartilha-de-codificacao. Recomendação 1.2 ? Organizar o código HTML de forma lógica e semântica Ver WCAG 2.0 Critério de Sucesso 1.3.1 O código HTML deve ser organizado de forma lógica e semântica, ou seja, apresentando os elementos em uma ordem compreensível e correspondendo ao conteúdo desejado. Cada elemento HTML deve ser utilizado para o fim que ele foi criado. Assim, marcação semântica adequada deve ser utilizada para designar os cabeçalhos (h1, h2, h3), as listas (ul, ol, dl), texto enfatizado (strong), marcação de código (code), marcação de abreviaturas (abbr), marcação de citações longas (blockquote), etc. Dessa forma, as páginas poderão ser apresentadas e compreendidas sem recursos de estilização, tal como as folhas de estilo. Além disso, o código semanticamente correto é muito importante para usuários com deficiência visual, pois os leitores de tela descrevem primeiro o tipo de elemento e depois realizam a leitura do conteúdo que está dentro desse elemento.

Web Semântica

O poder da web está em sua universalidade. Ser acessada por todos, independente de deficiência, é um aspecto essencial.

Tim Berners Lee

Exemplo correto

Padrões Web

Web Semântica

O poder da web está em sua universalidade. Ser acessada por todos, independente de deficiência, é um aspecto essencial.
Tim Berners Lee Exemplo correto em HTML5 (utilizando ARIA)

Padrões Web

Web Semântica

O poder da web está em sua universalidade. Ser acessada por todos, independente de deficiência, é um aspecto essencial.
Tim Berners Lee
Recomendação 1.3 ? Utilizar corretamente os níveis de cabeçalho Ver WCAG 2.0 Critérios de Sucesso 1.3.1 e 2.4.10 Os níveis de cabeçalho (elementos HTML H1 a H6) devem ser utilizados de forma hierárquica, pois organizam a ordem de importância e subordinação dos conteúdos, facilitando a leitura e compreensão. Além disso, muitos leitores de tela utilizam a hierarquia de cabeçalhos como uma forma de navegação na página, pulando de um para outro, agilizando, assim, a navegação. Conceitualmente, existem seis níveis de títulos, sendo o H1 o mais alto, ou seja, deverá corresponder ao conteúdo principal da página, assim é recomendável que toda página tenha apenas um H1. Já os níveis do Modelo de Acessibilidade em Governo Eletrônico eMAG 20 H2 ao H6 poderão ser utilizados mais de uma vez na página, mas sem excesso e com lógica textual, obedecendo uma hierarquia. Para compreender melhor os níveis de título pode-se tomar como exemplo um sítio de um livro, onde o nome do livro é o H1, os capítulos são H2, os subcapítulos são H3 e assim por diante. Exemplo HTML

Técnicas culinárias

A seguir os segredos que facilitam a vida na cozinha.

Legumes, folhas e vegetais

Baba do quiabo

Para eliminar a baba do quiabo, lave-o ainda inteiro, seque-o e coloque-o numa tigela com um pouco de suco de limão, deixando repousar durante 15 minutos. Depois lave ligeiramente, corte e cozinhe.

Feijão

1 xícara de feijão cru serve trás pessoas depois de pronto.

Cenouras e aipos

Para resolver o problema de cenouras e aipos meio murchos, mergulhe-os em água gelada misturada com uma colher de chá de mel por uma hora. Escorra e Modelo de Acessibilidade em Governo Eletrônico eMAG 21 Figura 2: Exemplo de utilização de cabeçalhos seque levemente depois.

Congelamento e descongelamento

Carne em pedaços

Para descongelar carne em pedaços inteiros coloque?a embrulhada, numa vasilha com água. Coloque sal na água e no pacote e tampe por uma hora.

Carne moída

Para apressar o descongelamento da carne moída, salgue a quantidade que irá usar. O sal apressa o descongelamento.

Exemplo de marcação adequada de cabeçalhos Recomendação 1.4 ? Ordenar de forma lógica e intuitiva a leitura e tabulação Ver WCAG 2.0 Critérios de Sucesso 1.3.2 e 2.4.3 Deve-se criar o código HTML com uma sequência lógica de leitura para percorrer links, controles de formulários e objetos. Essa sequência é determinada pela ordem que se encontra no código HTML. É recomendável disponibilizar o bloco do conteúdo principal da página antes do bloco de menu. Isso facilita o acesso por quem navega via teclado, permitindo um acesso mais ágil, sem a necessidade de navegar por todos os itens de menu antes de chegar ao conteúdo. Apesar de atalhos (como links e teclas) auxiliarem nesse sentido, alguns Modelo de Acessibilidade em Governo Eletrônico eMAG 22 Figura 3: Portal Brasil - Ordem de cabeçahos e outros elementos semânticos. usuários não sabem e podem ser de difícil utilização para pessoas com deficiência motora. Algumas das formas não funcionam em interfaces mais simples, como o WebVox do DOSVOX. Lembrando que ao utilizar CSS, visualmente, os blocos de menu e conteúdo podem ser dispostos em qualquer local da página. Exemplo: bloco de conteúdo antes do bloco de menu
...
OBS: Em alguns casos, pode-se forçar a navegação via atributo tabindex. No entanto, se houver a necessidade de utilizar o tabindex, o mesmo deverá ser utilizado com a semântica correta e ser verificado manualmente se o fluxo fornecido é realmente o desejado. O uso do tabindex pode resultar em uma ordem e tabulação inconsistente. Recomendação 1.5 ? Fornecer âncoras para ir direto a um bloco de conteúdo Ver WCAG 2.0 Critério de Sucesso 2.4.1 Devem ser fornecidas âncoras, disponíveis na barra de acessibilidade, que apontem para links relevantes presentes na mesma página. Assim, é possível ir ao bloco de conteúdo desejado. Os links devem ser colocados em lugares estratégicos da página, como no início e fim do conteúdo e início de fim do menu. É importante ressaltar que o primeiro link da página deve ser o de ir para o conteúdo. Para facilitar a utilização das âncoras, podem ser disponibilizados atalhos por teclado, utilizando o atributo accesskey nos links relevantes. Não pode haver repetição do mesmo accesskey em uma página. Para o governo federal são recomendados atalhos para o menu principal, para o conteúdo e para a caixa de pesquisa. Maiores detalhes a esse respeito podem ser encontrados no capítulo 3 ? Elementos de acessibilidade nas páginas do Governo Federal. Devem ser utilizados ambos os atributos name e id para que as âncoras funcionem em todos os navegadores e tecnologias assistivas, tanto textuais quanto gráficos, já que há os que suportam ambos os atributos e os que suportam apenas um deles. Os links indicadores de início e fim de conteúdo e início e fim de menu podem estar ocultos na página utilizando folhas de estilo. No entanto, é necessário tomar o cuidado de ocultá-los de forma que eles continuem acessíveis aos leitores de tela. Os mecanismos para ocultar elementos e seus efeitos na acessibilidade são os seguintes: Modelo de Acessibilidade em Governo Eletrônico eMAG 23 CSS Efeito na tela Efeito na acessibilidade visibility:hidden; O elemento fica oculto, mas continua a ocupar o espaço que normalmente ocuparia O conteúdo é ignorado pelos leitores de tela display:none; O elemento fica oculto e não ocupa espaço O conteúdo é ignorado pelos leitores de tela height: 0; width: 0; overflow: hidden; O elemento fica oculto e não ocupa espaço O conteúdo é ignorado pelos leitores de tela text-indent: -999em; O conteúdo é movido para ?fora da tela?, não sendo mais visível, mas links podem ser focalizados de maneira imprevisível Os leitores de tela acessam o conteúdo, mas somente texto e elementos inline position: absolute; left: -999em; O conteúdo é removido de sua posição, não ocupando espaço e é movido para ?fora da tela?, ficando oculto Os leitores de tela acessam o conteúdo Tabela 1: Atributos em CSS para ocultar elementos de acessibilidade Exemplo Topo da Página (na barra de acessibilidade) Conteúdo da Página
Início do conteúdo
Formulário de pesquisa do sítio (pode estar em qualquer lugar no sítio)
Buscar
Recomendação 1.6 ? Não utilizar tabelas para diagramação Ver WCAG 2.0 Critério de Sucesso 1.3.1 (Técnica H51) As tabelas devem ser utilizadas apenas para dados tabulares e não para efeitos de disposição dos elementos na página. Para este fim, utilize as folhas de estilo. Exemplo incorreto - Utilização de tabela para leiaute ? Modelo de Acessibilidade em Governo Eletrônico eMAG 25

Exemplo com tabela
Exemplo correto ? Utilização de tableless para diagramação ...

Exemplo sem tabelas!

Recomendação 1.7 ? Separar links adjacentes Ver WCAG 2.0 Critério de Sucesso 1.3.1 (Técnica H48) Links adjacentes devem ser separados por mais do que simples espaços, para que não fiquem confusos, em especial para usuários que utilizam leitor de tela. Para isso, é recomendado o uso de listas, onde cada elemento dentro da lista é um link. As listas podem ser estilizadas visualmente com CSS para que os itens sejam mostrados da maneira desejada, como um ao lado do outro. Caso os links estejam no meio de um parágrafo de conteúdo texto, pode-se utilizar vírgulas, parênteses, colchetes, pipe, entre outros, para fazer a separação. Exemplo incorreto Modelo de Acessibilidade em Governo Eletrônico eMAG 26 Exemplo correto

Exemplo com tabela

Modelo de Acessibilidade em Governo Eletrônico eMAG 27

Recomendação 1.8 ? Dividir as áreas de informação Ver WCAG 2.0 Critério de Sucesso 3.2.3 (Técnica G61) Áreas de informação devem ser divididas em grupos fáceis de gerenciar. As divisões mais comuns são ?topo?, ?conteúdo?, ?menu? e ?rodapé?. Nas páginas internas deve-se manter uma mesma divisão para que o usuário se familiarize mais rapidamente com a estrutura do sítio. É importante destacar, entretanto, que a página inicial pode ter uma divisão diferente das páginas internas, pois normalmente ela contém mais elementos. O exemplo a seguir mostra a divisão da página inicial de um sítio contendo os blocos ?topo?, ?menu?, ?conteúdo? e ?rodapé?, além da barra de acessibilidade contendo os atalhos. Exemplo
Topo

NOME DA INSTITUIÇÃO

Modelo de Acessibilidade em Governo Eletrônico eMAG 28 Figura 4: Exemplo de divisão de blocos de conteúdo

Barra de Acessibilidade

Conteúdo
Buscar

BEM VINDO

Seja bem vindo ao nosso site.

Rodapé
Rua XXX
A divisão em blocos de conteúdo representa a base para a utilização dos atalhos, permitindo que o usuário tenha rápido acesso à área desejada. Para mais detalhes sobre a barra de acessibilidade e os atalhos, ver capítulo 4 ? Elementos padronizados de acessibilidade digital no Governo Federal. É importante que as diversas páginas de um sítio possuam um estilo de apresentação coerente e sistemático, mantendo-se um padrão de estrutura. Assim, elementos principais de navegação deverão ser mantidos na mesma posição em todas as páginas, com exceção da página inicial que, muitas vezes, apresenta uma estrutura diferenciada. Exemplo Um sítio possui um logotipo, um título, um formulário de pesquisa e uma barra de navegação. Esses elementos aparecem na mesma ordem relativa em cada página do sítio em que se repetem. Em uma das páginas, não há o formulário de pesquisa, mas o restante dos itens continua na mesma ordem. Em HTML5 e ARIA As elementos estruturais do HTML HEADER, NAV, SECTION, ARTICLE, ASIDE e FOOTER já são interpretadas pela maioria dos leitores de tela. No entanto, é importante utilizar os landmarks roles de ARIA associados a elas, para garantir que todos os recursos de tecnologia assistiva realizem a interpretação da informação. Apesar de a informação ficar duplicada, os leitores de tela que reconhecem o HTML5 darão preferência ao HTML e, dessa forma, não irão ler duas vezes a mesma informação. Modelo de Acessibilidade em Governo Eletrônico eMAG 29 Exemplos de elementos estruturais no HTML5: ?
Contém informações introdutórias para uma página ou para uma seção dela. ?