WAIU - Workshop AI, Acessibilidade e Usabilidade

5,284 views

Published on

Apresentação da Equipe da Acesso Digital ( acessodigital.net ) no WAIU - Workshop de Arquitetura da Informação, Acessibilidade e Usabilidade.

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

No Downloads
Views
Total views
5,284
On SlideShare
0
From Embeds
0
Number of Embeds
176
Actions
Shares
0
Downloads
134
Comments
0
Likes
7
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.
  • WAIU - Workshop AI, Acessibilidade e Usabilidade

    1. 1. Logotipo do Workshop WAIU e da Acesso Digital
    2. 2. Logotipo da Acesso Digital O que é?
    3. 3. Marco Antonio de Queiroz MAQ Logotipo da Bengala Legal Foto do MAQ <ul><li>- Tecnologias Assistivas </li></ul><ul><li>- O que é Acessibilidade na Web </li></ul><ul><li>- Diretrizes, Validadores e o decreto de Lei 5.296 </li></ul>
    4. 4. Tecnologias Assistivas
    5. 5. Switch Mouse Teclado virtual do Windows Ponteira de cabeça Acesso ao computador via voz Painel de controle do leitor de telas Jaws para Windows Sistema Operacional DOSVOX Lente de Aumento do Windows Linha braile Impressora braile
    6. 6. homem em dúvida O que é Acessibilidade na Web? Logotipo Acesso Digital
    7. 7. <ul><li>Diretrizes e Iniciativas de Acessibilidade </li></ul><ul><li>WCAG - Web Content Accessibility guidelines 1.0. Recomendações do W3C para a acessibilidade do conteúdo da Web em inglês - WCAG 1.0 - 1999. </li></ul><ul><li>Diretrizes Irlandesas de Acessibilidade na Web. Tradução do documento &quot;Irish National Disability Authority IT Accessibility Guidelines - Version 1.1&quot;. </li></ul><ul><li>e-MAG </li></ul><ul><li>Criado para atender ao decreto 5.296, de 2 de dezembro de 2004 </li></ul>
    8. 8. Validadores de Acessibilidade Logotipo Acesso Digital
    9. 9. Logotipo Acesso Digital Watchfire WebXACT - antigo Bobby (inglês). eXaminator - Testa acessibilidade, HTML e CSS - português. Hera - português. Da Silva - Validador brasileiro Validador de sintaxe: W3C Markup Validation Service - Valida o HTML (inglês). Validador de CSS: W3C CSS Validation Service Valida o CSS (inglês).
    10. 10. <ul><li>Decreto n° 5.296 de 2 de dezembro de 2004 </li></ul><ul><ul><li>Art. 47.   No prazo de até doze meses a contar da data de publicação deste Decreto, será obrigatória a acessibilidade nos portais e sítios eletrônicos da administração pública na rede mundial de computadores (internet), para o uso das pessoas portadoras de deficiência visual , garantindo-lhes o pleno acesso às informações disponíveis. </li></ul></ul><ul><ul><li>§ 1 o    Nos portais e sítios de grande porte, desde que seja demonstrada a inviabilidade técnica de se concluir os procedimentos para alcançar integralmente a acessibilidade, o prazo definido no caput será estendido por igual período. </li></ul></ul>Lei de Acessibilidade
    11. 11. Lêda Lúcia Spelta Psicóloga, Programadora, Analista de Sistemas e Consultora de Acessibilidade. Foto do Lêda - Acessibilidade, quem precisa? - Navegação na prática.
    12. 12. Acessibilidade, quem precisa ?
    13. 13. Juca, sem visão. Imagem retirada da apresentação – Usabilidoido.com.br
    14. 14. Mandy, sem visão e braços. Imagem retirada da apresentação – Usabilidoido.com.br
    15. 15. João Henriques deficiente motor utiliza o mouse com dificuldade. ( www.euroacessibilidade.com )
    16. 16. Eric interagindo através de teclado expandido Funlar – Rio (nov/2006).
    17. 17. Lucas, com baixa visão utilizando o software ampliador de tela. Imagem retirada da apresentação – Usabilidoido.com.br
    18. 18. Casal João e Ana, eles têm pouca experiência, baixa visão e dificuldades motoras.
    19. 19. Deficientes auditivos não oralizados têm dificuldades com o português. Apreendem primeiro a língua de sinais. Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)
    20. 20. 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.
    21. 21. Gabriel, linguagem em desenvolvimento... Gabriel compenetrado, olhando para o monitor e clicando com o mouse. Agora ele está olhando e brincando como teclado.
    22. 22. Calvin, pouca experiência e medo do computador Homem com muito medo olhando por cima de um notebook.
    23. 23. 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
    24. 24. E todos nós, primeira experiência. Um criança com camisa social e gravata em frente a um notebook
    25. 25. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
    26. 26. Google, o bilionário cego!!! É apenas um robô que só indexa conteúdo em texto. Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.
    27. 27. Navegação na prática, Indique um site!!! Logotipo Acesso Digital
    28. 28. Horácio Soares Designer de interação e consultor em design, acessibilidade e usabilidade. - Benefícios da acessibilidade. - Design, Simplicidade e Acessibilidade. Foto do Horácio
    29. 29. Benefícios da Acessibilidade para empresas e a sociedade.
    30. 30. Alvo com um dardo na mosca atingir 100% do público alvo
    31. 31. Homem de terno comemorando Fidelização de clientes.
    32. 32. <ul><li>Interfaces </li></ul><ul><li>mais fáceis </li></ul><ul><li>de usar </li></ul><ul><li>e aprender. </li></ul>Mulher sorrindo em frente a um notebook fazendo sinal de ok
    33. 33. Inclusão digital e o sistema de cotas. Um alvo novo e inexplorado Homem usando o computador
    34. 34. Uma mão com sinal positivo. Conformidade com o decreto de lei 5296 de 02/12/2004.
    35. 35. Uma senhora acessando um computador. Crescimento do consumidor acima dos 65 anos...
    36. 36. Homem olhando para o ceú visualizando seus lucros Manutenção mais rápida e barata.
    37. 37. Melhor performance e diminuição dos custos com banda. Foto de um carro em alta velocidade uma estrada sem obstáculos pela frente
    38. 38. <ul><li>Valorização da </li></ul><ul><li>Diversidade e </li></ul><ul><li>Responsabilidade </li></ul><ul><li>Social; </li></ul>Mãos entrelaçadas
    39. 39. <ul><li>Maior visibilidade do seu negócio e produtos pelos sistemas de busca. </li></ul>Foto da parte de cima do rosto de um homem com as mãos na cara. Fotografia em preto e branco, mas com um olho azul em destaque.
    40. 40. <ul><li>Diferencial </li></ul><ul><li>competitivo e </li></ul><ul><li>melhoria dos </li></ul><ul><li>Serviços. </li></ul>Duas mulheres na praia dando uma estrela uma de costas para a outra, com o mar ao fundo.
    41. 41. <ul><li>Visão </li></ul><ul><li>emprendedora </li></ul>Homem com dispositivo móvel.
    42. 43. O Design, a Simplicidade e a Acessibilidade.
    43. 44. “ Duuuuuuuuuu,, eu sou um designer. Como posso fazer projetos com boa aparência para um grupo de pessoas cegas?
    44. 45. design Interrogação
    45. 46. Aparência é importante para o design
    46. 47. Qual dos dois sanduíches você escolheria? Foto de um sanduíche comprado em uma loja qualquer. Foto do mesmo sanduíche e para fins de marketing.
    47. 48. Sim, mas design não é arte! Clara com 3 anos, pintanto o “sete”
    48. 50. Nem é maquiagem...
    49. 51. http://www.flickr.com/photos/alltheaces/67904915/ Porquinho rosa e sorridente de pelúcia
    50. 52. http://www.flickr.com/photos/melmoththewanderer/31029375/ Fucinho de um porco de verdade...
    51. 53. Poluído Diversas chaminés de uma fabrica poluindo o ar.
    52. 54. Poluído Diversas chaminés de uma fabrica poluindo o ar. O conteúdo deve respirar... 70% conteúdo x 30% espaço
    53. 55. desorganizado... Onde está o Wally? Um foto de uma piscina tirada de longe, com um número inacreditável de pessoas dentro e fora.
    54. 56. lento... Homem socando o monitor de seu notebook.
    55. 57. Ambíguo? Quatro mãos juntas, uma para cada lado.
    56. 58. Complicado Executivo na frente de um grande labirinto.
    57. 59. Confuso Um poste com dezenas de setas para todos os lados
    58. 60. Não deve discriminar Uma peça de pião de xadrez isolado de outros 27 piões.
    59. 61. Nem nos fazer sentir incapazes Um homem inconformado em frente ao seu notebook.
    60. 62. Não é ambiguo Ou ser inacessível Um homem amarrado, com olhos vendados e boca tapada.
    61. 63. Não requer habilidades especiais Uma mão auxiliando a outra no uso do mouse.
    62. 64. Requer habilidades especiais Uma cobra fala para outra Querida, travou de novo!!! Andem meninos vão ajudar seu pai a das Control + Alt + Del.
    63. 65. Ou ser difícil de usar
    64. 67. Não é apenas estética Um close de um belo rosto feminino.
    65. 68. Afinal, o que é design
    66. 69. <ul><ul><li>É uma disciplina que explora o diálogo entre produtos, pessoas e contextos. </li></ul></ul>Fonte: http://www.usabilitybok.org/design/p286 Usability Body of Knowledge
    67. 70. Fonte: http://www.usabilitybok.org/design/p286 Usability Body of Knowledge <ul><ul><li>Um processo que desenvolve soluções para ajudar as pessoas a alcançar seus objetivos. </li></ul></ul>
    68. 71. Qual é o grande desafio do designer?
    69. 72. Tratar o excesso de informações, itens, funcionalidades... Um burro tentando carregar um exagerado volume de carga, mas em função do excesso, está impossibilitado de colocar as patas sobre o chão.
    70. 73. Como tornar o complexo, simples?
    71. 74. “ ” Aprender a se perguntar “isso realmente precisa estar aqui?” é o primeiro passo para iniciar a criar simplicidade. Pär Almqvist in KISS – Keep it simples, stupid! http://www.digital-web.com/articles/keep_it_simple_stupid/
    72. 75. “ ” Simplicidade é o supra-sumo da sofisticação. É saber o que manter e o que jogar fora... isso acontece como mágica quando funciona, porque nenhuma complexidade é transferida aos usuários. ( 5º Princípio de Joshua Porter ) Não confunda simplicidade com algo simplório, pobre...
    73. 76. <ul><ul><li>O designer deve buscar a simplicidade, mas com foco na real necessidade do usuário… </li></ul></ul>
    74. 78. Cuidado...
    75. 79. O que o usuário explicou o que queria. Nem sempre é o que realmente ele precisa.
    76. 80. G o o g l e Será que o Google é acessível?
    77. 81. <ul><ul><li>Google em 1998 (versão Beta) </li></ul></ul>
    78. 82. Fonte: http://www.archive.org
    79. 83. <ul><ul><li>Google em 2007 </li></ul></ul>
    80. 84. O que é uma inovação
    81. 85. <ul><ul><li>Opssss…. </li></ul></ul>
    82. 87. Para finalizar, uma pergunta: LESS IS MORE? (menos é mais?)
    83. 88. Para finalizar, uma pergunta: LESS IS MORE? (menos é mais?)
    84. 89. Bruno Torres Desenvolvedor e consultor em Web Standards e acessibilidade. - Padrões Web. - Inovações tecnológicas x acessibilidade. Foto do Bruno Torres
    85. 90. Padrões web <ul><li>Tecnologias recomendadas pelo W3C </li></ul><ul><li>Usar cada uma para o seu fim específico </li></ul><ul><li>Desenvolvimento em camadas </li></ul><ul><li>“ Progressive Enhancement” </li></ul>
    86. 91. Camadas <ul><li>Conteúdo </li></ul><ul><ul><li>(X)HTML </li></ul></ul><ul><li>Apresentação </li></ul><ul><ul><li>CSS </li></ul></ul><ul><li>Comportamento </li></ul><ul><ul><li>ECMAScript (JavaScript) </li></ul></ul>
    87. 92. Progressive Enhancement <ul><li>Desenvolva a camada de conteúdo </li></ul><ul><ul><li>TUDO deve funcionar neste ponto </li></ul></ul>
    88. 93. Progressive Enhancement <ul><li>Estilize o seu conteúdo </li></ul><ul><ul><li>Tem certeza de que não “quebrou” nada? </li></ul></ul><ul><ul><li>Teste, teste, teste e depois teste de novo </li></ul></ul><ul><ul><li>Evite mexer na camada de conteúdo </li></ul></ul><ul><ul><ul><li>A não ser que seja realmente necessário </li></ul></ul></ul>
    89. 94. Progressive Enhancement <ul><li>Agora sim, comportamento </li></ul><ul><ul><li>Já sabe né? Não quebre nada. </li></ul></ul><ul><ul><li>Teste mais ainda e mais um pouco </li></ul></ul><ul><ul><li>Pense muito antes de mexer na primeira camada </li></ul></ul><ul><ul><li>Crie elementos descartáveis por aqui mesmo </li></ul></ul>
    90. 95. Visão do inferno <ul><li><a href=“javascript:meuFruFruFavorito();” style=“color:#900;”>Clique aqui!!!</a> </li></ul><ul><li>E esse exemplo não é dos piores... </li></ul>
    91. 96. Mundo (quase) ideal <ul><li>HTML </li></ul><ul><li><a href=“/algo.html” id=“frufru”>Meu frufru favorito</a> </li></ul><ul><li>CSS </li></ul><ul><li>#frufru{ </li></ul><ul><li>color:#900; </li></ul><ul><li>} </li></ul><ul><li>JavaScript </li></ul><ul><li>var frufru = document.getElementById(‘frufru’); </li></ul><ul><li>function meuFruFruFavorito() { </li></ul><ul><li>[codigo] </li></ul><ul><li>} </li></ul><ul><li>frufru.onclick = meuFruFruFavorito; </li></ul><ul><li>frufru.onkeypress = meuFruFruFavorito; </li></ul>
    92. 97. Vantagens <ul><li>Compatibilidade </li></ul><ul><li>Acessibilidade </li></ul><ul><li>Usabilidade </li></ul><ul><li>Desempenho </li></ul><ul><li>Economia de banda </li></ul><ul><li>Otimização para sites de busca </li></ul>
    93. 98. E a produtividade?
    94. 99. Produtividade <ul><li>Cai no início </li></ul><ul><ul><li>Curva de aprendizado alta </li></ul></ul><ul><li>Aumenta muito com o tempo </li></ul><ul><ul><li>A palavra-chave é experiência </li></ul></ul>
    95. 100. Vídeo - Acessibilidade na Web: Custo ou Benefício? http://acessodigital.net/video.html
    96. 101. Vídeo - Acessibilidade na Web: Custo ou Benefício? http://acessodigital.net/video.html http://videolog.uol.com.br/video?230205
    97. 102. Obrigado! Avaliação, adequação aos padrões de acessibilidade, desenvolvimento, design, capacitação e consultoria.

    ×