acessibilidade web ivo gomes · o que é a acessibilidade web? 2 •permir que todos os ulizadores...
TRANSCRIPT
O que é a Acessibilidade Web?
2
• Permi'r que todos os u'lizadores tenham acesso ao site.
• Independentemente de terem alguma necessidade especial.
• Independentemente de terem algum 'po de deficiência.
• Usem o disposi'vo que usarem.
• Acessibilidade é Acesso Universal.
O que é a Acessibilidade Web?
3
• Deficientes Asicos/mentais;
• Deficientes temporários;
• Deficientes tecnológicos;
“Pessoas com necessidades especiais" não significa necessariamente pessoas com deficiência
A acessibilidade não serve apenas para os "deficientes", serve para facilitar a vida a todos nós numa altura ou outra da vida.
Níveis de Acessibilidade
4
• Prioridade 1 (A)
• Prioridade 2 (AA)
• Prioridade 3 (AAA)
Segundo o WCAG (Web Content Accessibility Guidelines) 1.0
Níveis de Acessibilidade
5
• Pontos que têm ser verificados e corrigidos.
• Caso contrário, um ou mais grupos de u'lizadores verá impossível o seu acesso à informação.
Prioridade 1
Conformidade nível A: O website passa em todos os pontos de Prioridade 1.
Níveis de Acessibilidade
6
• Pontos que devem ser verificados e corrigidos.
• A sa'sfação destes pontos eliminará uma quan'dade significante de barreiras que poderiam dificultar o acesso à informação.
Prioridade 2
Conformidade nível AA: O website passa em todos os pontos de Prioridade 1 e de Prioridade 2.
Níveis de Acessibilidade
7
• Pontos que podem ser verificados e corrigidos.
• A sa'sfação destes pontos melhorará o acesso à informação
Prioridade 3*
Conformidade nível AAA: O website passa em todos os pontos de Prioridade 1, Prioridade 2 e de Prioridade 3.
* A maior parte dos pontos de prioridade 3 (WCAG 1.0) são obsoletos.
Níveis de Acessibilidade
8
• Actualiza as regras de acessibilidade para os tempos modernos (remove regras obsoletas)
WCAG (Web Content Accessibility Guidelines) 2.0
• Texto do documento é muito diAcil de ler e de compreender;
PROS:
CONTRAS:
http://www.webaim.org/standards/wcag/checklist/SOLUÇÃO MAIS FÁCIL:
Níveis de Acessibilidade
10
Validação automá'ca*:
http://tawdis.net/
* Os validadores automá'cos ainda usam o WCAG 1.0 como base.
Uso de tabelas para layouts
12
• Tabelas dentro de tabelas dificultam a orientação do u'lizador na página e a estruturação dos conteúdos;
• Como é que os screen readers devem ler as tabelas? Coluna a coluna ou linha a linha? Como é que isso afectará a forma como os conteúdos são lidos?
As tabelas foram criadas para mostrar dados tabulares e não para fazer layouts
Uso de tabelas para layouts
15
<table cellpadding="0" cellspacing="0" id="main_menu" style=""> <tbody> <tr>
<td class="hMenuFirstLine"> <table cellpadding="0" cellspacing="0" id="main_menu_first_line">
<tbody> <tr> <td class="hMenuFirstLineItemSelA"><a href="http://aeiou.expresso.pt/gen.pl" target="_top">Página inicial</a></td> <td class="hMenuFirstLineItem"><a href="http://aeiou.expresso.pt/gen.pl?19" target="_top">Actualidade</a></td> <td class="hMenuFirstLineItem"><a href="http://aeiou.expresso.pt/gen.pl?20" target="_top">Economia</a></td> <td class="hMenuFirstLineItem"><a href="http://aeiou.expresso.pt/gen.pl?21" target="_top">Desporto</a></td> <td class="hMenuFirstLineItem"><a href="http://aeiou.expresso.pt/gen.pl?255" target="_top">Ciência</a></td> <td class="hMenuFirstLineItem"><a href="http://aeiou.expresso.pt/gen.pl?329" target="_top">Rede Expresso</a></td> </tr> </tbody> </table> </td> </tr> </tbody></table>
Uso de tabelas para layouts
16
<div id="main_menu"> <ul> <li><a href="http://aeiou.expresso.pt/gen.pl" target="_top">Página inicial</a></li> <li><a href="http://aeiou.expresso.pt/gen.pl?19" target="_top">Actualidade</a></li> <li><a href="http://aeiou.expresso.pt/gen.pl?20" target="_top">Economia</a></li> <li><a href="http://aeiou.expresso.pt/gen.pl?21" target="_top">Desporto</a></li> <li><a href="http://aeiou.expresso.pt/gen.pl?255" target="_top">Ciência</a></li> <li><a href="http://aeiou.expresso.pt/gen.pl?329" target="_top">Rede Expresso</a></li> </ul></div>
Subs'tuir as tabelas por blocos de informação mais lógicos
Semântica dos Conteúdos
17
•Os cabeçalhos (h1, h2, h3), parágrafos e listas (ul, ol) servem para estruturar os conteúdos na página de forma semân'ca e dão significado ao texto.
• Permite criar um nível hierárquico entre os conteúdos.
Um website deve ser escrito como se fosse um Documento
Semântica dos Conteúdos
20
• <strong> = carregado
• <em> = ênfase
Os conteúdos devem fazer sen'do quando são lidos (ex: screen reader)
• <b> = ??
• <i> = ??Vs.
Apenas fornecem o visual e nãotêm qualquer significado semântico
Fornece o mesmo visual que as tags <b> e <i>, respectivamente e têm significado para os screen readers.
Texto alternativo nas imagens
21
• As imagens que forneçam algum significado ao u'lizador devem ter um pequeno texto alterna'vo que explique o que aparece na imagem.
• As imagens usadas apenas para decoração do layout devem ter o texto alterna'vo nulo: alt=”“
•Os screen readers ignoram as imagens com alt nulo, mas não ignoram as imagens sem alt.
As imagens devem ter sempre o atributo alt
Texto alternativo nas imagens
22
•O texto alt deve ser curto e sucinto, e não deve conter mais informação do que aquela que é transmi'da pela imagem.
Não abusar do alt!
<img src="imagem.png" alt="Texto descritivo da imagem" />
<img src="imagem.png" alt="Texto descritivo da imagem que nunca mais acaba e que faz com que o utilizador tenha que ouvir o screen reader ler isto tudo" />
Frames
23
• Caso seja mesmo necessário usar frames, cada uma deve ter um dtulo associado de modo a que o u'lizador possa ir directamente para uma determinada frame.
Evitar o uso de <frames>
<frameset cols="15%, 85%"><frame src="menu.html" title="Menu principal" name="menu"><frame src="content1.html" title="Conteúdos" name="content">
</frameset>
Frames
24
• Fornecer um método alterna'vo para chegar aos conteúdos através da tag <noframes>
Se o browser não suportar <frames>
<frameset cols="15%, 85%"><frame src="menu.html" title="Menu principal" name="menu"><frame src="content1.html" title="Conteúdos" name="content"><noframes>
<p>Esta página contém os seguintes elementos:</p><ul>
<li><a href="menu.html">Menu principal</a></li><li><a href="content1.html">Conteúdos</a></li>
</ul></noframes>
</frameset>
Frames
25
• As <iframes> não têm tantos problemas de acessibilidade como as <frames> mas também é necessário fornecer informação alterna'va.
E as <iframes>?
<iframe src="webpage.htm"><p>Os browsers que não suportam o uso de iframes não irão ver a frame mas irão ver este texto que poderá ter um <a href=”webpage.htm”>link para que o utilizador possa navegar até à página</a> que deveria aparecer aqui.</p></iframe>
Formulários
26
• As <label> permitem relacionar o texto com o campo do formulário.
• A zona clicável aumenta consideravelmente.
Atribuir uma <label> a cada campo do formulário
Vs.
Formulários
27
<p><input type="checkbox" name="compras" value="" id="leite" /> <label for="leite">Leite</label></p>
• A <label> é associada ao id do campo
Formulários
27
<p><label for="leite"><input type="checkbox" name="compras" value="" id="leite" /> Leite</label></p>
<p><input type="checkbox" name="compras" value="" id="leite" /> <label for="leite">Leite</label></p>
• A <label> é associada ao id do campo
<p><label for="nome">O Seu Nome:</label> <input type="text" name="nome" value="" id="nome" /></p>
• Funciona com todos os elementos
<p><label for="morada">Morada:</label> <textarea id="morada"></textarea></p>
• Pode ser colocada à volta do campo
<p><label for="nome">O Seu Nome: <input type="text" name="nome" value="" id="nome" /></label></p>
Formulários
28
• Podemos definir a ordem como determinados campos serão seleccionados no caso do u'lizador navegar com o teclado (usando a tecla TAB)
Ordenação da tabulação
<input type="checkbox" name="compras" value="" id="leite" tabindex="1" />
<input type="checkbox" name="compras" value="" id="bolachas" tabindex="2" />
Formulários
29
• Esta tabulação pode ser uma boa ideia para páginas de formulários extensos ou no caso em que o formulário é o elemento mais importante na página.
• Não é uma boa ideia para usar se 'vermos apenas um formulário de pesquisa no fundo da página.
Não abusar da tabulação!
• A informação de que o campo é obrigatório deve estar dentro do <label> do campo
Formulários
30
Iden'ficação dos campos obrigatórios
Formulários
31
<div> <label for="uname">Username<em>*</em></label> <input id="uname" type="text" name="uname" value="" /></div>
Formulários
31
<div> <label for="uname">Username<em>*</em></label> <input id="uname" type="text" name="uname" value="" /></div>
<div> <label for="uname">Username<em>(obrigatório)</em></label> <input id="uname" type="text" name="uname" value="" /></div>
Ou melhor ainda:
Formulários
32
form div { position: relative; }
label { width:100px; text-align:right; float:left; margin-right:10px; }
input { width:200px; }
label em { position: absolute; left:320px; color:red; }
Uma possível solução via CSS:
Formulários
33
O mesmo deve acontecer para as mensagens de erro
<div> <label for="uname">Username<em>não pode conter espaços</em></label> <input id="uname" type="text" name="uname" value="" /></div>
Formulários
34
• Através da criação de <fieldset> podemos agrupar conjuntos de campos.
• Desta forma simplificamos o preenchimento dos formulários, uma vez que está separado em pequenos grupos lógicos.
Agrupar campos
Contraste de cores
36
Contraste entre o texto e a cor de fundo
Contraste entre o texto e a cor de fundo
Contraste entre o texto e a cor de fundo
Contraste entre o texto e a cor de fundo
Contraste entre o texto e a cor de fundo
Contraste entre o texto e a cor de fundo
Segundo o WCAG 2.0: O nível AA requer um rácio de contraste de 4,5:1 para o texto normal e 3:1 para texto grande.
O nível AAA requer um rácio de contraste de 7:1 para o texto normal e 4,5:1 para texto grande.
Contraste de cores
37
Cálculo do contraste:
http://webaim.org/resources/contrastchecker/
Contraste de cores
38http://webaim.org/resources/contrastchecker/
Daltonismo
39
• Legendas de gráficos (usando códigos de cores)
• Secções diferentes do site iden'ficadas por cores diferentes
Importante testar quando usamos a cor para fornecer algum 'po de informação
http://colororacle.cartography.ch/
Navegação com o teclado
44
• Com o rato, sabemos onde está o ponteiro.
• Com o teclado é necessário dar feedback da nossa localização na página.
• Da mesma forma que fornecemos feedback ao rato via :hover ou :visited, podemos fornecer feedback ao teclado via :acBve e :focus
Fornecer um método do u'lizador saber em que zona da página está
Navegação com o teclado
45
• :hover ‐ quando o rato passa por cima
• :visited ‐ quando já visitámos este link
• :acBve ‐ úl'mo link clicado, enquanto a nova página não carrega
• :focus ‐ posição na página quando usamos a navegação pelo teclado (tab)
Links devem fazer sentido fora do contexto
46
•Muitas vezes os u'lizadores de screen readers ac'vam uma opção para ler apenas os links na página.
• Os links do 'po: “clique aqui” não trazem qualquer significado ao u'lizador quando são lidos fora do seu contexto:
ex: Para aceder aos registos clique aqui
• Devemos, sempre que possível usar textos que por si só ajudam a compreender onde o link nos leva
ex: Aceder aos Registos
Tamanho do texto
47
•Não usar texto demasiado pequeno.
• Teste: Tentar ler o texto da página afastado cerca de 1 metro do computador. Caso haja dificuldade em ler, é porque p texto é demasiado pequeno.
Tamanho do texto
49
•Usar um espaçamento entre linhas nunca inferior a metade da altura do texto para facilitar a leitura.
• Não usar texto jus'ficado
p { line-height: 1.5 }
Fornecer atalhos para os conteúdos
50
• Antes dos menus, devemos fornecer um link para saltar directamente para os conteúdos.
• Desta forma não obrigamos os u'lizadores com screen reader a ouvir todos os menus de cada vez que carregam uma nova página do site.
•O link no topo redirecciona para o bloco que contém os conteúdos
Fornecer atalhos para os conteúdos
52
<body> <div id=”saltar”><a href=”#conteudos”>Saltar o menu</a></div>
(...)Menus(...)
<div id=”conteudos”>......
</div></body>
• Há quem prefira esconder o link para que apenas fique visível aos u'lizadores com screen reader ou com CSS desligado
Fornecer atalhos para os conteúdos
53
#saltar { display: none; }
• Há quem prefira esconder o link para que apenas fique visível aos u'lizadores com screen reader ou com CSS desligado
Fornecer atalhos para os conteúdos
53
#saltar { display: none; }
#saltar { display: block; position: absolute;left: -9999px;overflow: hidden;width: 10px;
}
• Há quem prefira esconder o link para que apenas fique visível aos u'lizadores com screen reader ou com CSS desligado
Fornecer atalhos para os conteúdos
53
#saltar { display: none; }
•Quando for usado Javascript, tentar mantê‐lo fora do código HTML
• Fornecer uma versão básica da página que funciona sem Javascript
• No caso do u'lizador ter o Javascript ac'vo, então é adicionada a interacção suplementar
• Isto permite que a página possa ser navegada por vários disposi'vos, incluindo screen readers, browsers de texto (Lynx) e telemóveis (a maior parte não suporta Javascript)
Javascript não obstrutivo
54
• Em vez de:
Javascript não obstrutivo
55
<a href="#" onclick="javascript:abrePagina(‘whatever’)">Link para uma página</a>
•Usar:
<a class=”link” href=”pagina.html”>Link para uma página</a>
• Permite que o link funcione mesmo sem Javascript
• Permite abrir o link numa nova tab do browser
• Ficheiro Javascript à parte:
Javascript não obstrutivo
56
$("a.link").click(function(){ abrePagina(‘whatever’); return false;
});
<a class=”link” href=”pagina.html”>Link para uma página</a>
• Caixas de texto com sugestão automá'ca de resultados podem ajudar os u'lizadores com dificuldades motoras:
AJAX e Acessibilidade
57
Javascript também pode ajudar a melhorar a acessibilidade
• Sliders e elementos drag&drop podem ser mais fáceis de usar por u'lizadores com dificuldades de leitura devido à sua natureza ilustra'va:
AJAX e Acessibilidade
58
Javascript também pode ajudar a melhorar a acessibilidade
•Nem todos os u'lizadores usam sistemas que permitem o carregamento de Javascript;
• Alguns disposi'vos carregam o Javascript mas não actualizam os elementos na página quando os mesmos são feitos via AJAX;
• O feedback destas alterações é normalmente apenas visual e os u'lizadores podem não se aperceber disso.
AJAX e Acessibilidade
59
É sempre recomendado fornecer uma versão alterna'va dos conteúdos
http://www.ivogomes.com/apresentacoes/acessibilidade-web.pdf [email protected]