Your SlideShare is downloading. ×
0
 
<ul><li>Formado em Sistemas para Internet (IFPB) ‏ </li></ul><ul><li>Analista de Sistemas, Dynavideo </li></ul><ul><ul><li...
<ul><li>O que é acessibilidade? </li></ul><ul><li>Principais Falhas em aplicações Web </li></ul><ul><li>Padrões Web - WCAG...
ACESSIBILIDADE
<ul><li>Segundo o Aurélio, Acessibilidade  (Lat. accessibilitate), s.f. qualidade de ser acessível; facilidade na aproxima...
<ul><li>“ É garantir que seu trabalho esteja disponível e acessível via web a qualquer hora, local, ambiente, dispositivo ...
“ O poder da Web está em sua universalidade.” ACESSIBILIDADE NA WEB? (Tim Bernes-Lee – Criador da WEB) ‏
QUEM PRECISA? Juca, sem visão Mandy, sem visão e braços
QUEM PRECISA? Jeff, dificuldades motoras Bruno, paralisia cerebral
QUEM PRECISA? <ul><li>Lucas, baixa visão </li></ul><ul><li>Anne, baixa visão e dificuldades motoras </li></ul>
QUEM PRECISA? Jack e Lara com dispositivos limitados
QUEM PRECISA? <ul><li>Max, inseguro e com pouca experiência </li></ul><ul><li>Crianças, linguagem em desenvolvimento </li>...
QUEM PRECISA? <ul><li>Pessoas com deficiências físicas ou motoras </li></ul><ul><li>Pessoas  com dificuldades cognitivas <...
QUEM PRECISA? Google, bilionário cego!!!
E POR QUE NÃO DEVEMOS EXCLUIR ESTAS PESSOAS?
<ul><ul><li>Desperdício de tempo </li></ul></ul><ul><ul><li>Desperdício de recursos humanos </li></ul></ul><ul><ul><li>Des...
<ul><li>180 milhões de habitantes </li></ul><ul><li>15 % da população brasileira tem algum tipo de deficiência (25 milhões...
<ul><ul><li>PRINCIPAIS  </li></ul></ul><ul><ul><li>FALHAS DOS DESENVOLVEDORES </li></ul></ul>
PRINCIPAIS FALHAS <ul><ul><li>1) Campos sem descrição </li></ul></ul><ul><ul><li>Ao receber o foco, a descrição do campo é...
PRINCIPAIS FALHAS <ul><ul><li>2) Menus inacessíveis  </li></ul></ul><ul><ul><li>Menus drop-down cujo os sub-ítens não são ...
PRINCIPAIS FALHAS <ul><ul><li>3) Elementos Antissemânticos </li></ul></ul><div id=“titulo”>TITULO</div> <p><strong>Lista d...
PRINCIPAIS FALHAS <ul><ul><li>3) Elementos Antissemânticos </li></ul></ul><div id=“body”> <div id=“content”> <div id=“menu...
PRINCIPAIS FALHAS <ul><ul><li>4) Não se prevenir contra remoção acidental de dados </li></ul></ul><ul><ul><li>Soluções: Pr...
PRINCIPAIS FALHAS <ul><ul><li>5) Janelas pop-up </li></ul></ul><ul><ul><li>Abre uma nova janela do browser inesperadamente...
PRINCIPAIS FALHAS <ul><ul><li>6) Texto sem contraste com o plano de fundo </li></ul></ul>
PRINCIPAIS FALHAS <ul><ul><li>7) Sons que iniciam automaticamente ou que não podem ser parados </li></ul></ul><ul><ul><li>...
PRINCIPAIS FALHAS <ul><ul><li>8) Notícias rolantes rápidas, sem pausa, não dando tempo do usuário ler. </li></ul></ul>Algu...
PRINCIPAIS FALHAS <ul><ul><li>9) Sessão com período curto de duração </li></ul></ul><ul><ul><li>Criar mecanismo de recuper...
PRINCIPAIS FALHAS <ul><ul><li>10) Fontes pequenas demais </li></ul></ul><ul><ul><li>Dificulta a leitura  </li></ul></ul><u...
PRINCIPAIS FALHAS <ul><ul><li>11) Captcha </li></ul></ul><ul><ul><li>Captchas são imagens que não podem possuir descrição,...
PRINCIPAIS FALHAS <ul><ul><li>12) Uso errado das cores ou posicionamento de botões ou campos </li></ul></ul><ul><ul><li>Co...
PRINCIPAIS FALHAS <ul><ul><li>13) Obstáculos ao conteúdo </li></ul></ul><ul><ul><li>Para chegar ao conteúdo principal util...
PRINCIPAIS FALHAS <ul><ul><li>14) Formulários ineficientes </li></ul></ul><ul><ul><li>Formulários sem validação, pouco int...
PRINCIPAIS FALHAS <ul><ul><li>15) Sites totalmente em Flash </li></ul></ul><ul><ul><li>Totalmente inacessível para usuário...
Acessibilidade: Custo ou benefício?
WCAG 2.0
WCAG 2.0 <ul><li>Diretrizes de Acessibilidade para o Conteúdo da Web 2.0 </li></ul><ul><li>Definem a forma de como tornar ...
<ul><li>Estas diretrizes também facilitam a utilização do conteúdo da Web por pessoas mais velhas, cujas capacidades estão...
<ul><li>No topo, quatro princípios constituem a acessibilidade na web: </li></ul><ul><li>Perceptível,  </li></ul><ul><li>o...
Perceptível:   Informação e componentes da interface do usuário devem ser apresentados aos usuários de um jeito que eles p...
<ul><li>Logo abaixo dos princípios encontram-se as diretrizes. </li></ul><ul><li>As 12 diretrizes apresentam regras básica...
<ul><ul><li>1.PERCEPTÍVEL   “Informação e componentes da interface do usuário devem ser apresentados aos usuários de forma...
<ul><li>1.1 Prover alternativas textuais para qualquer conteúdo não-textual </li></ul><ul><li>Todo o conteúdo não-textual ...
<ul><li>1.2 Fornecer alternativas para multimídia baseada no tempo. </li></ul><ul><li>Versão em texto descrevendo mídia </...
<ul><li>1.3 Adaptável: Criar conteúdos que possam ser apresentados de diferentes maneiras, sem perder informação ou estrut...
<ul><li>1.4 Facilitar a audição e a visualização de conteúdos aos usuários, incluindo a separação do primeiro plano e do p...
<ul><ul><li>OPERÁVEL </li></ul></ul><ul><ul><li>“ Componentes da interface do usuário e navegação devem ser operáveis.” </...
2.1 Fazer com que toda a funcionalidade fique disponível a partir do teclado.  <ul><li>Toda funcionalidade do conteúdo dev...
<ul><li>2.2 Fornecer tempo suficiente aos utilizadores para lerem e utilizarem o conteúdo.  </li></ul><ul><li>Permitir aju...
<ul><li>2.3 Não criar conteúdo de uma forma conhecida por causar ataques epilépticos </li></ul><ul><li>Páginas web não dev...
<ul><li>2.4 Fornecer formas de ajudar os usuário a navegar, localizar conteúdos e determinar o local em que se encontram. ...
<ul><li>2.4 Fornecer formas de ajudar os usuário a navegar, localizar conteúdos e determinar o local em que se encontram. ...
<ul><ul><li>COMPREENSÍVEL </li></ul></ul><ul><ul><li>“ Informação e operações da interface do usuário devem ser compreensí...
<ul><li>3.1 Tornar o conteúdo de texto legível e compreensível. </li></ul><ul><li>Identificar definições específicas de pa...
<ul><li>3.2 Fazer com que as páginas Web surjam e funcionem de forma previsível </li></ul><ul><li>Não iniciar nenhuma ação...
<ul><li>3.3 Ajudar os usuários a evitar e corrigir erros. </li></ul><ul><li>Identificar os erros de forma clara na tela </...
<ul><li>3.3 Ajudar os usuários a evitar e corrigir erros. </li></ul><ul><li>Prevenção de erro: </li></ul><ul><li>Reversão:...
<ul><ul><li>ROBUSTO </li></ul></ul><ul><ul><li>“ Conteúdo deve ser robusto suficiente para que possa ser interpretado por ...
“ Tecnologia Assistiva (ou de apoio) é um  software  ou  hardware  projetado para apoiar pessoas com deficiência em ativid...
Switch Mouse Teclado virtual do  Windows Ponteira de cabeça Acesso ao computador via voz Sistema Operacional DOSVOX Lente ...
<ul><ul><li>Leitores de Tela: </li></ul></ul><ul><ul><li>Virtual Vision http://www.micropower.com.br/  </li></ul></ul><ul>...
<ul><ul><li>4.1 Maximizar a compatibilidade com atuais e futuros agentes de usuários, incluindo tecnologias de apoio. </li...
AVALIADORES AUTOMÁTICOS <ul><ul><li>Há avaliadores automáticos que se baseiam em padrões: </li></ul></ul><ul><ul><ul><li>h...
<ul><ul><li>Construa sites centrados nos usuários </li></ul></ul><ul><ul><li>Use as recomendações, mas não apenas elas </l...
INTERATIVIDADE <ul><ul><li>Desafios: </li></ul></ul><ul><ul><li>1-  Você seria capaz de navegar num site com as imagens de...
REFERÊNCIAS <ul><ul><li>http://www.w3.org/TR/WCAG20/ </li></ul></ul><ul><ul><li>http://www.w3.org/TR/WCAG20-TECHS/ </li></...
REFERÊNCIAS <ul><ul><li>http://www.w3.org/TR/WCAG20/ </li></ul></ul><ul><ul><li>http://www.w3.org/TR/WCAG20-TECHS/ </li></...
MUITO  OBRIGADO! Contato: [email_address] http://diegopessoa.com
Upcoming SlideShare
Loading in...5
×

Aplicações Web Acessíveis

2,546

Published on

Apresentação realizada no II Encontro PHP-PB, o tema abordado é a criação de aplicações web que sejam acessíveis ao maior número de pessoas. O vídeo apresentado durante a palestra pode ser encontrado no site: http://acessodigital.net/video.html

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,546
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
191
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Aplicações Web Acessíveis"

  1. 2. <ul><li>Formado em Sistemas para Internet (IFPB) ‏ </li></ul><ul><li>Analista de Sistemas, Dynavideo </li></ul><ul><ul><li>Projeto Intercâmbio para Conteúdo de TV Pública </li></ul></ul><ul><li>Pesquisador, NAV - IFPB </li></ul><ul><ul><li>Produção e acessibilização de aplicações educacionais. </li></ul></ul>QUEM SOU?
  2. 3. <ul><li>O que é acessibilidade? </li></ul><ul><li>Principais Falhas em aplicações Web </li></ul><ul><li>Padrões Web - WCAG 2.0 </li></ul><ul><li>Desafio </li></ul><ul><li>Conclusões </li></ul>ÍNDICE
  3. 4. ACESSIBILIDADE
  4. 5. <ul><li>Segundo o Aurélio, Acessibilidade (Lat. accessibilitate), s.f. qualidade de ser acessível; facilidade na aproximação, no trato ou na obtenção. </li></ul><ul><li>Acessível adj. a que se pode chegar facilmente; que fica ao alcance. </li></ul>ACESSIBILIDADE
  5. 6. <ul><li>“ É garantir que seu trabalho esteja disponível e acessível via web a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.” </li></ul>ACESSIBILIDADE NA WEB
  6. 7. “ O poder da Web está em sua universalidade.” ACESSIBILIDADE NA WEB? (Tim Bernes-Lee – Criador da WEB) ‏
  7. 8. QUEM PRECISA? Juca, sem visão Mandy, sem visão e braços
  8. 9. QUEM PRECISA? Jeff, dificuldades motoras Bruno, paralisia cerebral
  9. 10. QUEM PRECISA? <ul><li>Lucas, baixa visão </li></ul><ul><li>Anne, baixa visão e dificuldades motoras </li></ul>
  10. 11. QUEM PRECISA? Jack e Lara com dispositivos limitados
  11. 12. QUEM PRECISA? <ul><li>Max, inseguro e com pouca experiência </li></ul><ul><li>Crianças, linguagem em desenvolvimento </li></ul>
  12. 13. QUEM PRECISA? <ul><li>Pessoas com deficiências físicas ou motoras </li></ul><ul><li>Pessoas com dificuldades cognitivas </li></ul><ul><li>Pessoas idosas </li></ul><ul><li>Pessoas apressadas </li></ul><ul><li>Pessoas cansadas </li></ul><ul><li>O Google (?) ‏ </li></ul><ul><li>Resumindo: Todos </li></ul>
  13. 14. QUEM PRECISA? Google, bilionário cego!!!
  14. 15. E POR QUE NÃO DEVEMOS EXCLUIR ESTAS PESSOAS?
  15. 16. <ul><ul><li>Desperdício de tempo </li></ul></ul><ul><ul><li>Desperdício de recursos humanos </li></ul></ul><ul><ul><li>Desperdício de dinheiro </li></ul></ul><ul><ul><li>Questões éticas </li></ul></ul>E POR QUE NÃO DEVEMOS EXCLUÍ-LAS ?
  16. 17. <ul><li>180 milhões de habitantes </li></ul><ul><li>15 % da população brasileira tem algum tipo de deficiência (25 milhões) ‏ </li></ul><ul><li>20 milhões de pessoas com mais de 65 anos </li></ul><ul><li>Cerca de 7 milhões de pessoas com mais de 65 anos possui alguma deficiência </li></ul><ul><li>Fonte: http://www.ibge.gov.br/home/estatistica/populacao/trabalhoerendimento/pnad2007/brasil/tab1_1.pdf </li></ul>BRASIL – SEGUNDO IBGE
  17. 18. <ul><ul><li>PRINCIPAIS </li></ul></ul><ul><ul><li>FALHAS DOS DESENVOLVEDORES </li></ul></ul>
  18. 19. PRINCIPAIS FALHAS <ul><ul><li>1) Campos sem descrição </li></ul></ul><ul><ul><li>Ao receber o foco, a descrição do campo é apagada </li></ul></ul><ul><ul><li>Leitores de tela não irão conseguir ler a descrição do campo </li></ul></ul>
  19. 20. PRINCIPAIS FALHAS <ul><ul><li>2) Menus inacessíveis </li></ul></ul><ul><ul><li>Menus drop-down cujo os sub-ítens não são ativados via teclado </li></ul></ul><ul><ul><li>Usuários que não possuírem mouse nem irão saber da existência de sub-itens </li></ul></ul><ul><ul><li>Menus formados por imagem sem descrição: </li></ul></ul><ul><ul><li>Usuários de leitores de tela nunca descobrirão quais os itens do menu. </li></ul></ul>
  20. 21. PRINCIPAIS FALHAS <ul><ul><li>3) Elementos Antissemânticos </li></ul></ul><div id=“titulo”>TITULO</div> <p><strong>Lista de Itens: </strong><br /> Item 1<br /> Item 2 <br /> Item 3 <br /> </p> <h1>TITULO</h1> <h2>Lista de Itens:</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3 </li> </ul> <ul><ul><li>- Dificulta leitura de tecnologias assistivas (Ex.: leitor de tela) ‏ </li></ul></ul><ul><ul><li>- Dificulta a leitura de tecnologias de busca </li></ul></ul><ul><ul><li>- Impossibilita diferenciação de elementos </li></ul></ul>
  21. 22. PRINCIPAIS FALHAS <ul><ul><li>3) Elementos Antissemânticos </li></ul></ul><div id=“body”> <div id=“content”> <div id=“menu”> <div class=“item”> <a href=“#”>Item</a> </div> <div class=“item”> <a href=“#”>Item</a> </div> <div class=“item”> <a href=“#”>Item</a> </div></div></div> </div> <body> <div id=“content”> <ul id=“menu”> <li><a href=“#”>Item</a></li> <li><a href=“#”>Item</a></li> <li><a href=“#”>Item</a></li> <li><a href=“#”>Item</a></li> </ul> </div> </body>
  22. 23. PRINCIPAIS FALHAS <ul><ul><li>4) Não se prevenir contra remoção acidental de dados </li></ul></ul><ul><ul><li>Soluções: Prover uma forma de recuperar dados removidos: </li></ul></ul><ul><ul><li>Guardar os dados por um tempo em local temporário antes de removê-lo definitivamente (Ex.: lixeira) ou </li></ul></ul><ul><ul><li>Manter registro de todas ou das mais novas versões alteradas, ficando disponíveis para consulta e restauração a qualquer momento. Estilo wiki e aplicações de controle de código. </li></ul></ul>O sistema deletou meus arquivos!
  23. 24. PRINCIPAIS FALHAS <ul><ul><li>5) Janelas pop-up </li></ul></ul><ul><ul><li>Abre uma nova janela do browser inesperadamente (procure fazer seu site de forma que ele seja previsível) ‏ </li></ul></ul><ul><ul><li>Deixará pessoas que não podem enxergar completamente perdidas (abriu uma nova página? Como eu volto?) ‏ </li></ul></ul>
  24. 25. PRINCIPAIS FALHAS <ul><ul><li>6) Texto sem contraste com o plano de fundo </li></ul></ul>
  25. 26. PRINCIPAIS FALHAS <ul><ul><li>7) Sons que iniciam automaticamente ou que não podem ser parados </li></ul></ul><ul><ul><li>Nem todo mundo que entra no seu site deseja ouvir aquele som, por mais bonito que ele seja; </li></ul></ul><ul><ul><li>Sons que iniciam automaticamente podem dar sustos no usuário, que normalmente, nem imaginam que um som irá iniciar e podem estar com a caixa de som ligada em volume alto acessando no meio da madrugada; </li></ul></ul><ul><ul><li>Regra básica: O usuário deve mandar na aplicação, não a aplicação mandar no usuário. </li></ul></ul>
  26. 27. PRINCIPAIS FALHAS <ul><ul><li>8) Notícias rolantes rápidas, sem pausa, não dando tempo do usuário ler. </li></ul></ul>Alguem para esse negócio?! Não consigo ler!
  27. 28. PRINCIPAIS FALHAS <ul><ul><li>9) Sessão com período curto de duração </li></ul></ul><ul><ul><li>Criar mecanismo de recuperação ao re-autenticar (Garantir que nenhuma informação será perdida) </li></ul></ul><ul><ul><li>Disponibilizar um tempo considerável antes de expirar (Imagine aquele cadastro de 200 campos e quando você clica em “enviar” se depara com: </li></ul></ul>
  28. 29. PRINCIPAIS FALHAS <ul><ul><li>10) Fontes pequenas demais </li></ul></ul><ul><ul><li>Dificulta a leitura </li></ul></ul><ul><ul><li>Impossibilita acesso para pessoas com baixa visão </li></ul></ul><ul><ul><li>Ou até mesmo de pessoas com simples miopia, hipermetropia ou astigmatismo </li></ul></ul><ul><ul><li>Solução: Use fontes em tamanhos de médios (12px) pra cima e utilize barra com opções para aumentar ou diminuir fonte </li></ul></ul>
  29. 30. PRINCIPAIS FALHAS <ul><ul><li>11) Captcha </li></ul></ul><ul><ul><li>Captchas são imagens que não podem possuir descrição, do contrário, não teriam sentido. </li></ul></ul><ul><ul><li>Com isso, ficam inacessíveis a quem não possuir uma visão apurada </li></ul></ul><ul><ul><li>Solução: Ofereça outras alternativas ao usuário. Exemplo: Captcha em áudio. </li></ul></ul>
  30. 31. PRINCIPAIS FALHAS <ul><ul><li>12) Uso errado das cores ou posicionamento de botões ou campos </li></ul></ul><ul><ul><li>Cores ajudam a identificar elementos (verde positivo, vermelho negativo) </li></ul></ul><ul><ul><li>Como a navegação é da esquerda para a direita, deve-se colocar à esquerda os elementos de confirmação e à direita os de cancelamento. </li></ul></ul>
  31. 32. PRINCIPAIS FALHAS <ul><ul><li>13) Obstáculos ao conteúdo </li></ul></ul><ul><ul><li>Para chegar ao conteúdo principal utilizando só o teclado, o usuário precisa passar por todo menu e barras de ferramentas, o que demanda um enorme tempo “tabeando” até chegar à informação principal. </li></ul></ul><ul><ul><li>Solução: simples, coloque um botão “ir para o conteúdo” no topo da página, recebendo o primeiro foco de todos. </li></ul></ul>
  32. 33. PRINCIPAIS FALHAS <ul><ul><li>14) Formulários ineficientes </li></ul></ul><ul><ul><li>Formulários sem validação, pouco intuitivos, com rótulos indescritíveis, sem exemplos de preenchimento, sem seguir uma ordem de tabulação linear. </li></ul></ul><ul><ul><li>Formulários que apagam outros elementos ou executam ações inesperadas sem conhecimento ou autorização do usuário. </li></ul></ul><ul><ul><li>Formulários que não salvam os dados em cache caso o usuário saia da página e volte. </li></ul></ul><ul><ul><li>Solução: Pense no usuário! Facilite a vida dele, não a sua. </li></ul></ul>
  33. 34. PRINCIPAIS FALHAS <ul><ul><li>15) Sites totalmente em Flash </li></ul></ul><ul><ul><li>Totalmente inacessível para usuários de leitores de tela. </li></ul></ul><ul><ul><li>Evite sites totalmente em Flash! Utilize flash para animações, filmes (flv), etc, sempre em conjunto de uma descrição do objeto em formato textual. </li></ul></ul>
  34. 35. Acessibilidade: Custo ou benefício?
  35. 36. WCAG 2.0
  36. 37. WCAG 2.0 <ul><li>Diretrizes de Acessibilidade para o Conteúdo da Web 2.0 </li></ul><ul><li>Definem a forma de como tornar o conteúdo da Web mais acessível a pessoas deficientes. </li></ul><ul><li>Envolve uma vasta gama de deficiências: visuais, auditivas, físicas, de fala, cognitivas, de linguagem, de aprendizagem e neurológicas. </li></ul>
  37. 38. <ul><li>Estas diretrizes também facilitam a utilização do conteúdo da Web por pessoas mais velhas, cujas capacidades estão em constante mudança. </li></ul><ul><li>Facilitam a utilização para os usuários em geral. </li></ul><ul><li>ATENÇÃO: </li></ul><ul><li>Não é possível para abordar completamente as necessidades de pessoas com todos os tipos, graus e combinações de deficiências. </li></ul>WCAG 2.0
  38. 39. <ul><li>No topo, quatro princípios constituem a acessibilidade na web: </li></ul><ul><li>Perceptível, </li></ul><ul><li>operável, </li></ul><ul><li>compreensível </li></ul><ul><li>robusto . </li></ul>WCAG 2.0
  39. 40. Perceptível: Informação e componentes da interface do usuário devem ser apresentados aos usuários de um jeito que eles possam entender. Operável: Componentes da interface do usuário e navegação devem ser operáveis. Compreensível: Informação e operações da interface do usuário devem ser compreensíveis. Robusto: Conteúdo deve ser robusto suficiente para que possa ser interpretado por uma larga faixa de agentes do usuário, incluindo tecnologias assistivas. WCAG 2.0 - PRINCÍPIOS
  40. 41. <ul><li>Logo abaixo dos princípios encontram-se as diretrizes. </li></ul><ul><li>As 12 diretrizes apresentam regras básicas para tornar o conteúdo mais acessível aos usuários com diferentes deficiências. </li></ul>WCAG 2.0 - DIRETRIZES
  41. 42. <ul><ul><li>1.PERCEPTÍVEL “Informação e componentes da interface do usuário devem ser apresentados aos usuários de forma que eles possam entender.” </li></ul></ul>WCAG 2.0 - DIRETRIZES
  42. 43. <ul><li>1.1 Prover alternativas textuais para qualquer conteúdo não-textual </li></ul><ul><li>Todo o conteúdo não-textual que é apresentado ao usuário deve possuir uma alternativa textual que mostra o propósito equivalente. </li></ul><ul><li>Exceto para: </li></ul><ul><li>Controles e Entradas de dados (deve possuir um nome que descreve seu propósito) ‏ </li></ul><ul><li>Mídia Baseada em Tempo (fornecer identificação descritiva) ‏ </li></ul><ul><li>Exercício / Teste (prover identificação descritiva) ‏ </li></ul><ul><li>Decoração / Formatação (ser ignorada pela tecnologia assistiva) ‏ </li></ul>WCAG 2.0 - DIRETRIZES
  43. 44. <ul><li>1.2 Fornecer alternativas para multimídia baseada no tempo. </li></ul><ul><li>Versão em texto descrevendo mídia </li></ul><ul><li>Legendas </li></ul><ul><li>Descrição em áudio estendida </li></ul><ul><li>Linguagens de sinais </li></ul>WCAG 2.0 - DIRETRIZES
  44. 45. <ul><li>1.3 Adaptável: Criar conteúdos que possam ser apresentados de diferentes maneiras, sem perder informação ou estrutura. </li></ul><ul><li>Todas as informações disponíveis também somente em texto; </li></ul><ul><li>Conteúdo não se confia unicamente na característica dos componentes tais como forma, tamanho, localização visual ou som. </li></ul><ul><li>Exemplo: Clique no botão vermelho à direita </li></ul>WCAG 2.0 - DIRETRIZES
  45. 46. <ul><li>1.4 Facilitar a audição e a visualização de conteúdos aos usuários, incluindo a separação do primeiro plano e do plano de fundo. </li></ul><ul><li>Controle de Áudio: Não tocar sons automaticamente, permitir controle do áudio (pausar, parar) e ajuste de volume. </li></ul><ul><li>O texto deve possuir contraste de pelo menos 4.5:1 com o plano de fundo, exceto quando são: textos largos (3:1), campos inativos ou logotipos. (Use ferramentas medidoras de contraste) </li></ul><ul><li>Oferecer opção para aumentar o texto em pelo menos 200% de jeito que não proporcione rolamento horizontal para ler uma linha do texto ocupando tela inteira. </li></ul>WCAG 2.0 - DIRETRIZES
  46. 47. <ul><ul><li>OPERÁVEL </li></ul></ul><ul><ul><li>“ Componentes da interface do usuário e navegação devem ser operáveis.” </li></ul></ul>WCAG 2.0 - DIRETRIZES
  47. 48. 2.1 Fazer com que toda a funcionalidade fique disponível a partir do teclado. <ul><li>Toda funcionalidade do conteúdo deve ser operável através do teclado, teclado sem requisitos específicos de tempo para teclas individuais. </li></ul><ul><li>Nota: Isto não proíbe e não deve desencorajar o uso do mouse ou outros métodos de entrada na adição da operação por teclado. </li></ul>WCAG 2.0 - DIRETRIZES
  48. 49. <ul><li>2.2 Fornecer tempo suficiente aos utilizadores para lerem e utilizarem o conteúdo. </li></ul><ul><li>Permitir ajuste de tempo (desligar, ajustar, estender) </li></ul><ul><li>Exceções: Um evento onde o limite de tempo é essencial e estendê-lo fará com que a atividade seja invalida. </li></ul><ul><li>Cronômetro: Cronômetro não deve ser parte essencial de um evento, exceto para mídia sincronizada ou eventos em tempo real. </li></ul><ul><li>Interrupções: Interrupções podem ser adiadas ou suprimidas pelo usuário, exceto interrupções envolvendo uma emergência. </li></ul>WCAG 2.0 - DIRETRIZES
  49. 50. <ul><li>2.3 Não criar conteúdo de uma forma conhecida por causar ataques epilépticos </li></ul><ul><li>Páginas web não devem conter qualquer flash(piscada) maior do que três vezes. </li></ul>WCAG 2.0 - DIRETRIZES
  50. 51. <ul><li>2.4 Fornecer formas de ajudar os usuário a navegar, localizar conteúdos e determinar o local em que se encontram. </li></ul><ul><li>Driblar obstáculos (opção para saltar direto para conteúdo) </li></ul><ul><li>Colocar títulos nas páginas (diferentes em cada uma) </li></ul><ul><li>Prover uma navegação sequencial </li></ul><ul><li>Deixar clara a finalidade de um link no próprio ou em texto próximo </li></ul>WCAG 2.0 - DIRETRIZES
  51. 52. <ul><li>2.4 Fornecer formas de ajudar os usuário a navegar, localizar conteúdos e determinar o local em que se encontram. </li></ul><ul><li>Utilizar mais de uma maneira para localizar uma seção ou página dentro de um conjunto </li></ul><ul><li>Manter o foco do teclado visível, facilitando a localização </li></ul><ul><li>Dar informações sobre a localização do usuário (Barra de navegação) </li></ul><ul><li>Utilizar cabeçalhos (h1, h2, etc) para melhor organizar conteúdo </li></ul>WCAG 2.0 - DIRETRIZES
  52. 53. <ul><ul><li>COMPREENSÍVEL </li></ul></ul><ul><ul><li>“ Informação e operações da interface do usuário devem ser compreensíveis” </li></ul></ul>WCAG 2.0 - DIRETRIZES
  53. 54. <ul><li>3.1 Tornar o conteúdo de texto legível e compreensível. </li></ul><ul><li>Identificar definições específicas de palavras ou frases restritas ou vulgares, incluindo idiomas e jargões. </li></ul><ul><li>Disponibilizar um mecanismo que Identifique o significado de abreviações </li></ul><ul><li>Identificar a pronúncia específica de palavras onde o significado das palavras, no texto, é ambíguo sem o conhecimento de sua pronúncia </li></ul>WCAG 2.0 - DIRETRIZES
  54. 55. <ul><li>3.2 Fazer com que as páginas Web surjam e funcionem de forma previsível </li></ul><ul><li>Não iniciar nenhuma ação ou processo apenas ao receber foco </li></ul><ul><li>Uma alteração em algum componente não deve causar alterações no contexto, exceto que o usuário seja avisado. </li></ul><ul><li>Exemplo: Um formulário não deve acionar uma ação inesperada, por exemplo, ao ativar ou selecionar outro campo. </li></ul>WCAG 2.0 - DIRETRIZES
  55. 56. <ul><li>3.3 Ajudar os usuários a evitar e corrigir erros. </li></ul><ul><li>Identificar os erros de forma clara na tela </li></ul><ul><li>Disponibilizar rótulos (labels) e instruções nas entradas do usuário </li></ul><ul><li>Sugestões de erro (Informar causas daquele possível erro) </li></ul>WCAG 2.0 - DIRETRIZES
  56. 57. <ul><li>3.3 Ajudar os usuários a evitar e corrigir erros. </li></ul><ul><li>Prevenção de erro: </li></ul><ul><li>Reversão: Submissões são reversíveis; </li></ul><ul><li>Controle: Antes do envio, há uma oportunidade para os usuários confirmarem a ação; </li></ul><ul><li>Exemplo: Tem certeza que deseja remover? </li></ul><ul><li>Confirmação: Um mecanismo é disponível para revisão, confirmação e correção de informações antes de finalizar o evento. </li></ul><ul><li>Disponibilizar uma seção de “ajuda” </li></ul>WCAG 2.0 - DIRETRIZES
  57. 58. <ul><ul><li>ROBUSTO </li></ul></ul><ul><ul><li>“ Conteúdo deve ser robusto suficiente para que possa ser interpretado por uma larga faixa de agentes do usuário, incluindo tecnologias assistivas.” </li></ul></ul>WCAG 2.0 - DIRETRIZES
  58. 59. “ Tecnologia Assistiva (ou de apoio) é um software ou hardware projetado para apoiar pessoas com deficiência em atividades do cotidiano.” (W3C, 1999) www.w3.org WCAG 2.0 - DIRETRIZES
  59. 60. Switch Mouse Teclado virtual do Windows Ponteira de cabeça Acesso ao computador via voz Sistema Operacional DOSVOX Lente de Aumento do Windows
  60. 61. <ul><ul><li>Leitores de Tela: </li></ul></ul><ul><ul><li>Virtual Vision http://www.micropower.com.br/ </li></ul></ul><ul><ul><li>Jaws for Windows http://www.freedomscientific.com/ </li></ul></ul><ul><ul><li>Windows Bridge http://www.synthavoice.on.ca/ </li></ul></ul><ul><ul><li>DOS VOX http://caec.nce.ufrj.br/~dosvox/index.html </li></ul></ul>WCAG 2.0 - DIRETRIZES
  61. 62. <ul><ul><li>4.1 Maximizar a compatibilidade com atuais e futuros agentes de usuários, incluindo tecnologias de apoio. </li></ul></ul><ul><ul><li>No conteúdo implementado usando linguagens de marcação: </li></ul></ul><ul><ul><li>Elementos devem completar o início e fim das tags; </li></ul></ul><ul><ul><li>Elementos devem estar alinhados de acordo com sua especificação; </li></ul></ul><ul><ul><li>Elementos não contêm atributos duplicados e quaisquer IDs são únicos </li></ul></ul>WCAG 2.0 - DIRETRIZES
  62. 63. AVALIADORES AUTOMÁTICOS <ul><ul><li>Há avaliadores automáticos que se baseiam em padrões: </li></ul></ul><ul><ul><ul><li>http://www.ocawa.com/pt/Acessibilidade.htm </li></ul></ul></ul><ul><ul><ul><li>http://www.acessibilidade.net/web/ </li></ul></ul></ul><ul><ul><ul><li>http://www.sidar.org/hera/index.php.pt </li></ul></ul></ul><ul><ul><ul><li>http://validator.w3.org </li></ul></ul></ul><ul><ul><ul><li>http://www.acesso.umic.pt/ </li></ul></ul></ul><ul><ul><ul><li>http://www.dasilva.org.br/ </li></ul></ul></ul>
  63. 64. <ul><ul><li>Construa sites centrados nos usuários </li></ul></ul><ul><ul><li>Use as recomendações, mas não apenas elas </li></ul></ul><ul><ul><li>Use avaliadores automáticos, mas não apenas eles </li></ul></ul><ul><ul><li>Estude os diversos métodos e descubra qual é o mais apropriado para o caso </li></ul></ul><ul><ul><li>1 – Avaliação das necessidades </li></ul></ul><ul><ul><li>2 – Testes de utilização </li></ul></ul><ul><ul><li>3 – Feedback do usuário </li></ul></ul>CONCLUSÕES
  64. 65. INTERATIVIDADE <ul><ul><li>Desafios: </li></ul></ul><ul><ul><li>1- Você seria capaz de navegar num site com as imagens desabilitadas? </li></ul></ul><ul><ul><li>2- Você seria capaz de navegar apenas usando o teclado? </li></ul></ul><ul><ul><li>3- Você seria capaz de acessar um site com o monitor desligado, através do leitor de tela? </li></ul></ul>
  65. 66. REFERÊNCIAS <ul><ul><li>http://www.w3.org/TR/WCAG20/ </li></ul></ul><ul><ul><li>http://www.w3.org/TR/WCAG20-TECHS/ </li></ul></ul><ul><ul><li>Http://acessodigital.net </li></ul></ul><ul><ul><li>MELO, L (2009) - Usabilidade e acessibilidade - novas orientações no uso da tecnologia (NAV / IFPB) </li></ul></ul>
  66. 67. REFERÊNCIAS <ul><ul><li>http://www.w3.org/TR/WCAG20/ </li></ul></ul><ul><ul><li>http://www.w3.org/TR/WCAG20-TECHS/ </li></ul></ul><ul><ul><li>http://acessodigital.net </li></ul></ul><ul><ul><li>MELO, L (2009) - Usabilidade e acessibilidade - novas orientações no uso da tecnologia (NAV / IFPB) </li></ul></ul>
  67. 68. MUITO OBRIGADO! Contato: [email_address] http://diegopessoa.com
  1. A particular slide catching your eye?

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

×