Acessibilidade Web: Introdução e recomendações da e-MAG

Acessibilidade WebAcessibilidade Web
Introdução à Acessibilidade na Web e às
recomendações do e-MAG

O que é Acessibilidade Web?
● Remover obstáculos
– Promover o acesso igualitário à informação
– Dar autonomia às pessoas

#1 - portadores de deficiência
●
Visual ou membros
superiores.
– Sem mouse
●
Membros superiores
– Sem teclado
● Auditiva
– Sem áudio

#2 – pessoas com outras limitações
● Idosos
● Problemas de
memória
● Baixa escolaridade
● Pouca experiência
com computador
● Etc.

#3 - o resto da população
Sites acessíveis a
deficientes são mais fáceis
de serem usados por
usuários sem deficiência.

Tecnologias Assistivas
● Leitor de telas
● Comandos de voz
● Lupas
●
Monitor Braille

Vamos ver um vídeo!
Acesso Digital - Acessibilidade Web: Custo ou Benefício?
https://www.youtube.com/watch?v=eP5V8pGOVEo

Processo de Acessibilidade
Quem se envolve no processo?
● Gestores (tomada de decisão)
● Desenvolvedores
●
Gestores de Conteúdo

Processo de Acessibilidade
Passos:
1) Seguir os padrões Web
2) Seguir as recomendações de acessibilidade
2.1) Inclusive na escolha de ferramentas
3) Realizar validações

Guias / Normas
● WCAG – Web Accessibility Content Guideline
● Section 508 (EUA)
● e-MAG – Modelo de Acessibilidade do Governo
Eletrônico (Brasil)
● Outras

WCAG
●
Padrão internacional
●
São 4 princípios,
contendo 60 “Critérios
de Sucesso”
● Adoção gradual em 3
níveis (A, AA, AAA)

e-MAG
●
Adaptação de outras
normas
●
Obrigatória nos sites
do governo brasileiro
●
Não possui níveis de
conformidade

Recomendações da e-MAG
Seções
● Marcação
● Comportamento
●
Conteúdo/Informação
●
Apresentação/Design
●
Multimídia
●
Formulário

Funções do site via teclado
● Ordenar o conteúdo para facilitar a tabulação
● Cuidado com scripts
– onclick(), onmouseover(), onmouseout()
●
Prover atalhos
– Pular para conteúdo, menu, busca

Respeitar os padrões da Web
● Declarar a versão do HTML com DOCTYPE
● Usar a semântica correta:
– Para listas: <ul>, <li>, <ol>
– Para ênfase: <strong>
– Para siglas: <abbr>
– Títulos e subtítulos: <h1>, <h2>,… , <h6>
– Tabelas para dados tabulares
● Não usar para diagramação

Não usar recursos depreciados
● Popups
● Frames
● Applets
●
Dentre outros

Recomendações
de
comportamento

Garantir que objetos dinâmicos
sejam acessíveis
● Exemplos
– Scripts
– Flash
– Conteúdos dinâmicos
●
Caso não seja possível, crie uma alternativa
estática

Atualizações automática
● Abolir:
– “Refreshes” nas páginas
– Redirecionamento automáticos
– Páginas com limite de tempo

Movimento e Intermitência
● Usuários devem ter
controle sobre
objetos com
movimento
●
Não inclua situações
com intermitência

Idioma
● Indicar idioma principal da página
<html lang="pt-BR">
●
Indicar mudanças no idioma
<p lang="de">Hier kommt die Sonne</p>

Clareza nos conteúdos
● Títulos informativos a cada página
● Explicar abreviações (<abbr>)
● Facilitar a leitura
– “Textos não devem exigir mais que ensino
fundamental para ser entendido”

Ajudar o usuário a se localizar
● Mecanismo de busca
● Breadcrumbs
“Você está em: Página Inicial > Informe-se > Notícias”

Informações não textuais
Fornecer alternativa textual para todo elemento
não-textual :
● Imagens
<img src=”logo.png” alt=”Brasão do TRTBrasão do TRT” >
●
Campos de formulário
●
Tabelas
– Metadados como sumário, nome das colunas etc

Descrever links de forma clara
Deve ser claro para onde ele leva, mesmo sem o
contexto
● Errado:
– “Para acessar a Ouvidoria clique aqui”
●
Certo
– “Para acessar a Ouvidoria clique aqui”

Formatos de documentos
● Documentos devem ser HTML, ou ODF para
download
● Para PDF's, deve ser fornecida uma alternativa
em HTML ou ODF

Recomendações de Apresentação

Cores
● Oferecer um contraste
adequado
– E evitar imagens de fundo
●
Não usar cor para
diferenciar elementos
– “Clique no botão verde”

Redimensionamento
● Permitir redimensionamento
● Assegurar que não afete as funcionalidades
[A+][A+] Aumentar FonteAumentar Fonte // [ A-][ A-] Diminuir FonteDiminuir Fonte

Áreas de Informação
● Dividir a página em seções
● Manter a coerência por todo o site

Recomendações de Multimídia

Vídeo e Áudio
● Legenda para vídeos
● Descrição textual do áudio
● Funções de controle para ambos
– Pausar, parar, volume, etc.

Recomendações
para Formulários

Clareza (II)
● Ordenar e agrupar campos logicamente
– Tabulação coerente
●
Fornecer etiquetas de texto (labels)
●
Texto alternativo para botões
●
Fornecer instruções para entrada de dados
● Clareza nas mensagens de erro

CAPTCHA Humano
●
“Quantos dias tem na semana?”
● “Quanto é dois mais três?”

Para encerrar...
● Lembrar que pessoas diferem:
– em como interagem com sua página
● Interfaces de entrada e saída
– no tempo que levam realizar uma tarefa
– no nível de entendimento

Referências
● e-MAG
– http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
●
WCAG
– http://www.w3.org/TR/WCAG/

Fotos
● http://www.trt13.jus.br
●
http://olimpiadas.uol.com.br/paraolimpiadas/
● http://bethanyhamilton.com
●
http://www.statueclothing.com
● http://www.metro.co.uk/news/416162-wheelchair-teen-in-record-breaki
● http://doyouactuallyknow.blogspot.com.br/2010/04/worst-of-worst.htm

Acessibilidade Web: Introdução e recomendações da e-MAG

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Acessibilidade Web: Introdução e recomendações da e-MAG

Semelhante a Acessibilidade Web: Introdução e recomendações da e-MAG (20)

Acessibilidade Web: Introdução e recomendações da e-MAG