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.
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.
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”
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”
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
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
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...
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.”