Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desenvolvendo_aplicações_acessíveis.pdf

Gisely Lucas
February 10, 2020
Programming
1
29

 Desenvolvendo_aplicações_acessíveis.pdf

Muito se sabe que ter uma aplicação web acessível é permitir que todos os diferentes grupos de usuários possam acessar o conteúdo disponível. E para auxiliar na
construção de uma aplicação acessível, existem algumas
dicas importantes. Mas com tantas informações, qual poderia
ser o primeiro passo para começar ou tornar uma aplicação
web acessível? Uma sugestão: começar pela navegação do site.
Um bom gerenciamento de foco garante que diferentes usuários
consigam navegar pelo site e conteúdo, de forma interativa e consistente.
O objetivo dessa palestra é compartilhar muito do meu aprendizado
com desenvolvimento de aplicações acessíveis. Apresentando o que
é necessário fazer para garantir uma navegação acessível a todos.
Além de demonstrar o que é desnecessário e incorreto ao tentar
manipular o foco.

Gisely Lucas

February 10, 2020
Tweet

More Decks by Gisely Lucas

See All by Gisely Lucas
Vamos falar de desenvolvimento com Acessibilidade?
gisely
2
22

Other Decks in Programming

See All in Programming
Jakarta EE meets AI
ivargrimstad
0
180
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Ethereum_.pdf
nekomatu
0
460
Contemporary Test Cases
maaretp
0
140
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
130
Flutterを言い訳にしない！アプリの使い心地改善テクニック5選🔥
kno3a87
1
180
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Figma Dev Modeで変わる！Flutterの開発体験
watanave
0
130
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Why Our Code Smells
bkeepers
PRO
334
57k
Building an army of robots
kneath
302
43k
Done Done
chrislema
181
16k
Designing Experiences People Love
moore
138
23k
How to Ace a Technical Interview
jacobian
276
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
The Invisible Side of Design
smashingmag
298
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Making Projects Easy
brettharned
115
5.9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k

Transcript

  1. DESENVOLVENDO APLICAÇÕES ACESSÍVEIS O que é preciso entender para mudar

    a mentalidade? Gisely Lucas Bernardino

  2. GISELY LUCAS QUEM SOU? Cientista da Computação, por formação. Engenheira

    de software na CI&T. Co-fundadora da Desplugue-se. Possui experiência em desenvolvimento de aplicações web ... /giselylucas [email protected]

  3. ACESSIBILIDADE Motivos para falar sobre

  4. None

  5. ENTENDENDO A ACESSIBILIDADE Entendendo conceitos

  6. ACESSIBILIDADE "Facilidade de acesso, qualidade do que é acessível", dicionário

    Michaelis. "É permitir que pessoas com deficiências ou mobilidade reduzida participem de atividades que incluem o uso de produtos, serviços e informação.", Governo Federal do Brasil.

  7. ACESSIBILIDADE E INCLUSÃO

  8. ACESSIBILIDADE DIGITAL Aplicando, desenvolvendo, evoluindo aplicações digitais

  9. Para as pessoas sem deficiência a tecnologia torna as coisas

    mais fáceis. Para as pessoas com deficiência, a tecnologia torna as coisas possíveis. Mary Pat Radabaugh

  10. ACESSIBILIDADE DIGITAL Permitir e tornar o acesso à informação global;

    Entender sobre a diversidade de usuários; Entender que acessibilidade não impacta apenas pessoas com deficiências; Escutar e tentar entender o outro. Fala mais sobre ...

  11. W3C + WAI World Wide Web Consortium Web Accessibility Initiative

    WCAG PRINCÍPIOS Percepção, Operação, Compreensão e Robusta NÍVEIS A, AA e AAA O QUE EXISTE? Diretrizes, Ferramentas e muitas dicas

  12. ENTENDENDO A ACESSIBILIDADE DIGITAL Do essencial ao desnecessário

  13. DOM E A11Y Document Object Model Interface de programação de

    aplicativos (API) Define a estrutura lógica e forma de acesso/manipulação do documento. Árvore de Acessibilidade Accessibility Tree Formato sintetizado da árvore do DOM Está diretamente relacionada a semântica do HTML

  14. Fonte: site Web Developers - Árvore de Acessibilidade

  15. DESENVOLVIMENTO Dicas e experiências

  16. SEMÂNTICA A ordem semântica dos elementos deve fazer sentido. Caso

    necessário, utilize CSS para mover o elemento visualmente. A semântica é extremamente importante para a construção correta da árvore de acessibilidade. <html> <header> <nav></nav> </header> <main> <img> <p></p> </main> <footer></footer> </html>

  17. ATRIBUTOS ARIA Accessible Rich Internet Applications Permite adicionar semântica a

    elementos do HTML Modifica a árvore de acessibilidade Os atributos ARIA não devem ser usados como foco principal.

  18. GERENCIAMENTO DE FOCO Construir aplicações que sejam operadas via teclado.

    Controlar o foco Elementos interativos Outline Atenção com foco oculto!

  19. FORMULÁRIOS Rótulo em todos os campos Agrupe campos relacionados Forneça

    instruções sobre o preenchimento Erros e validações devem ser reportados Quebre formulários longos

  20. Fonte: site Web Developers - Árvore de Acessibilidade

  21. <img> tag de imagem. Atributo alt=”” texto alternativo Imagem decorativa

    Imagem informativa IMAGEM A descrição deve ser breve e informativa. Descrevendo o propósito e o conteúdo da imagem.

  22. Diferença de “luminância” ou brilho entre duas cores Proporção recomendada:

    4,5:1 CONTRASTE Se as cores do texto e do fundo forem invertidas, a proporção continua a mesma. TEXTO TEXTO ✘ errado ✓ correto

  23. Elementos interativos devem ter uma área de toque significativa. Elementos

    de formulários devem ter um espaçamento mínimo definido ÁREA DE TOQUE Botões, Links, Itens de Formulários e Menus. Atenção especial em áreas de toque para Menu

  24. Espaçamento entre linhas e letras. Alinhar textos à esquerda Construir

    layout linear e lógico garantindo boa leitura em ampliações Evite textos longos e complexos. TEXTOS e LAYOUT Em links evitar deixar o texto genérico como: clique aqui, leia mais, etc

  25. CONTROLE DE ALERTAS E MENSAGENS Controle de foco Reportar a

    informação Atributos ARIA aria-invalid aria-required aria-live

  26. CONTROLE DE MODAIS Capturar o elemento que ativou a modal.

    Capturar o primeiro elemento com foco. Criar mecanismos para prender o laço de teclado na modal. Ex: evento keydown.

  27. ÁUDIOS E VÍDEOS Legendas/transcrições Não ter início automático Sons que

    não possuem sentido devem ter o volume baixo ou inexistente

  28. OPS! Adicionar tabindex em elementos interativos, sem necessidade. Adicionar tabindex

    em elementos não interativos. Não dar preferências a elementos nativos. Prender o foco em um elemento. Ter elementos com foco oculto

  29. É PRECISO TER EM MENTE • Permitir e tornar o

    acesso à informação global; • Fornecer a mesma funcionalidade de diferentes formas. • As informações devem ser claras. • Todos os usuários devem ter o mesmo tipo de informação.

  30. DICAS DE FERRAMENTAS

  31. Algumas referências legais

  32. REFERÊNCIAS WCAG 2.1 Documentação - https://www.w3.org/WAI/WCAG21/quickref Toolkit de Acessibilidade -

    Marcelo Sales - http://acessibilidadetoolkit.com/ WebAIM - https://webaim.org/ Web Accessibility - curso na Udacity Web Developers - Acessibilidade Movimento Web para todos - https://mwpt.com.br/ Dentre outras

  33. OBRIGADA! DÚVIDAS? giselylucas (linkedin) [email protected]