O documento discute a importância da acessibilidade e da semântica na web. Ele explica como a árvore de acessibilidade organiza os elementos da página para tecnologias assistivas e como ARIA modifica a apresentação para melhor acessibilidade. Também fornece exemplos de como implementar boas práticas de acessibilidade no HTML, CSS e JavaScript.

1. AngularSP
Acessibilidade na prática
e a importância da
semântica na web

2. http://marcelosales.workhttp://acessibilida.de
No Itaú atuo na superintendência de UX com foco 100% em acessibilidade,
desenvolvendo ferramentas de apoio, manuais sobre o tema e o fomento
de uma cultura de acessibilidade para todas as áreas internas.

3. O que é
importante conhecer?

4. HTML
+
ACCESSIBILITY TREE
ARIA

5. “o trabalho feito pelos desenvolvedores
tem impacto direto na experiência do usuário,
para o bem ou para o mal”
Fabrício Teixeira, no livro “Introdução e boas práticas em UX Design”

6. ACCESSIBILITY TREE

7. https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree?hl=pt-br
A árvore de acessibilidade é um subconjunto da árvore DOM. Inclui objetos de interface do
“user agent” + os objetos do documento. Objetos acessíveis são criados na árvore de
acessibilidade para cada elemento DOM que deve ser exposto a uma tecnologia assistiva.
Accessibility Tree

8. ARIA

9. Modifica a apresentação do conteúdo para que ele seja mais
acessível a pessoas que utilizam tecnologias assistivas.
Especialmente útil em conteúdo dinâmico
e interfaces com controles customizados e avançados.
ARIA
(Accessible Rich Internet Applications)

10. WCAG ARIA
utiliza a própria
semântica
do HTML
X modifica / aplica
a semântica dos
elementos

11. Exemplo de implementação em um menu
(aria-expanded)
<ul>
<li>
<a class="dropdown-button" aria-expanded=”false">
Ferramentas (...)

12. “Aplicar técnicas de acessibilidade em um site
sem usabilidade é como passar batom em um porco.
Não importa o quanto você passe, ele sempre
será um porco.”
Jared Smith, consultor de Acessibilidade da WebAIM no artigo
“Accessibility Lipstick on a Usability Pig”

13. HTML

14. • Não existe “código para acessibilidade”, mas sim HTML semântico;
• Declarar idioma da página é importante;
• Hierarquia de conteúdo (H1 > H6) é fundamental;
• Rótulos (labels) em campos de formulários são fundamentais;
• Tabelas e Listas devem ser simples e funcionais;
• Lembrar do “hover” e também do “focus”.
HTML

15. https://www.html5accessibility.com

16. Importante
Um leitor de telas precisa informar essencialmente 4 informações:
• Função (semântica)
• Estado (ativado/desativado)
• Valor (o elemento em si)
• Nome
• rótulos visíveis (ou audíveis)
• textos alternativos ou complementares

17. E na prática,
como funciona isso?

18. Exemplo/Modelo MDN
https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/Acessibilidade_problemas

19. Exemplo/Modelo MDN
https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/Acessibilidade_problemas
• Cores sem contraste (onde está verde, deve ficar branco);
• HTML deve ser ajustado (títulos definidos de forma hierárquica, menu de
navegação deve ser identificados como tal);
• Imagens devem ter texto alternativo;
• Formulários (busca e comentários) não estão devidamente ajustados e não
possuem seus relacionamentos entre rótulos e campos devidamente
definidos;
• Accordions precisam ser acessados por teclado e o leitor de telas deve
informar o seu estado (aberto/fechado);
• Tabelas não estão semanticamente adequadas;
HTML, CSS e JS precisam de ajustes diferentes... dependendo do que for aplicado...

20. Exemplo apresentado “ao vivo” - ANTES

21. Exemplo apresentado “ao vivo” - DEPOIS

22. qualquer usuário
consegue utilizar o seu
produto ou serviço?
reflexão...

23. https://youtu.be/trdoe4ZtLuA
Vídeo:
Sady Paulson: Apple Acessibilidade

24. adaptado de Mary P. Radabaugh, diretora do Centro Nacional de Suporte para Pessoas com Deficiência da IBM
“Para a maioria das pessoas,
a tecnologia torna a vida mais fácil.
Para uma pessoa com deficiência,
a tecnologia torna as coisas possíveis.”

25. Obrigado!
http://acessibilida.de
Dúvidas?
twitter | instagram | fb | medium | behance
@msales
e-mail
msales@acessibilida.de
linkedIn
@msales78
http://marcelosales.work
acessibilidadetoolkit.com
guia-wcag.com
é um PWA! J

26. https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript
https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
https://webaim.org/techniques/semanticstructure/
Referências citadas na apresentação...
Extended Guidelines for Mobile Web Best Practices
https://www.w3.org/TR/mwbp-guidelines/
Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
https://www.w3.org/TR/mobile-accessibility-mapping/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles