Acessibilidade na Web - GoogleI/O SP
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Acessibilidade na Web - GoogleI/O SP

  • 204 views
Uploaded on

Palestra sobre acessibilidade na Web feita para o Google I/O em São Paulo

Palestra sobre acessibilidade na Web feita para o Google I/O em São Paulo

More in: Internet
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
204
On Slideshare
172
From Embeds
32
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
4

Embeds 32

http://www.reinaldoferraz.com.br 29
http://www.slideee.com 3

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 na web Google I/O - SP 26 de junho de 2014 Reinaldo Ferraz @reinaldoferraz
  • 2. http://premio.w3c.br/
  • 3. Acessibilidade na Web: A quem se destina?
  • 4. Cegos – Daltônicos - Baixa visão Foto: everystockphoto.com - namida-k
  • 5. Surdos Foto: everystockphoto.com - jessicafm
  • 6. Mobilidade reduzida
  • 7. Estatísticas Pessoas com deficiências no Brasil 24% 45.623.910 pessoas Fonte: Censo 2010
  • 8. Estatísticas No mundo, esse número é aproximadamente 1 bilhão de pessoas Fonte: ONU
  • 9. Acessibilidade na web Porque não desenvolvemos web sites acessíveis? Algumas hipóteses:
  • 10. Desconhecimento
  • 11. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 12. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 13. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 14. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 15. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 16. Acessibilidade na web Preconceito
  • 17. Público alvo
  • 18. É muito caro! O prazo é curto! Dá muito trabalho! Não sei fazer!
  • 19. Já testou seu site? Foto: Flickr.com - Baddog_
  • 20. Já testou o seu site? Acessível via teclado Foto: Flickr.com - Baddog_
  • 21. Já testou o seu site?
  • 22. Já testou o seu site? Vídeos com legendas
  • 23. Já testou o seu site? Sem CSS e imagens Foto: Flickr.com - Baddog_
  • 24. Ou mesmo sem monitor
  • 25. Acessibilidade na web Beneficia pessoas com deficiência
  • 26. Acessibilidade na web: A quem se destina? Acessibilidade é para todos !
  • 27. Você acha que tem controle sobre o seu usuário?
  • 28. NÃO
  • 29. Você não tem controle sobre o seu usuário
  • 30. Acessibilidade deve fazer parte da rotina
  • 31. Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/
  • 32. Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto Princípios do WCAG
  • 33. ARIA e HTML5 WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas. http://www.w3.org/WAI/intro/aria
  • 34. ARIA e HTML5 progressbar radiogroup scrollbar slider spinbutton status Tab tabpanel textbox tooltip 73 ROLES (Ou Papéis) alert Alertdialog button checkbox dialog menu menubar menuitem option ... http://www.w3.org/TR/wai-aria/roles#role_definitions
  • 35. ARIA e HTML5 aria-activedescendant aria-atomic aria-autocomplete aria-busy (state) aria-checked (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-expanded (state) aria-flowto aria-grabbed (state) 35 States and Properties (Estados e Propriedades) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns ... http://www.w3.org/TR/wai-aria/states_and_properties
  • 36. ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.
  • 37. As WCAG utilizam a semântica do HTML para tornar o conteúdo acessível ARIA são atributos que conseguem mudar a semântica dos elementos para tornar o conteúdo acessível
  • 38. Situação 1: Uma galeria de imagens
  • 39. <img src=“starwars.jpg” alt=“Foto de Luke Skywalker no filme Star Wars – O império contra ataca”>
  • 40. <div class="foto" role="img" aria-label="Logo do W3C que está dentro do CSS"></div> <img src="img-slides/w3clogo.png" alt="Logo do W3C dentro do HTML">
  • 41. reinaldoferraz.com.br
  • 42. Situação 2: Uma página cheia de destaques
  • 43. <a href=“#contents”>Saltar</a> <elemento id=“contents”>
  • 44. <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...<h2> <h3>...</h3> <h4>...</h4> <h2>...</h2> <h3>...</h3>
  • 45. html5accessibility.com
  • 46. Situação 3: Menu e Submenus
  • 47. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  • 48. Situação 4: Formulários
  • 49. <fieldset> <legend> Identifique-se! </legend> <label for="text"> Nome</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Preencha seu nome de verdade, viu?</p> </fieldset>
  • 50. <fieldset> <legend> Identifique-se! </legend> <label for="text"> Nome</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Preencha seu nome de verdade, viu?</p> </fieldset>
  • 51. <fieldset> <legend> Identifique-se! </legend> <label for="text"> Nome</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Preencha seu nome de verdade, viu?</p> </fieldset>
  • 52. Slider
  • 53. Não dá para usar o input type=“range”?
  • 54. SIM!
  • 55. html5accessibility.com
  • 56. html5accessibility.com
  • 57. Situação 5: Utilização de cores
  • 58. Neil Harbisson http://www.youtube.com/watch?v=CvPOh0p9cf0
  • 59. Daltonismo
  • 60. Daltonismo
  • 61. Daltonismo Uma menina com cabelos loiros, olhos azuis vestida de rosa
  • 62. Daltonismo Visão normal
  • 63. Daltonismo Protanopia (Deficiências em vermelho)
  • 64. Daltonismo Deuteranopia (Deficiências em verde)
  • 65. Daltonismo Tritanopia (Deficiências em azul)
  • 66. Daltonismo Acromatopsia (Deficiências todas as cores)
  • 67. Daltonismo Nunca utilize somente cor para transmitir uma informação na Web
  • 68. Daltonismo
  • 69. Situação 4: Múltiplos idiomas
  • 70. <html lang=“pt-br”> ... Esse texto está em português
  • 71. <html lang=“pt-br”> ... Esse texto está em português <span lang=“en”>and this one in english</span>
  • 72. Situação 5: Elementos dinâmicos
  • 73. <button role=“button” aria-pressed=“false”> <img src=“off.png” alt=“Status Desligado”> </button> <button role=“button” aria-pressed=“true”> <img src=“on.png” alt=“Status Ligado”> </button>
  • 74. <div class="message"> <span id="messages" aria-live="assertive"></span> </div> <div class="message"> <span id="messages" aria-live=“off" ></span> </div>
  • 75. Dicas importantes para melhorar a acessibilidade • Validação de Markup • Siga as diretrizes de acessibilidade (WCAG e ARIA) • Validação automática de acessibilidade • Verificação de avisos • Teste com tecnologias assistivas • Coloque a acessibilidade na rotina do desenvolvimento
  • 76. Obrigado! @reinaldoferraz “Se o seu site não está pronto para receber TODAS as pessoas, o site é deficiente.” Adaptado da arq. Thais Frota