• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Acessibilidade Web
 

Acessibilidade Web

on

  • 3,810 views

Acessibilidade Web.

Acessibilidade Web.

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

Statistics

Views

Total Views
3,810
Views on SlideShare
3,322
Embed Views
488

Actions

Likes
4
Downloads
121
Comments
0

11 Embeds 488

http://wiki.telecom.pt 209
http://developers.blogs.sapo.pt 188
http://www.slideshare.net 27
http://aindacansados.blogspot.com 18
http://aindacansados.blogspot.com.br 18
http://blog.ufpr.br 16
http://cedefes.blogspot.com.br 5
http://cedefes.blogspot.com 3
http://aindacansados.blogspot.pt 2
http://translate.googleusercontent.com 1
http://www.aindacansados.blogspot.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Acessibilidade Web Acessibilidade Web Presentation Transcript

    • Acessibilidade Web Ivo Gomes 1
    • 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
    • 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
    • Níveis de Acessibilidade Segundo o WCAG (Web Content Accessibility Guidelines) 1.0 • Prioridade 1 (A) • Prioridade 2 (AA) • Prioridade 3 (AAA) 4
    • 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
    • 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
    • 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
    • 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
    • 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 como base. 10
    • 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 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
    • 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;> <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
    • 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
    • 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
    • Semântica dos Conteúdos 18
    • Semântica dos Conteúdos H1 H2 P UL 18
    • 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 • <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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 }
    • 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
    • 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
    • Formulários <fieldset> <legend>Título do grupo</legend> (...) </fieldset> 35
    • 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
    • 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
    • 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ódigos de cores) • Secções diferentes do site iden'ficadas por cores diferentes http://colororacle.cartography.ch/ 39
    • 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á 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
    • 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
    • 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
    • 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
    • Tamanho do texto 48
    • 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
    • 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
    • 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 id=”saltar”><a href=”#conteudos”>Saltar o menu</a></div> (...) Menus (...) <div id=”conteudos”> ... ... </div> </body> 52
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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