0
Acessibilidade Web   Ivo Gomes
                                 1
O que é a Acessibilidade Web?

• Permi'r que todos os u'lizadores tenham acesso ao site.

• Independentemente de terem alg...
O que é a Acessibilidade Web?

“Pessoas com necessidades especiaisquot; não significa 
necessariamente pessoas com deficiênc...
Níveis de Acessibilidade


Segundo o WCAG (Web Content Accessibility Guidelines) 1.0

• Prioridade 1 (A)

• Prioridade 2 (...
Níveis de Acessibilidade


Prioridade 1

• Pontos que têm ser verificados e corrigidos.

• Caso contrário, um ou mais grupo...
Níveis de Acessibilidade


Prioridade 2

• Pontos que devem ser verificados e corrigidos.

• A sa'sfação destes pontos elim...
Níveis de Acessibilidade


Prioridade 3*

• Pontos que podem ser verificados e corrigidos.

• A sa'sfação destes pontos mel...
Níveis de Acessibilidade


WCAG (Web Content Accessibility Guidelines) 2.0
PROS:
• Actualiza as regras de acessibilidade p...
Níveis de Acessibilidade




                           9
Níveis de Acessibilidade


Validação automá'ca*:
http://tawdis.net/




* Os validadores automá'cos ainda usam o WCAG 1.0 ...
Exemplos Práticos

 Principais problemas de
 acessibilidade e como os
 evitar/corrigir




11
Uso de tabelas para layouts

As tabelas foram criadas para mostrar dados tabulares e não 
para fazer layouts

• Tabelas de...
Uso de tabelas para layouts




                              13
Uso de tabelas para layouts




                              14
Uso de tabelas para layouts

<table cellpadding=quot;0quot; cellspacing=quot;0quot; id=quot;main_menuquot; style=quot;quot...
Uso de tabelas para layouts


Subs'tuir as tabelas por blocos de informação mais lógicos

<div id=quot;main_menuquot;>
	  ...
Semântica dos Conteúdos


Um website deve ser escrito como se fosse um Documento

• Os cabeçalhos (h1, h2, h3), parágrafos...
Semântica dos Conteúdos




                          18
Semântica dos Conteúdos

                          H1
          H2

                     P
                UL




        ...
Semântica dos Conteúdos




                          19
Semântica dos Conteúdos




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

Os conteúdos devem fazer sen'do quando são lidos 
(ex: screen reader)
• <strong> = carregado     ...
Texto alternativo nas imagens


As imagens devem ter sempre o atributo alt

• As imagens que forneçam algum significado ao ...
Texto alternativo nas imagens


Não abusar do alt!

• O texto alt deve ser curto e sucinto, e não deve conter mais informa...
Frames


Evitar o uso de <frames>

• Caso seja mesmo necessário usar frames, cada uma deve ter um dtulo 
  associado de mo...
Frames


Se o browser não suportar <frames>

• Fornecer um método alterna'vo para chegar aos conteúdos através da 
  tag <...
Frames


E as <iframes>?

• As <iframes> não têm tantos problemas de acessibilidade como as 
  <frames> mas também é neces...
Formulários


Atribuir uma <label> a cada campo do formulário

• As <label> permitem relacionar o texto com o campo do for...
Formulários

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

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


Ordenação da tabulação

• Podemos definir a ordem como determinados campos serão 
  seleccionados no caso do ...
Formulários


Não abusar da tabulação!

• Esta tabulação pode ser uma boa ideia para páginas de formulários 
  extensos ou...
Formulários


Iden'ficação dos campos obrigatórios

• A informação de que o campo é obrigatório deve estar dentro do <label...
Formulários




<div>
	   <label for=quot;unamequot;>Username<em>*</em></label>
	   <input id=quot;unamequot; type=quot;te...
Formulários




<div>
	   <label for=quot;unamequot;>Username<em>*</em></label>
	   <input id=quot;unamequot; type=quot;te...
Formulários
                                     form div {
                           	     	     	 position: relative;
 ...
Formulários


O mesmo deve acontecer para as mensagens de erro

<div>
    <label for=quot;unamequot;>Username<em>não pode ...
Formulários


Agrupar campos

• Através da criação de <fieldset> podemos agrupar conjuntos de campos.

• Desta forma simpli...
Formulários

              <fieldset>
              
   <legend>Título do grupo</legend>
              	
              	   ...
Contraste de cores


Contraste entre o texto e a cor de fundo

Contraste entre o texto e a cor de fundo

Contraste entre o...
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 t...
Contraste de cores




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

Importante testar quando usamos a cor para fornecer algum 
'po de informação

• Legendas de gráficos (usando có...
SAPO.pt ‐ Visão Normal




                         40
SAPO.pt ‐ Deuteranopia (vermelho)




                  Afecta 5% das pessoas do sexo masculino.   41
SAPO.pt ‐ Protanopia (verde)




                  Afecta 2,5% das pessoas do sexo masculino.   42
SAPO.pt ‐ Tritanopia (azul)




                   Afecta 0,5% das pessoas do sexo masculino.   43
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...
Navegação com o teclado

• :hover ‐ quando o rato passa por cima

• :visited ‐ quando já visitámos este link

• :acBve ‐ ú...
Links devem fazer sentido fora do contexto

• Muitas vezes os u'lizadores de screen readers ac'vam uma opção para 
  ler a...
Tamanho do texto

• Não usar texto demasiado pequeno.

• Teste: Tentar ler o texto da página afastado cerca de 1 metro do ...
Tamanho do texto




                   48
Tamanho do texto

• Usar um espaçamento entre linhas nunca inferior a metade da altura do 
  texto para facilitar a leitur...
Fornecer atalhos para os conteúdos

• Antes dos menus, devemos fornecer um link para saltar directamente 
  para os conteú...
Fornecer atalhos para os conteúdos




                                     51
Fornecer atalhos para os conteúdos

• O link no topo redirecciona para o bloco que contém os conteúdos

 <body>
 
  <div i...
Fornecer atalhos para os conteúdos

• Há quem prefira esconder o link para que apenas fique visível aos 
  u'lizadores com s...
Fornecer atalhos para os conteúdos

• Há quem prefira esconder o link para que apenas fique visível aos 
  u'lizadores com s...
Fornecer atalhos para os conteúdos

• Há quem prefira esconder o link para que apenas fique visível aos 
  u'lizadores com s...
Javascript não obstrutivo

• Quando for usado Javascript, tentar mantê‐lo fora do código HTML

• Fornecer uma versão básic...
Javascript não obstrutivo

• Em vez de:
  <a href=quot;#quot; onclick=quot;javascript:abrePagina(‘whatever’)quot;>Link par...
Javascript não obstrutivo

  <a class=”link” href=”pagina.html”>Link para uma página</a>


• Ficheiro Javascript à parte:
...
AJAX e Acessibilidade


Javascript também pode ajudar a melhorar a acessibilidade

• Caixas de texto com sugestão automá'c...
AJAX e Acessibilidade


Javascript também pode ajudar a melhorar a acessibilidade

• Sliders e elementos drag&drop podem s...
AJAX e Acessibilidade

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

• Nem todos os u'lizadores usam...
Acessibilidade Web

 Vamos tornar a Internet mais
 fácil para todos




60
Obrigado pela vossa
                      ivogomes@co.sapo.pt
           atenção!
http://www.ivogomes.com/apresentacoes/
                                         ivogomes@co.sapo.pt
acessibilidade-web.pdf
Upcoming SlideShare
Loading in...5
×

Acessibilidade Web

1,980

Published on

Acessibilidade Web.

Níveis de acessibilidade, boas práticas, testes e processos manuais e automáticos de verificação.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,980
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
123
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Acessibilidade Web"

  1. 1. Acessibilidade Web Ivo Gomes 1
  2. 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. 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. 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. 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. 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. 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. 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. 9. Níveis de Acessibilidade 9
  10. 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. 11. Exemplos Práticos Principais problemas de acessibilidade e como os evitar/corrigir 11
  12. 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. 13. Uso de tabelas para layouts 13
  14. 14. Uso de tabelas para layouts 14
  15. 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. 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. 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. 18. Semântica dos Conteúdos 18
  19. 19. Semântica dos Conteúdos H1 H2 P UL 18
  20. 20. Semântica dos Conteúdos 19
  21. 21. Semântica dos Conteúdos Qual é a nodcia principal? 19
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 39. Formulários <fieldset> <legend>Título do grupo</legend> (...) </fieldset> 35
  40. 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. 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. 42. Contraste de cores http://webaim.org/resources/contrastchecker/ 38
  43. 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. 44. SAPO.pt ‐ Visão Normal 40
  45. 45. SAPO.pt ‐ Deuteranopia (vermelho) Afecta 5% das pessoas do sexo masculino. 41
  46. 46. SAPO.pt ‐ Protanopia (verde) Afecta 2,5% das pessoas do sexo masculino. 42
  47. 47. SAPO.pt ‐ Tritanopia (azul) Afecta 0,5% das pessoas do sexo masculino. 43
  48. 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. 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. 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. 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. 52. Tamanho do texto 48
  53. 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. 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. 55. Fornecer atalhos para os conteúdos 51
  56. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 66. Acessibilidade Web Vamos tornar a Internet mais fácil para todos 60
  67. 67. Obrigado pela vossa ivogomes@co.sapo.pt atenção!
  68. 68. http://www.ivogomes.com/apresentacoes/ ivogomes@co.sapo.pt acessibilidade-web.pdf
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×