![]() |
Created by Raphael Luiz Fonseca
over 10 years ago
|
|
◦ Conjunto de recomendações a ser considerado para que o processo de acessibilidade dos sítios e portais do governo brasileiro seja conduzido de forma padronizada e de fácil implementação.
◦ Tornar o conteúdo web acessível a todas as pessoas, inclusive às com deficiência
◦ Assegurar as todos os interessados o acesso a informação.
◦ Independente de suas capacidades físico-motoras.
◦ Seguir os padrões Web
◦ Seguir as diretrizes ou recomendações de acessibilidade
◦ Realizar a avaliação de acessibilidade
◦ Código deve estar dentro dos padrões Web internacionais definidos pelo W3C.
◦ Em conformidade com as normas HTML, XML, XHTML e CSS.
◦ Seguindo as regras de formatação sintática.
◦ Semântica também é muito importante cada elemento deve ser utilizado de acordo com um significado apropriado, valor e propósito.
◦ Permite interpretação uniforme seja por meio de navegadores, leitores de tela,
dispositivos móveis ou agentes de software.
◦ Destinadas 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.
◦ WCAG é um dos principais documentos na área de acessibilidade, no âmbito mundial.
◦ WCAG é uma iniciativa do WAI / W3C
◦ No âmbito nacional, o e-MAG é que norteia o desenvolvimento de sítios acessíveis.
◦ Após a construção é necessário testar para garantir a acessibilidade do site.
◦ Teste de padrões Web.
◦ Validador automático do próprio W3C.
◦ Teste das diretrizes de acessibilidade.
◦ Validação automática através de softwares ou serviços online.
◦ Ajudam a verificar se um sítio respeitou ou não as recomendações de acessibilidade.
◦ Gerando um relatório de erros.
◦ Um dos validadores é o ASES
◦ Respeitar os padrões de desenvolvimento web.
◦ Padrões Web do W3C
◦ maximizar a compatibilidade com os agentes de usuário.
◦ Declarar o DOCTYPE
◦ define qual versão do (X)HTML o documento está usando.
◦ Permite que ferramentas de validação analisem o código da página e indiquem correções.
◦ Não é permitido usar o DOCTYPE Frameset.
◦ Separar as camadas lógicas, Conteúdo (HTML), apresentação (CSS) e comportamento (Javascript e DOM)
◦ elementos em uma ordem compreensível
◦ correspondendo ao conteúdo desejado
◦ 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.
◦ Permite compreensão das páginas mesmo sem folhas de estilo
◦ Leitores de telas descrevem primeiro o tipo de elemento
e depois realizam a leitura do conteúdo que está dentro desse elemento
◦ Facilitar a leitura e compreensão
◦ Leitores de tela podem navegar através dos cabeçalhos
◦ Existem seis níveis de títulos
h1 é o mais alto: título principal da página
cada página deve ter apenas um h1
h1 pode ser substituído por uma imagem, mas deverá permanecer com seu conteúdo, mesmo que não visualmente, permitindo a leitura pelo leitor de tela
Do h2 ao h6: podem ser utilizados várias vezes, mas sem excesso e com lógica textual.
Sequência lógica de leitura: para percorrer links, controles de formulários e objetos
◦ Determinada pela ordem que se encontra no código HTML.
◦ Disponibilizar o bloco de conteúdo no HTML antes do bloco de menu
usuários navegando pelo teclado não vão precisar navegar por todos os itens de menu antes de chegar ao conteúdo.
◦ Utilizar <tabindex> somente quando necessário. Verificar manualmente se o fluxo está correto
◦ Funções javascript deverão estar disponíveis pelo teclado também
◦ Foco não deve ficar bloqueado ou fixado em um elemento da página. Possibilitar mover-se pelo teclado entre os elementos
◦ Âncoras na barra de acessibilidade: apontando para links relevantes (da mesma página)
◦ Links em lugares estratégicos. Ex: início e final do menu, do conteúdo, etc.
◦ <accesskey> nos links relevantes: permite atalhos por teclado
◦ Tabelas: apenas para dados tabulares
◦ para efeitos de disposição dos elementos, utilizar folhas de estilo
Linksadjacentesnãousarapenasespaços para separar
◦ Usuários com leitores de tela podem ficar confusos . Recomendado o uso de listas
◦ cada elemento dentro da lista é um link, Linksdentrodotexto: utilizarvírgulas, parênteses, colchetes, etc., para fazer a separação.
Instâncias: novas abas ou janelas
Usuário é que deve solicitar novas instâncias
Não devem ser utilizados:
◦ Pop-ups
◦ Abertura de novas abas ou janelas
◦ Uso do atributo target="_blank"
◦ Mudanças no controle do foco do teclado
◦ Entre outras, que não tenham sido solicitadas pelo usuário
Objetos programáveisScripts, Flash, conteúdos dinâmicos e outros
◦ Se não for possível que o elemento programável seja diretamente acessível
Fornecer uma alternativa em HTML para o conteúdo.
◦ Garantir acesso aos recursos de tecnologia assistiva
e navegação por teclado
◦ <noscript>: alternativa para script da Web
mostrar conteúdos em navegadores que não suportam scripts ou que tenham o script desabilitado.
Não utilizar a meta tag refresh
nem outra forma de atualização automática.
◦ Podem confundir e desorientar os usuários
especialmente usuários que utilizam leitores de tela
◦ Se limite de tempo absolutamente for necessário, informar ao usuário sobre atualização automática
◦ Exemplo: Num Webmail, pode-se fornecer um botão ou link para buscar novos e-mails recebidos
Ao invés de atualizar automaticamente
◦ Não utilizar marcações para redirecionar para uma nova página, como a meta tag refresh
◦ Redirecionamento deve ficar claro para o usuário
◦ Em uma página onde há limite de tempo para realizar uma tarefa deve haver a opção de desligar, ajustar ou prolongar esse limite
◦ Essa recomendação não se aplica a eventos em que o limite de tempo é absolutamente necessário
◦ Exemplo: Inserção de dados em um formulário. O cidadão deve ter tanto tempo quanto for necessário
para o preenchimento de seus dados
◦ Não utilizar efeitos visuais piscantes, intermitentes ou cintilantes
◦ Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataque epilético
◦ Aplica-se também para propaganda de terceiros inserida na página.
◦ Não devem ser disparadas automaticamente:
Conteúdos que “se movem”, rolagens, movimentações
em geral ou animações
◦ Usuário deve ter o controle dessas movimentações
mesmo em propagandas na página.
◦ Formas de controle:
escolha de preferência de visualização da página
parar e reiniciar conteúdos que se movem (TODOS)
Controle da velocidade dos movimentos
outros métodos acessíveis a usuários com deficiência
◦ HTML: atributo lang
◦ XHTML: xml:lang.
Oferecer um título descritivo e informativo à página
◦ Leitor de tela lerá primeiro o título
◦ Utilizar tag <title>
◦ Exemplo:
Você está em: Página inicial > Ensino > Editais
◦ Permite ao usuário orientar-se dentro de um conjunto de páginas
permitindo que ele saiba onde está no momento.
◦ Recurso “migalha de pão” (breadcrumbs)
links navegáveis em forma de lista hierárquica
permitem que o usuário saiba qual o caminho percorrido até chegar à página em que se encontra no momento.
◦ identificar claramente o destino de cada link
◦ Informar se o link remete a outro sítio.
◦ Texto do link deve fazer sentido mesmo quando
isolado do contexto da página.
◦ Evitar links do tipo “clique aqui” ou “Veja mais”
expressão não faz sentido fora do contexto
Pior para usuários de leitores de tela, que navegam por
links
◦ fornecer informações adicionais sobre um link no próprio texto do link
◦ Fornecer uma descrição para as imagens da página
atributo alt
◦ Imagens decorativas (que não transmitem conteúdo) devem ser inseridas por CSS
◦ Descrição deve ser adaptada ao contexto em que a imagem se encontra
◦ alt é utilizado para descrições sintéticas
◦ Para imagens mais complexas (ex: gráficos)
descrição no próprio contexto
ou um link para a descrição longa após a imagem
◦ Mapas de imagem do lado do cliente: descrições para cada uma das zonas ativas
ou seja, para cada um dos links que receberá o foco através do atributo alt
◦ Documentos preferencialmente em HTML
◦ Arquivos para download , em formato ODF
◦ Se um arquivo for disponibilizado em PDF
Fornecer alternativa em HTML ou ODF
Necessário também informar a extensão e o tamanho
do arquivo no próprio texto do link
◦ Definir título com o elemento <caption>
◦ Deve ser o primeiro elemento após a declaração do
elemento <table>
◦ Em casos de tabelas extensas
Fornecer resumo de seus dados através do atributo summary
◦ Tabelas de dados simples: <th> para os cabeçalhos e <td> para as células de dados
◦ Agrupar as linhas de cabeçalhos, do corpo e do final. <thead> <tbody> <tfoot>
◦ W3C sugere utilizar o tfoot antes do tbody: para que o agente de usuário possa renderizar o rodapé
antes de receber todas linha de dados.
◦ Texto de um sítio deve ser de fácil leitura e compreensão
◦ Não deve exigir do usuário um nível de instrução mais avançado do que o ensino fundamental completo.
◦ Quando o texto exigir uma capacidade de leitura mais avançada, deve ser disponibilizado informações suplementares que expliquem ou ilustrem conteúdo principal
Outra alternativa é versão simplificada do texto
◦ Evitar o uso de jargão, expressões regionais ou termos especializados que possam não ser claros para todos;
◦ Desenvolver apenas um tópico por parágrafo;
◦ Dividir sentenças longas em sentenças mais curtas;
◦ Utilizar palavras comuns no lugar de outras pouco familiares;
◦ Utilizar listas de itens ao invés de uma longa série de palavras ou frases separadas por vírgulas;
◦ Utilizar, preferencialmente, a voz ativa.
Disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns
◦ Utilizar a tag <abbr
Informar mudança de idioma no conteúdo
◦ Identificar com o atributo lang
◦ Não se aplica para nomes próprios ou termos técnicos que sejam compreendidos no contexto
◦ Possibilitar visualização por pessoas com baixa visão, com cromodeficiências ou que utilizam monitores de vídeo monocromático.
◦ Não utilizar imagens atrás do texto (background), dificultam a leitura e desviam a atenção do usuário
◦ Relação de contraste mínima: 4,5 : 1
◦ Existem ferramentas gratuitas que verificam
contraste
Capítulo 4 do documento e-MAG
Não utilizar apenas cor ou outras características sensoriais para diferenciar elementos
◦ Características sensoriais cor, forma, tamanho, localização visual, orientação ou som
não devem ser utilizadas como o único meio para transmitir informações, indicar uma ação, pedir uma resposta ao usuário ou distinguir um elemento visual.
- O texto não pode perder a funcionalidade
- A página deve continuar legível e funcional quando redimensionada para até 200%
Garantir que não ocorram sobreposições de texto, nem o aparecimento de uma barra horizontal
◦ Dividir em grupos fáceis de gerenciar
◦ Exemplo comum: “topo”, “conteúdo”, “menu” e “rodapé”
◦ Manter mesma divisão nas páginas internas, Para que usuário se familiarize mais rapidamente
Página inicial pode ter uma divisão diferente das páginas internas
contém mais elementos
Possibilitar que o elemento com foco seja visualmente evidente
◦ A área que recebe o foco pelo teclado deve ser claramente marcada, devendo a área de seleção ser passível de ser clicada.
◦ Por padrão, links e elementos de formulário já apresentam a borda destacada ao receberem o foco do teclado.
◦ Fornecer alternativa sonora, ou textual para vídeos que não incluem áudio
◦ Fornecer legendas para vídeos com áudio falado e no idioma natural da página
◦ Desejável que os vídeos com áudio apresentem alternativa na Língua Brasileira de Sinais (Libras)
◦ Vídeos que transmitem conteúdo visual que não está disponível na faixa de áudio devem possuir uma audiodescrição.
◦ Audiodescrição: descrição clara e objetiva de todas as informações apresentadas de forma visual e que não fazem parte dos diálogos
◦ Exemplo:
Vídeo de um malabarista: narrador da audiodescrição descreve o número e o tipo de instrumentos que o malabarista utiliza, bem como as reações do público
◦ Mecanismo para parar, pausar, silenciar ou ajustar o volume de qualquer som que se reproduza na página
◦ Mecanismos para que o usuário possa pausar, parar ou ocultar tal animação, para qualquer animação que inicie automaticamente
Fornecer alternativa em texto para os botões de imagem de formulários
◦ Botões do tipo imagem (input type=”image”), que servem para o mesmo propósito do botão do tipo submit
◦ Fornecer descrição textual para o botão , atributo alt
As etiquetas de texto (label) devem estar associadas aos seus campos (input) correspondentes no formulário
Atributos
for do label
id do input
Devem ter o mesmo valor
◦ Distribuir corretamente os elementos do formulário através do código HTML, Para criar uma sequência lógica de navegação
◦ Formulários devem primeiro ser codificados considerando a ordem lógica de navegação para depois serem organizados visualmente via CSS.
◦ Utilizar atributo tabindex somente quando existir real necessidade.
Não provocar automaticamente alteração no contexto
◦ Quando um elemento de formulário receber o foco, não deve ser iniciada uma mudança automática na página que confunda ou desoriente o usuário.
◦ Mudanças devem ocorrer somente quando for acionado um botão
◦ Fornecer instruções de preenchimento juntamente com as etiquetas (label)
◦ A utilização de caracteres pré-definidos em áreas
O texto for incluído após a entrada de dados pelo usuário
de entrada de texto só deve ocorrer se:
Ex: sugerir um outro login, caso o escolhido já exista
A semântica do documento justifique a inclusão de texto pré-definido
Ex: loja virtual que só vende para determinado país
Caracteres fornecidos previamente pelo usuário. Ex: refinamento de busca
Quando um erro de entrada de dados for automaticamente detectado, o item que apresenta erro deve ser identificado e descrito ao usuário por texto
◦ Agrupar os controles de formulário relacionados
utilizando-se o elemento <fieldset>
Para cada <fieldset>, fornecer uma legenda <legend>
◦ CAPTCHAteste interativo humano, completamente automatizado, para distinguir computadores de seres humanos
◦ Deve ser feito em forma de pergunta de interpretação (quando utilizado)
◦ MAS a pergunta não deve ser de difícil resolução
Perguntas de senso comum ou testes matemáticos
“qual é a cor do céu?” ou “o fogo é quente ou frio?”
Cuidado para os testes matemáticos não serem facilmente quebráveis por programas de computador
Apresenta os recursos de acessibilidade presentes no sítio
◦ Ex: teclas de atalho, opções de redimensionamento de texto e alto contraste, detalhes sobre testes de acessibilidade realizados no sítio
◦ Link deve estar na barra de acessibilidade
◦ permitir que usuário vá diretamente a esses pontos
◦ Os atalhos deverão funcionar através de números
precedidos da tecla padrão de cada navegador
◦ Atalhos obrigatórios:
para ir ao conteúdo
para ir ao menu principal
para ir à caixa de pesquisa
◦ Dicas dos atalhos: na barra de acessibilidade e na página sobre a acessibilidade do sítio
- No topo de cada página
Contendo os seguintes itens:
◦ Aumentar fonte
◦ Diminuir fonte
◦ Fonte normal
◦ Alto contraste
◦ Atalhos (para Menu, Conteúdo e Busca)
◦ Acessibilidade (link para a página contendo os recursos de acessibilidade do sítio)
◦ Para sítios que contenham páginas internas que não estão presentes no menu
◦ em forma de lista
podendo conter quantos
níveis forem necessários
Sempre utilizar a tag <form>
Elementos do formulário na ordem correta sem utilizar o <tabindex>
Associar as etiquetas (label) aos seus campos
Identificar e descrever os erros de entrada de dados do usuário
Agrupar conjuntos de informações para entrada de dados, <fieldset> e <legend>
fornecer uma maneira de o usuário poder
verificar as informações antes que elas sejam enviadas (input) correspondentes
Não deve ocorrer mudança no contexto quando um elemento receber o foco
Fornecer botão de envio (submit) para enviar os dados
Fornecer alternativa textual: atributo alt
◦ para imagens, fotos, gráficos, banners, botões de imagem, áreas ativas de mapa de imagem, CAPTCHA, etc
Para imagens mais complexas
◦ descrição mais detalhada
◦ fornecer também uma descrição longa no próprio contexto ou em um link (claramente identificado como descrição da imagem) logo após a imagem
◦ Preferencialmente em HTML
◦ Podem ser disponibilizados para download em ODF, tomando-se os cuidados para que sejam acessíveis.
◦ Se houver necessidade de disponibilizar arquivos em PDF, fornecer alternativa em HTML ou ODF
◦ Informar a extensão e o tamanho do arquivo no
próprio texto do link
Tabelas para fins de diagramação (Rec. 7)
Atualizações automáticas periódicas (Rec. 11)
Situações com intermitência de tela (Rec. 14)
Elementos considerados depreciados
◦ frame, applet, blink, marquee, basefont, center, dir,
align, font, isindex, menu, strike, u, etc.
◦ Departamento de Governo Eletrônico, Faz parte da SLTI / MPOG
◦ órgãos integrantes do SISP
◦ Isto é, órgãos/entidades do poder executivo federal, pertencentes à administração direta, autárquica e fundacional
Baseadas em HTML 4.0 e XHTML 1.1
1. Seguir os padrões web (W3C)
2. Seguir as diretrizes/recomendações de acessibilidade
3. Avaliar acessibilidade
◦ Marcação
◦ Comportamento (DOM)
◦ Conteúdo/Informação
◦ Apresentação/Design
◦ Multimídia
◦ Formulário