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.

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
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
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/