Your SlideShare is downloading. ×
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Acessibilidade Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Acessibilidade Web

1,962

Published on

Acessibilidade Web. …

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,962
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
122
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×