O documento discute o conceito de acessibilidade web e como tornar sites acessíveis a todos os usuários, independentemente de deficiências. Explica que a acessibilidade significa acesso universal e que não se destina apenas a pessoas com deficiências, mas facilita a vida de todos. Também descreve os níveis de prioridade da diretriz WCAG para acessibilidade web.

1. Acessibilidade Web Ivo Gomes
1

2. O que é a Acessibilidade Web?
• 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.
2

3. O que é a Acessibilidade Web?
“Pessoas com necessidades especiaisquot; não significa
necessariamente pessoas com deficiência
• Deficientes Asicos/mentais;
• Deficientes temporários;
• Deficientes tecnológicos;
A acessibilidade não serve apenas para os quot;deficientesquot;, serve para facilitar
a vida a todos nós numa altura ou outra da vida.
3

4. Níveis de Acessibilidade
Segundo o WCAG (Web Content Accessibility Guidelines) 1.0
• Prioridade 1 (A)
• Prioridade 2 (AA)
• Prioridade 3 (AAA)
4

5. Níveis de Acessibilidade
Prioridade 1
• 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.
Conformidade nível A: O website passa em todos os pontos de Prioridade 1.
5

6. Níveis de Acessibilidade
Prioridade 2
• 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.
Conformidade nível AA: O website passa em todos os pontos de Prioridade 1
e de Prioridade 2.
6

7. Níveis de Acessibilidade
Prioridade 3*
• Pontos que podem ser verificados e corrigidos.
• A sa'sfação destes pontos melhorará o acesso à informação
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. 7

8. Níveis de Acessibilidade
WCAG (Web Content Accessibility Guidelines) 2.0
PROS:
• Actualiza as regras de acessibilidade para os tempos modernos (remove
regras obsoletas)
CONTRAS:
• Texto do documento é muito diAcil de ler e de compreender;
SOLUÇÃO MAIS FÁCIL:
http://www.webaim.org/standards/wcag/checklist/
8

9. Níveis de Acessibilidade
9

10. Níveis de Acessibilidade
Validação automá'ca*:
http://tawdis.net/
* Os validadores automá'cos ainda usam o WCAG 1.0 como base. 10

11. Exemplos Práticos
Principais problemas de
acessibilidade e como os
evitar/corrigir
11

12. Uso de tabelas para layouts
As tabelas foram criadas para mostrar dados tabulares e não
para fazer layouts
• 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?
12

13. Uso de tabelas para layouts
13

14. Uso de tabelas para layouts
14

15. Uso de tabelas para layouts
<table cellpadding=quot;0quot; cellspacing=quot;0quot; id=quot;main_menuquot; style=quot;quot;>
<tbody>
<tr>
<td class=quot;hMenuFirstLinequot;>
<table cellpadding=quot;0quot; cellspacing=quot;0quot; id=quot;main_menu_first_linequot;>
<tbody>
<tr>
<td class=quot;hMenuFirstLineItemSelAquot;><a href=quot;http://aeiou.expresso.pt/gen.plquot; target=quot;_topquot;>Página
inicial</a></td>
<td class=quot;hMenuFirstLineItemquot;><a href=quot;http://aeiou.expresso.pt/gen.pl?19quot;
target=quot;_topquot;>Actualidade</a></td>
<td class=quot;hMenuFirstLineItemquot;><a href=quot;http://aeiou.expresso.pt/gen.pl?20quot;
target=quot;_topquot;>Economia</a></td>
<td class=quot;hMenuFirstLineItemquot;><a href=quot;http://aeiou.expresso.pt/gen.pl?21quot;
target=quot;_topquot;>Desporto</a></td>
<td class=quot;hMenuFirstLineItemquot;><a href=quot;http://aeiou.expresso.pt/gen.pl?255quot;
target=quot;_topquot;>Ciência</a></td>
<td class=quot;hMenuFirstLineItemquot;><a href=quot;http://aeiou.expresso.pt/gen.pl?329quot; target=quot;_topquot;>Rede
Expresso</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
15

16. Uso de tabelas para layouts
Subs'tuir as tabelas por blocos de informação mais lógicos
<div id=quot;main_menuquot;>
<ul>
<li><a href=quot;http://aeiou.expresso.pt/gen.plquot; target=quot;_topquot;>Página inicial</a></li>
<li><a href=quot;http://aeiou.expresso.pt/gen.pl?19quot; target=quot;_topquot;>Actualidade</a></li>
<li><a href=quot;http://aeiou.expresso.pt/gen.pl?20quot; target=quot;_topquot;>Economia</a></li>
<li><a href=quot;http://aeiou.expresso.pt/gen.pl?21quot; target=quot;_topquot;>Desporto</a></li>
<li><a href=quot;http://aeiou.expresso.pt/gen.pl?255quot; target=quot;_topquot;>Ciência</a></li>
<li><a href=quot;http://aeiou.expresso.pt/gen.pl?329quot; target=quot;_topquot;>Rede Expresso</a></li>
</ul>
</div>
16

17. Semântica dos Conteúdos
Um website deve ser escrito como se fosse um Documento
• 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.
17

18. Semântica dos Conteúdos
18

19. Semântica dos Conteúdos
H1
H2
P
UL
18

20. Semântica dos Conteúdos
19

21. Semântica dos Conteúdos
Qual é a nodcia principal?
19

22. Semântica dos Conteúdos
Os conteúdos devem fazer sen'do quando são lidos
(ex: screen reader)
• <strong> = carregado • <b> = ??
Vs.
• <em> = ênfase • <i> = ??
Fornece o mesmo visual que as tags Apenas fornecem o visual e não
<b> e <i>, respectivamente e têm têm qualquer significado semântico
significado para os screen readers.
20

23. Texto alternativo nas imagens
As imagens devem ter sempre o atributo alt
• 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.
21

24. Texto alternativo nas imagens
Não abusar do alt!
• O texto alt deve ser curto e sucinto, e não deve conter mais informação
do que aquela que é transmi'da pela imagem.
<img src=quot;imagem.pngquot; alt=quot;Texto descritivo da imagemquot; />
<img src=quot;imagem.pngquot; alt=quot;Texto descritivo da imagem
que nunca mais acaba e que faz com que o utilizador tenha
que ouvir o screen reader ler isto tudoquot; />
22

25. Frames
Evitar o uso de <frames>
• 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.
<frameset cols=quot;15%, 85%quot;>
<frame src=quot;menu.htmlquot; title=quot;Menu principalquot; name=quot;menuquot;>
<frame src=quot;content1.htmlquot; title=quot;Conteúdosquot; name=quot;contentquot;>
</frameset>
23

26. Frames
Se o browser não suportar <frames>
• Fornecer um método alterna'vo para chegar aos conteúdos através da
tag <noframes>
<frameset cols=quot;15%, 85%quot;>
<frame src=quot;menu.htmlquot; title=quot;Menu principalquot; name=quot;menuquot;>
<frame src=quot;content1.htmlquot; title=quot;Conteúdosquot; name=quot;contentquot;>
<noframes>
<p>Esta página contém os seguintes elementos:</p>
<ul>
<li><a href=quot;menu.htmlquot;>Menu principal</a></li>
<li><a href=quot;content1.htmlquot;>Conteúdos</a></li>
</ul>
</noframes>
</frameset> 24

27. Frames
E as <iframes>?
• As <iframes> não têm tantos problemas de acessibilidade como as
<frames> mas também é necessário fornecer informação alterna'va.
<iframe src=quot;webpage.htmquot;>
<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>
25

28. Formulários
Atribuir uma <label> a cada campo do formulário
• As <label> permitem relacionar o texto com o campo do formulário.
• A zona clicável aumenta consideravelmente.
Vs.
26

29. Formulários
• A <label> é associada ao id do campo
<p><input type=quot;checkboxquot; name=quot;comprasquot; value=quot;quot; id=quot;leitequot; /> <label for=quot;leitequot;>Leite</label></p>
27

30. Formulários
• A <label> é associada ao id do campo
<p><input type=quot;checkboxquot; name=quot;comprasquot; value=quot;quot; id=quot;leitequot; /> <label for=quot;leitequot;>Leite</label></p>
• Funciona com todos os elementos
<p><label for=quot;nomequot;>O Seu Nome:</label> <input type=quot;textquot; name=quot;nomequot; value=quot;quot; id=quot;nomequot; /></p>
<p><label for=quot;moradaquot;>Morada:</label> <textarea id=quot;moradaquot;></textarea></p>
• Pode ser colocada à volta do campo
<p><label for=quot;leitequot;><input type=quot;checkboxquot; name=quot;comprasquot; value=quot;quot; id=quot;leitequot; /> Leite</label></p>
<p><label for=quot;nomequot;>O Seu Nome: <input type=quot;textquot; name=quot;nomequot; value=quot;quot; id=quot;nomequot; /></label></p>
27

31. Formulários
Ordenação da tabulação
• Podemos definir a ordem como determinados campos serão
seleccionados no caso do u'lizador navegar com o teclado (usando a
tecla TAB)
<input type=quot;checkboxquot; name=quot;comprasquot; value=quot;quot; id=quot;leitequot; tabindex=quot;1quot; />
<input type=quot;checkboxquot; name=quot;comprasquot; value=quot;quot; id=quot;bolachasquot; tabindex=quot;2quot; />
28

32. Formulários
Não abusar da tabulação!
• 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.
29

33. Formulários
Iden'ficação dos campos obrigatórios
• A informação de que o campo é obrigatório deve estar dentro do <label>
do campo
30

34. Formulários
<div>
<label for=quot;unamequot;>Username<em>*</em></label>
<input id=quot;unamequot; type=quot;textquot; name=quot;unamequot; value=quot;quot; />
</div>
31

35. Formulários
<div>
<label for=quot;unamequot;>Username<em>*</em></label>
<input id=quot;unamequot; type=quot;textquot; name=quot;unamequot; value=quot;quot; />
</div>
Ou melhor ainda:
<div>
<label for=quot;unamequot;>Username<em>(obrigatório)</em></label>
<input id=quot;unamequot; type=quot;textquot; name=quot;unamequot; value=quot;quot; />
</div>
31

36. Formulários
form div {
position: relative;
}
label {
width:100px;
text-align:right;
Uma possível solução via CSS:
float:left;
margin-right:10px;
}
input {
width:200px;
}
label em {
position: absolute;
left:320px;
color:red;
32
}

37. Formulários
O mesmo deve acontecer para as mensagens de erro
<div>
<label for=quot;unamequot;>Username<em>não pode conter espaços</em></label>
<input id=quot;unamequot; type=quot;textquot; name=quot;unamequot; value=quot;quot; />
</div>
33

38. Formulários
Agrupar campos
• 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.
34

39. Formulários
<fieldset>
<legend>Título do grupo</legend>
(...)
</fieldset>
35

40. Contraste de cores
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
36

41. Contraste de cores
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.
Cálculo do contraste:
http://webaim.org/resources/contrastchecker/
37

42. Contraste de cores
http://webaim.org/resources/contrastchecker/ 38

43. Daltonismo
Importante testar quando usamos a cor para fornecer algum
'po de informação
• Legendas de gráficos (usando códigos de cores)
• Secções diferentes do site iden'ficadas por cores diferentes
http://colororacle.cartography.ch/
39

44. SAPO.pt ‐ Visão Normal
40

45. SAPO.pt ‐ Deuteranopia (vermelho)
Afecta 5% das pessoas do sexo masculino. 41

46. SAPO.pt ‐ Protanopia (verde)
Afecta 2,5% das pessoas do sexo masculino. 42

47. SAPO.pt ‐ Tritanopia (azul)
Afecta 0,5% das pessoas do sexo masculino. 43

48. Navegação com o teclado
Fornecer um método do u'lizador saber em que zona da
página está
• 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
44

49. Navegação com o teclado
• :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)
45

50. Links devem fazer sentido fora do contexto
• 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
46

51. Tamanho do texto
• 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.
47

52. Tamanho do texto
48

53. Tamanho do texto
• Usar um espaçamento entre linhas nunca inferior a metade da altura do
texto para facilitar a leitura.
p { line-height: 1.5 }
• Não usar texto jus'ficado
49

54. Fornecer atalhos para os conteúdos
• 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.
50

55. Fornecer atalhos para os conteúdos
51

56. Fornecer atalhos para os conteúdos
• O link no topo redirecciona para o bloco que contém os conteúdos
<body>
<div id=”saltar”><a href=”#conteudos”>Saltar o menu</a></div>
(...)
Menus
(...)
<div id=”conteudos”>
...
...
</div>
</body>
52

57. Fornecer atalhos para os conteúdos
• Há quem prefira esconder o link para que apenas fique visível aos
u'lizadores com screen reader ou com CSS desligado
#saltar { display: none; }
53

58. Fornecer atalhos para os conteúdos
• Há quem prefira esconder o link para que apenas fique visível aos
u'lizadores com screen reader ou com CSS desligado
#saltar { display: none; }
53

59. Fornecer atalhos para os conteúdos
• Há quem prefira esconder o link para que apenas fique visível aos
u'lizadores com screen reader ou com CSS desligado
#saltar { display: none; }
#saltar {
display: block;
position: absolute;
left: -9999px;
overflow: hidden;
width: 10px;
}
53

60. Javascript não obstrutivo
• 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)
54

61. Javascript não obstrutivo
• Em vez de:
<a href=quot;#quot; onclick=quot;javascript:abrePagina(‘whatever’)quot;>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
55

62. Javascript não obstrutivo
<a class=”link” href=”pagina.html”>Link para uma página</a>
• Ficheiro Javascript à parte:
$(quot;a.linkquot;).click(function(){
abrePagina(‘whatever’);
return false;
});
56

63. AJAX e Acessibilidade
Javascript também pode ajudar a melhorar a acessibilidade
• Caixas de texto com sugestão automá'ca de resultados podem ajudar os
u'lizadores com dificuldades motoras:
57

64. AJAX e Acessibilidade
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

65. AJAX e Acessibilidade
É sempre recomendado fornecer uma versão alterna'va dos
conteúdos
• 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

66. Acessibilidade Web
Vamos tornar a Internet mais
fácil para todos
60

67. Obrigado pela vossa
ivogomes@co.sapo.pt
atenção!

68. http://www.ivogomes.com/apresentacoes/
ivogomes@co.sapo.pt
acessibilidade-web.pdf