Apresentação sobre conceitos gerais de acessibilidade na web com a integração de tecnologias front-end.

1. Uso acessível
O CUMPRIMENTO DAS PREMISSAS NA WEB CONTEMPORÂNEA
Por Gabriel Luiz Ramos

2. Para quem você desenvolve?
“Acessibilidade é tudo sobre
a necessidade das pessoas.”
Diego Eis

3. Dados Estatísticos
Pessoas com deficiências no Brasil
24% da população = 45.623.910 pessoas
Fonte: Censo 2010
No mundo
Mais de 1 Bilhão de pessoas
Fonte: ONU

4. Antes de tudo:
-Web: qual a premissa?
-Informação -> acesso -> usuário

5. Usabilidade
-Utilidade;
-Usabilidade;
-Design de Interação (UI);
-Experiência do Usuário (UX).

6. Como você acessa?
-Em casa;
-No trabalho;
-Na escola;
-No trânsito (ônibus, carro, avião, metrô).

7. Componentização de acesso
-Teclado?
-Mouse?
-Boa resolução?
-Boa conexão?
-Tempo?
-Boa geladeira?

8. (nem tão) pequenos detalhes

9. Todos possuem necessidades especiais
Cegueira, daltonismo, deficiência auditiva, deficiência motora...
Inclusive você!

10. Lei nº 13.146, de 6 de julho de 2015
Art. 63. É obrigatória a acessibilidade nos sítios da internet [...] 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.
Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm

11. Seu serviço nunca vai ser perfeito para
todos
Alguém disse flash?

12. Fundamentos
Graceful Degradation x Progressive Enhancement
-Fault Tolerance: Tolerância a erros desde o início;
“Texto é universal”

13. Chega de Blábláblá
-Conteúdo: HTML Semântico e Correto;
-Formatação: CSS e estilo;
-Comportamento: Javascript / jQuery e ações.
-Front-End:

14. Escrita
-Código limpo (se possível, compressão);
-Organização em arquivos: melhora no
desempenho, processamento e evita reflow e
repaint.

15. -Semântica: div?
O próprio DOCTYPE e a declaração de tagsDiego Eis

16. Tabelas? Sim!
Não para estrutura Sim para diagramação de dados

17. FALLBACKS
Estrutura representativa para utilizações
“menos abastadas”
Tratamento de erro para visualização de conteúdo

18. FALLBACKS
Conditional Comments:
<!--[if IE 6]>
De acordo com comentário, esse navegador é IE 6
<![endif]-->
<!--[if gte IE 8]>
De acordo com comentário, esse navegador é IE 8 ou superior
<![endif]-->
<!--[if lt IE 9]>
De acordo com comentário, esse navegador é IE 9 ou inferior
<![endif]-->
<!--[if !IE]>
De acordo com comentário, esse navegador não é IE
<![endif]-->
http://www.quirksmode.org/css/condcom.html

19. FALLBACKS
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> W3C

20. Novidades como: Bordas, gradientes (degradês), rotações, implementações
3D, filtros.
Mas e a acessibilidade?
- Prefixos http://docs.emmet.io/css-abbreviations/vendor-prefixes/
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px;
- Para Firefox e navegadores com motor Mozilla;
FALLBACKS
- Safari, Chrome e navegadores com motor Webkit;
- Opera;
- Internet Explorer;
- Propriedade a ser aceita.

21. Interações:
FALLBACKS
Eventos:
- onMouseOver / onMouseOut
- onFocus / onBlur / onClick
Aplicação de estilos:
- a:hover
- a:focus

22. FALLBACKS
E agora? Será que tá habilitado?
É realmente necessário?
Pesquisa realizada pela WebAIM em 2012 indicou que 98,6% dos usuários de leitores de tela
navegam com javascript habilitado
http://webaim.org/techniques/javascript/

23. FALLBACKS
<noscript>
<style>
.no-js{ display:none !important;}
</style>
</noscript>

24. Script download: Async x Defer

25. FALLBACKS
Modernizr: https://modernizr.com/

26. Componentização/Reutilização
(web components)
Polymer: https://www.polymer-project.org/1.0/

27. Atributos
Atributos REL e ALT
<img src=“imagem.jpg” alt=“Planetas”>
<a href=“http://link.com.br rel=“valor”>link</a>
<p title=“informações”>essas são as informações</p>

28. Atributos
Atributo tabindex
<nav>
<ul>
<li><a href="#" tabindex="1">Link 1</a></li>
<li><a href="#" tabindex="2">Link 2</a></li>
<li><a href="#" tabindex="3">Link 3</a></li>
<li><a href="#" tabindex="4">Link 4</a></li>
<li><a href="#" tabindex="5">Link 5</a></li>
</ul>
</nav>

29. WAI-ARIA
Extensões (atributos) para auxiliar a semântica, a
interação e a navegação de leitores de tela em
aplicações web.
http://www.w3.org/TR/wai-aria/
http://www.w3.org/TR/aria-in-html/

30. WAI-ARIA
- Widget: alert, button, tab...
- Document Structure: list, listitem, img...
- Landmarks: banner, main, navigation, form, search,
complementary, contentinfo...
Tipos de “roles”
http://www.w3.org/TR/wai-aria/roles

31. WAI-ARIA
Roles:
Breve aplicação

32. WAI-ARIA
States and Properties (Atributos “aria-[...]=”)
- aria-labelledby, aria-haspopup, aria-hidden, aria-
selected...
http://www.w3.org/TR/wai-aria/states_and_properties

33. WAI-ARIA
States and properties, breve aplicação:
<ul role=“navigation”>
<li><a role=“tab” tabindex=“1” aria-selected=“true”>Aba 1</a></li>
<li><a role=“tab” tabindex=“2”>Aba 2</a></li>
</ul>
<section role=“main”>
<div role=“tabpanel” aria-labelledby=“tab1”>
Conteudo
</div>
</section>

34. WAI-ARIA
Precauções:
<div role=“button”>ativar</div>
<button role=“button”>ativar</section>
Prefira os elementos semânticos do próprio HTML.

35. Adaptive Web Design
Fluido, responsivo, adaptativo:
A entrega da informação ajustada ao meio de acesso.

37. Cor, contraste, imagem, mensagem...
Do usuário, para o usuário
Acessibilidade como algo
cotidiano, do início ao fim
http://www.w3.org/Translations/WCAG20-pt-br/

38. Muito obrigado!