Top Banner
Acessibilidade Web Ivo Gomes 1
68

Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Nov 09, 2018

Download

Documents

lykiet
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Acessibilidade Web Ivo Gomes

1

Page 2: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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.

Page 3: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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.

Page 4: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Níveis de Acessibilidade

4

• Prioridade 1 (A)

• Prioridade 2 (AA)

• Prioridade 3 (AAA)

Segundo o WCAG (Web Content Accessibility Guidelines) 1.0

Page 5: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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.

Page 6: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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.

Page 7: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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.

Page 8: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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:

Page 9: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Níveis de Acessibilidade

9

Page 10: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Níveis de Acessibilidade

10

Validação automá'ca*:

http://tawdis.net/

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

Page 11: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Exemplos Práticos

11

Principais problemas de acessibilidade e como os evitar/corrigir

Page 12: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 13: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Uso de tabelas para layouts

13

Page 14: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Uso de tabelas para layouts

14

Page 15: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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>

Page 16: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 17: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 18: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Semântica dos Conteúdos

18

Page 19: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Semântica dos Conteúdos

18

H1H2

PUL

Page 20: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Semântica dos Conteúdos

19

Page 21: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Semântica dos Conteúdos

19

Qual é a nodcia principal?

Page 22: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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.

Page 23: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 24: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 25: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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>

Page 26: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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>

Page 27: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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>

Page 28: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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.

Page 29: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 30: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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>

Page 31: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 32: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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!

Page 33: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

• 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

Page 34: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Formulários

31

<div> <label for="uname">Username<em>*</em></label> <input id="uname" type="text" name="uname" value="" /></div>

Page 35: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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:

Page 36: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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:

Page 37: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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>

Page 38: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 39: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Formulários

35

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

Page 40: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 41: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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/

Page 42: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Contraste de cores

38http://webaim.org/resources/contrastchecker/

Page 43: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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/

Page 44: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

40

SAPO.pt ‐ Visão Normal

Page 45: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

41

SAPO.pt ‐ Deuteranopia (vermelho)

Afecta 5% das pessoas do sexo masculino.

Page 46: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

42

SAPO.pt ‐ Protanopia (verde)

Afecta 2,5% das pessoas do sexo masculino.

Page 47: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

43

SAPO.pt ‐ Tritanopia (azul)

Afecta 0,5% das pessoas do sexo masculino.

Page 48: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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á

Page 49: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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)

Page 50: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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

Page 51: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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.

Page 52: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Tamanho do texto

48

Page 53: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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 }

Page 54: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

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.

Page 55: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Fornecer atalhos para os conteúdos

51

Page 56: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

•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>

Page 57: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

• 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; }

Page 58: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

• 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; }

Page 59: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

#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; }

Page 60: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

•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

Page 61: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

• 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

Page 62: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

• 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>

Page 63: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

• 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

Page 64: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

• 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

Page 65: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

•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

Page 66: Acessibilidade Web Ivo Gomes · O que é a Acessibilidade Web? 2 •Permir que todos os ulizadores tenham acesso ao site. •Independentemente de terem alguma necessidade especial.

Acessibilidade Web

60

Vamos tornar a Internet mais fácil para todos