acessibilidade web ivo gomes · o que é a acessibilidade web? 2 •permir que todos os ulizadores...

Acessibilidade Web Ivo Gomes

1

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


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.


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.


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.


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:

http://www.webaim.org/standards/wcag/checklist/



9


10

Validação automá'ca*:

http://tawdis.net/

* Os validadores automá'cos ainda usam o WCAG 1.0 como base.



Exemplos Práticos

11

Principais problemas de acessibilidade e como os evitar/corrigir

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


13


14


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>

http://aeiou.expresso.pt/gen.pl


http://aeiou.expresso.pt/gen.pl?sid=ex.sections/23412&mid1=ex.menus/19











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


18


18

H1H2

PUL


19


19

Qual é a nodcia principal?


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" />

http://en.wikipedia.org/wiki/Alt_attribute

http://en.wikipedia.org/wiki/Alt_attribute

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

Formulários

35

<fieldset> <legend>Título do grupo</legend> (...) </fieldset>

Contraste de cores

36

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/



40

SAPO.pt ‐ Visão Normal

41

SAPO.pt ‐ Deuteranopia (vermelho)

Afecta 5% das pessoas do sexo masculino.

42

SAPO.pt ‐ Protanopia (verde)

Afecta 2,5% das pessoas do sexo masculino.

43

SAPO.pt ‐ Tritanopia (azul)

Afecta 0,5% das pessoas do sexo masculino.

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

48

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.


51

•O link no topo redirecciona para o bloco que contém 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


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


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:


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:


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:


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.


59

É sempre recomendado fornecer uma versão alterna'va dos conteúdos

Acessibilidade Web

60

Vamos tornar a Internet mais fácil para todos

Obrigado pela vossa atenção!

[email protected]

mailto:[email protected]


http://www.ivogomes.com/apresentacoes/acessibilidade-web.pdf [email protected]

http://www.ivogomes.com/apresentacoes/solucoes-web-centradas-no-utilizador.pdf






acessibilidade web ivo gomes · o que é a acessibilidade web? 2 •permir que todos os ulizadores...

Documents