Acessi bilidade  Horácio Soares horacio.soares@acessodigital.net  55 (21) 9925-5404 @ horaciosoares Edted Março 2010
Acessi bilidade  para  quem?
Lêda, sem visão... Utilizando uma mesa tátil acessível
Lucas, com baixa visão utilizando o software ampliador de tela.
Bernardo, designer e daltônico
Ok, então acessibilidade é para pessoas com deficiência visual, certo?
João,  tetraplégico João (foto de  Maíra Soares   )
João Henriques   deficiente motor utiliza o mouse  com dificuldade.  (  www.euroacessibilidade.com  )
Eric interagindo através de  teclado expandido  -  Funlar – Rio (nov/2006).
Deficientes auditivos não oralizados têm dificuldades com o português.  Chapeuzinho Vermelho em português e na língua de s...
Vídeo Video Acessibilidade na Web: Custo ou Benefício? Download: http://acessodigital.net/video.html Videolog: http://vide...
Certo...acessibilidade na Web serve para pessoas que possuem alguma deficiência, certo ?
Pedro e Laura com dispositivos móveis com acesso a Internet. Pedro olhando para seu smartphone e Laura com uma cara desesp...
Gabriel, linguagem em desenvolvimento...  Gabriel compenetrado, olhando para o  monitor e clicando com o mouse.  Agora ele...
Calvin, pouca experiência e  medo do computador Homem com muito medo olhando por  cima de um notebook.
Marta e suas amigas…
Max, com tendinite, usando o mouse com a mão trocada. Homem com expressão de desespero, usando o mouse com a mão esquerda
Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
E finalmente,  o bilionário cego!!! Cifrão desenhado com  moedas douradas
Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em texto. Dilbert fazendo parte do logotipo do Google e ...
Acessibilidade, quais são os custos?
<ul><li>Curva de aprendizagem </li></ul><ul><li>Alto custo no redesign </li></ul><ul><li>Baixo em novos projetos </li></ul...
E os benefícios?
Possibilidade de atingir 100% do público alvo;
Atender melhor todas as pessoas
Mas normalmente o tratamento que recebemos é...
Quando podemos ser surpreendidos Design universal:  uma solução para todos
Homem de terno comemorando Fidelizar clientes
Mais fácil de usar e aprender
Uma mão com laço  no dedo indicador Conformidade com o decreto de lei  Decreto nº 5.296   (dez/04) e com a convenção da ON...
Concorrer Portal Petrobras: projetos de:  Portabilidade e Acessibilidade
Proteção contra processos pela falta da acessibilidade
Visualizar os benefícios  da acessibilidade Manutenção mais rápida e barata, melhor performance…
Valorização da  Diversidade e Responsabilidade Social. Mãos entrelaçadas
Maior visibilidade pelos  sistemas de busca;
Mulher com notebook  em sinal de ok Vantagem competitiva
Melhoria da qualidade. Mãe e filha felizes na praia dando uma estrela
Como anda a acessibilidade digital no Brasil? Motivação  pelo  decreto de lei 5296
http://www.flickr.com/photos/alltheaces/67904915/ Porquinho rosa e sorridente de pelúcia Acessibilidade aplicada por algum...
http://www.flickr.com/photos/melmoththewanderer/31029375/ Fucinho de um porco de verdade... Resultado da acessibilidade de...
Resultado: acessibilidade para inglês ver.
 
Acessibilidade para inglês ver...
Portal Brasil
 
Portal Brasil, pra quem? Quem vai utilizar? Quais são os serviços disponíveis?
produtos pessoas contexto
149Kb
 
 
Janela   Quebrada Teoria das Janelas Quebradas aplicada à web http://fatorw.com/2007/06/27/teoria-das-janelas-quebradas/
 
<li class=&quot;last-child&quot;>  <a href=&quot;http…&quot; class=&quot;rated...&quot; title=&quot;Excelente&quot; >   ex...
Um bom site, é um site bem testado… Vídeo
Barreiras Técnicas e Culturais: •  Quando uma organização quer aplicar acessibilidade, há três barreiras a vencer: 1 O que...
Acessibilidade?
Acessibilidade = Técnicas de acessibilidade
<ul><li>WCAG Web Content Accessibility Guidelines </li></ul><ul><li>   WCAG 1.0 – 05 de maio de 1999  http://www.utad.pt/...
Acessibilidade = Técnicas de acessibilidade   +   Web Standards
 
Acessibilidade = Técnicas de acessibilidade   +   Web Standards  +  Usabilidade
<ul><li>Produto: banana </li></ul>
<ul><li>Facilidade de aprendizagem </li></ul><ul><li>Capacidade com que o  usuário começa a interagir rapidamente com o si...
http://www.flickr.com/photos/meatballsub/3456803850/   Eficiência de uso Grau de produtividade atingido pelo usuário depoi...
<ul><li>Eficiência </li></ul><ul><li>de uso </li></ul>http://www.flickr.com/photos/arkworld/472578586/
<ul><li>Facilidade de memorização </li></ul><ul><li>Retenção, capacidade do usuário de voltar a utilizar o sistema após ce...
<ul><li>Baixa taxa de erros </li></ul><ul><li>Medida do quanto o usuário pode ser induzido ao erro pelo sistema e o quanto...
Satisfação Subjetiva   Medida do quanto o usuário se sente feliz de estar utilizando o sistema.
Acessibilidade = Técnicas de acessibilidade   +   Web Standards  +  Usabilidade +  Conteúdo
Escrever é a arte de  cortar palavras
104 PALAVRAS: O questionário a seguir é destinado a colher informações que nos ajudarão a melhorar o site e adequá-lo às s...
Acessibilidade = Técnicas de acessibilidade   +   Web Standards  +  Usabilidade +  Conteúdo +  AI
Pergunte aos clientes de um restaurante o que eles preferem:    um cardápio repleto de opções    ou um com poucas altern...
Exemplo de um cardápio com muitas opções
<ul><li>Desafio: Como tratar o excesso de informação? </li></ul>
Na busca de soluções para os problemas, o que maioria faz?
Copia e cola quase tudo...
Resultado: replicamos tudo que está por aí sem pensar... Alguns exemplos:
Código de barras
 
CAPTCHA
Captcha  (solução inacessível e insegura) ( http://www.webvisum.com/en/main/download )
Menu DropDown
 
Usamos o flash como se todos tivessem acesso a ele...
 
Clique aqui!
“ Clique aqui”, “Saiba mais”, “veja Mais”… 41.700.000 respostas para “ clique aqui ” no Google.
Site da Itautec  http://www.itautec.com.br  (acesso em setembro 2009)
Mas por que?  Porque não temos tempo, porque somos reativos e dá muito trabalho…
Existem três grandes fontes de oportunidades:
1- Fornecer algo escasso
2- Fornecer um novo  produto ou serviço.
3 - Fornecer, de maneira nova ou melhor,  um produto ou serviço existente .
Obrigado!  Horácio Soares h oracio.soares@acessodigital.net  55 (21) 9925-5404 @ horaciosoares Video Acessibilidade na Web...
Upcoming SlideShare
Loading in...5
×

EDTED 2010 - Acessibilidade na Web

9,833

Published on

Apresentação sobre acessiblidade na web no EDTED Rio de Janeiro - março de 2010

Published in: Design, Technology
4 Comments
19 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,833
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
219
Comments
4
Likes
19
Embeds 0
No embeds

No notes for slide
  • É garantir que a informação esteja disponível e acessível 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.
  • Teoria das Janelas Quebradas aplicada à web Fator W – Walmar A ndrade http://fatorw.com/2007/06/27/teoria-das-janelas-quebradas/
  • Teoria das Janelas Quebradas aplicada à web Fator W – Walmar A ndrade http://fatorw.com/2007/06/27/teoria-das-janelas-quebradas/
  • Teoria das Janelas Quebradas aplicada à web Fator W – Walmar A ndrade http://fatorw.com/2007/06/27/teoria-das-janelas-quebradas/
  • É garantir que a informação esteja disponível e acessível 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.
  • É garantir que a informação esteja disponível e acessível 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.
  • É garantir que a informação esteja disponível e acessível 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.
  • EDTED 2010 - Acessibilidade na Web

    1. 1. Acessi bilidade Horácio Soares horacio.soares@acessodigital.net 55 (21) 9925-5404 @ horaciosoares Edted Março 2010
    2. 2. Acessi bilidade para quem?
    3. 3. Lêda, sem visão... Utilizando uma mesa tátil acessível
    4. 4. Lucas, com baixa visão utilizando o software ampliador de tela.
    5. 5. Bernardo, designer e daltônico
    6. 6. Ok, então acessibilidade é para pessoas com deficiência visual, certo?
    7. 7. João, tetraplégico João (foto de Maíra Soares )
    8. 8. João Henriques deficiente motor utiliza o mouse com dificuldade. ( www.euroacessibilidade.com )
    9. 9. Eric interagindo através de teclado expandido - Funlar – Rio (nov/2006).
    10. 10. Deficientes auditivos não oralizados têm dificuldades com o português. Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)
    11. 11. Vídeo Video Acessibilidade na Web: Custo ou Benefício? Download: http://acessodigital.net/video.html Videolog: http://videolog.uol.com.br/video.php?id=230205
    12. 12. Certo...acessibilidade na Web serve para pessoas que possuem alguma deficiência, certo ?
    13. 13. Pedro e Laura com dispositivos móveis com acesso a Internet. Pedro olhando para seu smartphone e Laura com uma cara desesperada pera seu celular.
    14. 14. Gabriel, linguagem em desenvolvimento... Gabriel compenetrado, olhando para o monitor e clicando com o mouse. Agora ele está olhando e brincando como teclado.
    15. 15. Calvin, pouca experiência e medo do computador Homem com muito medo olhando por cima de um notebook.
    16. 16. Marta e suas amigas…
    17. 17. Max, com tendinite, usando o mouse com a mão trocada. Homem com expressão de desespero, usando o mouse com a mão esquerda
    18. 18. Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
    19. 19. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
    20. 20. Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em texto. Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.
    21. 21. Acessibilidade, quais são os custos?
    22. 22. <ul><li>Curva de aprendizagem </li></ul><ul><li>Alto custo no redesign </li></ul><ul><li>Baixo em novos projetos </li></ul><ul><li>Diminui com tempo </li></ul><ul><li>Validação </li></ul><ul><li>Manutenção </li></ul><ul><li>Melhoria contínua </li></ul><ul><li>Mudança de cultura </li></ul>
    23. 23. E os benefícios?
    24. 24. Possibilidade de atingir 100% do público alvo;
    25. 25. Atender melhor todas as pessoas
    26. 26. Mas normalmente o tratamento que recebemos é...
    27. 27. Quando podemos ser surpreendidos Design universal: uma solução para todos
    28. 28. Homem de terno comemorando Fidelizar clientes
    29. 29. Mais fácil de usar e aprender
    30. 30. Uma mão com laço no dedo indicador Conformidade com o decreto de lei Decreto nº 5.296 (dez/04) e com a convenção da ONU que ganhou força de lei Decreto 6949 (ago/09) ;
    31. 31. Concorrer Portal Petrobras: projetos de: Portabilidade e Acessibilidade
    32. 32. Proteção contra processos pela falta da acessibilidade
    33. 33. Visualizar os benefícios da acessibilidade Manutenção mais rápida e barata, melhor performance…
    34. 34. Valorização da Diversidade e Responsabilidade Social. Mãos entrelaçadas
    35. 35. Maior visibilidade pelos sistemas de busca;
    36. 36. Mulher com notebook em sinal de ok Vantagem competitiva
    37. 37. Melhoria da qualidade. Mãe e filha felizes na praia dando uma estrela
    38. 38. Como anda a acessibilidade digital no Brasil? Motivação pelo decreto de lei 5296
    39. 39. http://www.flickr.com/photos/alltheaces/67904915/ Porquinho rosa e sorridente de pelúcia Acessibilidade aplicada por algumas empresas brasileiras.
    40. 40. http://www.flickr.com/photos/melmoththewanderer/31029375/ Fucinho de um porco de verdade... Resultado da acessibilidade de alguns sites que receberam apenas uma camada de maquiagem para se adequarem ao decreto lei de 5296.
    41. 41. Resultado: acessibilidade para inglês ver.
    42. 43. Acessibilidade para inglês ver...
    43. 44. Portal Brasil
    44. 46. Portal Brasil, pra quem? Quem vai utilizar? Quais são os serviços disponíveis?
    45. 47. produtos pessoas contexto
    46. 48. 149Kb
    47. 51. Janela Quebrada Teoria das Janelas Quebradas aplicada à web http://fatorw.com/2007/06/27/teoria-das-janelas-quebradas/
    48. 53. <li class=&quot;last-child&quot;> <a href=&quot;http…&quot; class=&quot;rated...&quot; title=&quot;Excelente&quot; > excellent </a> </li>
    49. 54. Um bom site, é um site bem testado… Vídeo
    50. 55. Barreiras Técnicas e Culturais: • Quando uma organização quer aplicar acessibilidade, há três barreiras a vencer: 1 O que é, para que serve e o que ganhamos com isso...Mitos 2 Eu não sei como implementar acessibilidade 3 Como disseminar o conhecimento e quem irá manter e validar a acessibilidade
    51. 56. Acessibilidade?
    52. 57. Acessibilidade = Técnicas de acessibilidade
    53. 58. <ul><li>WCAG Web Content Accessibility Guidelines </li></ul><ul><li> WCAG 1.0 – 05 de maio de 1999 http://www.utad.pt/wai/wai-pageauth.html </li></ul><ul><li> WCAG 2.0 – 11 de dezembro de 2008 http://www.ilearn.com.br/TR/WCAG20/ </li></ul><ul><li> WCAG Samurai </li></ul>Recomendações para acessibilidade do conteúdo da Web 1.0 e 2.0 do W3C
    54. 59. Acessibilidade = Técnicas de acessibilidade + Web Standards
    55. 61. Acessibilidade = Técnicas de acessibilidade + Web Standards + Usabilidade
    56. 62. <ul><li>Produto: banana </li></ul>
    57. 63. <ul><li>Facilidade de aprendizagem </li></ul><ul><li>Capacidade com que o usuário começa a interagir rapidamente com o sistema logo na primeira vez que o utiliza . </li></ul>http://www.flickr.com/photos/arkworld/472578586/
    58. 64. http://www.flickr.com/photos/meatballsub/3456803850/ Eficiência de uso Grau de produtividade atingido pelo usuário depois que aprendeu a utilizar o sistema.
    59. 65. <ul><li>Eficiência </li></ul><ul><li>de uso </li></ul>http://www.flickr.com/photos/arkworld/472578586/
    60. 66. <ul><li>Facilidade de memorização </li></ul><ul><li>Retenção, capacidade do usuário de voltar a utilizar o sistema após certo tempo sem precisar aprendê-lo novamente. </li></ul>http://www.flickr.com/photos/sashala/316866777/
    61. 67. <ul><li>Baixa taxa de erros </li></ul><ul><li>Medida do quanto o usuário pode ser induzido ao erro pelo sistema e o quanto pode se recuperar do mesmo . </li></ul>http://www.flickr.com/photos/kalimistuk/2226314453/
    62. 68. Satisfação Subjetiva Medida do quanto o usuário se sente feliz de estar utilizando o sistema.
    63. 69. Acessibilidade = Técnicas de acessibilidade + Web Standards + Usabilidade + Conteúdo
    64. 70. Escrever é a arte de cortar palavras
    65. 71. 104 PALAVRAS: O questionário a seguir é destinado a colher informações que nos ajudarão a melhorar o site e adequá-lo às suas necessidades. Por favor, selecione suas respostas nos menus suspensos e nos botões de rádio abaixo. Você levará dois ou três minutos para preencher o questionário. No fim deste formulário, você pode optar por deixar seu nome, endereço, e número de telefone. Se você deixar seu nome e número, poderá ser contatado para participar de um estudo destinado a nos ajudar a melhorar este site. Se você tiver comentários ou interesses que precisem de resposta, por favor, contate o Serviço de Atendimento ao Cliente. 47 PALAVRAS: Por favor, ajude-nos a melhorar este site, respondendo a estas questões. Levará apenas 2 ou 3 minutos para completar esta avaliação. Nota: Se você tiver comentários ou interesses que necessitem de uma resposta, não use este formulário. Em vez disso, contate o Atendimento ao Cliente. Omita palavras desnecessárias Livro: Não me faça pensar – Autor Steve Krug ( http://sensible.com )
    66. 72. Acessibilidade = Técnicas de acessibilidade + Web Standards + Usabilidade + Conteúdo + AI
    67. 73. Pergunte aos clientes de um restaurante o que eles preferem:  um cardápio repleto de opções  ou um com poucas alternativas
    68. 74. Exemplo de um cardápio com muitas opções
    69. 75. <ul><li>Desafio: Como tratar o excesso de informação? </li></ul>
    70. 76. Na busca de soluções para os problemas, o que maioria faz?
    71. 77. Copia e cola quase tudo...
    72. 78. Resultado: replicamos tudo que está por aí sem pensar... Alguns exemplos:
    73. 79. Código de barras
    74. 81. CAPTCHA
    75. 82. Captcha (solução inacessível e insegura) ( http://www.webvisum.com/en/main/download )
    76. 83. Menu DropDown
    77. 85. Usamos o flash como se todos tivessem acesso a ele...
    78. 87. Clique aqui!
    79. 88. “ Clique aqui”, “Saiba mais”, “veja Mais”… 41.700.000 respostas para “ clique aqui ” no Google.
    80. 89. Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)
    81. 90. Mas por que? Porque não temos tempo, porque somos reativos e dá muito trabalho…
    82. 91. Existem três grandes fontes de oportunidades:
    83. 92. 1- Fornecer algo escasso
    84. 93. 2- Fornecer um novo produto ou serviço.
    85. 94. 3 - Fornecer, de maneira nova ou melhor, um produto ou serviço existente .
    86. 95. Obrigado! Horácio Soares h oracio.soares@acessodigital.net 55 (21) 9925-5404 @ horaciosoares Video Acessibilidade na Web: Custo ou Benefício? http://videolog.uol.com.br/video.php?id=230205
    1. A particular slide catching your eye?

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

    ×