Acessibilidade Web

Acessibilidade Web

Palestra sobre padrões, técnicas e abordagens diferentes para criar projetos 100% acessíveis. Abordando conceitos como W3C, WAI, WCAG, padrões web e tecnologias assistivas.

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

October 13, 2016
Tweet

Transcript

  1. Acessibi- lidade Web @raphamundi's

  2. Raphael Amorim This guy seems like a nice person, but

    he doesn’t. Seriously. He likes topics related to JavaScript, Python, Clojure, WebGL, Algorithms and sometimes force some git push.
 Working most part of his time in useless open source projects. Works in globo.com, loves to create useful tiny modules to daily use. @raphamundi
  3. O que é 
 acessibilidade?

  4. O que é 
 acessibilidade
 web?

  5. Acessibilidade
 web para quem?

  6. “The power of the Web is in its universality. 


    
 Access by everyone regardless of disability is an essential aspect.”
  7. Por que?

  8. 24% 45.623.910 pessoas *http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/ default_resultados_preliminares.shtm

  9. LEI Nº 13.146, DE 6 DE JULHO DE 2015. Art.

    63 *http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.
  10. WCAG

  11. 1. Perceptível.

  12. 1. Perceptível. 2. Operável

  13. 1. Perceptível. 2. Operável 3. Compreensível

  14. 1. Perceptível. 2. Operável 3. Compreensível 4. Robusto

  15. JAWS, NVDA, ORCA

  16. 97.6% 
 
 dos usuários de programas text-to-speech habilitam javascript.

  17. HTML5 Novas Tags

  18. div div div div div

  19. div#cabecalho div#sidebar div#conteudo div#sidebar div#rodape

  20. header aside article aside footer

  21. Microdata

  22. Olá me chamo Raphael Amorim, sou brasileiro, trabalho no globocom

    como desenvolvedor. Tenho um site chamado raphamorim.me e você pode entrar em contato comigo pelo email raphael.amorim@corp.globo.com.
  23. Olá me chamo Raphael Amorim, sou brasileiro, trabalho no globocom

    como desenvolvedor. Tenho um site chamado raphamorim.me e você pode entrar em contato comigo pelo email raphael.amorim@corp.globo.com. name nationality worksFor jobTitle URL email
  24. None
  25. Wai-Aria

  26. WAI-ARIA aumenta a acessibilidade em conteúdos dinâmicos nos componentes de

    interface
  27. Grande parte dos leitores de tela não conhecem as tags

    do HTML5 e dão ênfase para as WAI- ARIA em vez das novas tags
  28. ROLES

  29. Abstract

  30. Widget Abstract

  31. Document Structure Widget Abstract

  32. Document Structure Widget Abstract Landmark

  33. www.w3.org/TR/wai-aria/roles#roles_categorization

  34. Landmarks

  35. <nav role="navigation">

  36. <main role="main">

  37. Mas as novas tags do HTML5 já não fazem este

    trabalho?
  38. Sim.

  39. Mas existem roles de landmarks sem tags relativas

  40. role=”banner”

  41. role=”complementary”

  42. role=”content info”

  43. Widgets

  44. <ul class="tabs"> <li> <a href="#tab-panel1" class="active" id="tab1">Primeira Aba</a> <a href="#tab-panel2"

    id="tab2">Segunda Aba</a> <a href="#tab-panel3" id="tab3">Terceira Aba</a> </li> </ul> <div class="tab-content" id="tab-panel1"> Conteúdo primeira aba </div> <div class="tab-content" id="tab-panel2"> Conteúdo segunda aba </div> <div class="tab-content" id="tab-panel3"> Conteúdo terceira aba </div>
  45. <ul class="tabs"> <li> <a href="#tab-panel1" class="active" id="tab1" role="tab" aria- selected="true">Primeira

    Aba</a> <a href="#tab-panel2" id="tab2" role="tab">Segunda Aba</a> <a href="#tab-panel3" id="tab3" role="tab">Terceira Aba</a> </li> </ul> <div class="tab-content" id="tab-panel1" role="tabpanel" aria-labelledby="tab1"> Conteúdo primeira aba </div> <div class="tab-content" id="tab-panel2" role="tabpanel" aria-labelledby="tab2"> Conteúdo segunda aba </div> <div class="tab-content" id="tab-panel3" role="tabpanel" aria-labelledby="tab3"> Conteúdo terceira aba </div>
  46. Document Structure

  47. <article role="article"> <p>Texto</p> </article>

  48. <div class="post" role="article"> <p>Texto</p> </div>

  49. <ul role="menubar"> <li role="menuitem">Ítem</li> <li role="menuitem">Ítem 1</li> <li role="menuitem">Ítem 2</li>

    </ul>
  50. <aside role="complementary"> ...conteúdo... </aside>

  51. Estados e Propriedades

  52. <div class="collapse"> <h1>Um exemplo simples com texto</h1> <p>Conteúdo que ativa

    a collapse</p> <div class="collapse-box" aria-expanded=“true”> Conteúdo da collapse. </div> </div>
  53. <ul> <li aria-haspopup="true"> <a href="#">Mensagens</a> <ul> <li><a href="#">Enviar</a></li> <li><a href="#">Criar</a></li>

    <li><a href="#">Editar</a></li> <li><a href="#">Relatórios</a></li> </ul> </li> </ul>
  54. <div role="radiogroup"> <span role="radio" aria-checked="unchecked"> Option Unchecked </span> <span role="radio"

    aria-checked="checked"> Option Checked </span> </div>
  55. <ul role="menubar"> <li role="menuitem">Ítem</li> <li role="menuitem">Ítem 1</li> <li role="menuitem">Ítem 2</li>

    </ul>
  56. <aside role="complementary"> ...conteúdo... </aside>

  57. Estados e Propriedades

  58. <div class="collapse"> <h1>Um exemplo simples com texto</h1> <p>Conteúdo que ativa

    a collapse</p> <div class="collapse-box" aria-expanded=“true”> Conteúdo da collapse. </div> </div>
  59. <ul> <li aria-haspopup="true"> <a href="#">Mensagens</a> <ul> <li><a href="#">Enviar</a></li> <li><a href="#">Criar</a></li>

    <li><a href="#">Editar</a></li> <li><a href="#">Relatórios</a></li> </ul> </li> </ul>
  60. <div role="radiogroup"> <span role="radio" aria-checked="unchecked"> Option Unchecked </span> <span role="radio"

    aria-checked="checked"> Option Checked </span> </div>
  61. <ul role="menubar"> <li role="menuitem">Ítem</li> <li role="menuitem">Ítem 1</li> <li role="menuitem">Ítem 2</li>

    </ul>
  62. <aside role="complementary"> ...conteúdo... </aside>

  63. Observações importantes

  64. Prefira sempre usar os elementos corretos

  65. <a role="button">Botão</a> Em vez de:

  66. <button role="button">Botão</button> Prefira fazer assim:

  67. Prefira colocar estes 
 atributos via Javascript

  68. <aside role="complementary"> ...conteúdo... </aside>

  69. Aplicações Rápidas

  70. Idioma e Título da Página

  71. Melhor pronuncia do texto em leitores de tela

  72. <meta http-equiv="Content-Language" content="pt-br">

  73. <meta http-equiv="Content-Language" content="pt-br, en, fr, it">

  74. HTTP/1.1 200 OK Date: Fri, 30 Dez 2011 10:46:04 GMT

    Server: Apache/1.3.28 (Unix) PHP/4.2.3 Content-Location: CSS2-REC.en.html Vary: negotiate,accept-language,accept-charset TCN: choice P3P: policyref=http://www.w3.org/2001/05/P3P/p3p.xml Cache-Control: max-age=21600 Expires: Wed, 05 Nov 2003 16:46:04 GMT Last-Modified: Tue, 12 May 1998 22:18:49 GMT ETag: "3558cac9;36f99e2b" Accept-Ranges: bytes Content-Length: 10734 Connection: close Content-Type: text/html; charset=utf-8 Content-Language: pt-br
  75. <p>Nós utilizamos o 
 <span lang="en">mouse</span> 
 para navegar na

    
 <span lang=“en”>web</span>
 .</p>
  76. Texto alternativo em imagens

  77. <img src=“carreta-furacao.png” alt=“carretao furacão em um dia glorioso” />

  78. Navegação por teclados

  79. None
  80. a:focus { outline: 1px solid #000; }

  81. <input type=“text” tabIndex=“1”/> <input type=“text” tabIndex=“2”/>

  82. Formulários

  83. <input type=“email”
 name=“email”/>

  84. <input type=“email”
 name=“email”/> ERRADO! ERRADO! ERRADO! ERRADO! ERRADO! ERRADO! ERRADO!

    ERRADO!
  85. <label for=“email”>
 Digite seu email
 </label> <input type=“email” 
 id=“email”

    
 name=“email”
 />
  86. <label for=“email”>
 Digite seu email
 </label> <input type=“email” 
 id=“email”

    
 name=“email” required 
 aria-required /> Campos obrigatórios:
  87. Cabeçalhos

  88. Use <h1> apenas uma vez.

  89. Trabalhe com hierarquia

  90. Sem Captchas

  91. Contraste de cores

  92. Vídeos com legenda

  93. <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm">

    <track label="English" kind="subtitles" 
 srclang="en" src="captions/sintel-en.vtt" default> <track label="Deutsch" kind="subtitles" srclang="de" src=“captions/sintel-de.vtt"> <track label="Español" kind="subtitles" srclang="es" src="captions/sintel-es.vtt"> </video>
  94. Obrigado @raphamundi

  95. https://speakerdeck.com/ubirajarapelli/acessibilidade-web Referências: http://tableless.com.br/wai-aria-estendendo-o- significado-das-interacoes/ http://pt.slideshare.net/reinaldoferraz/a-saga-dos-12-tpicos- de-acessibilidade-na-web http://tableless.com.br/introducao-a- microdata-no-html5/