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
23

 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
20

Other Decks in Programming

See All in Programming
Domain-Driven Transformation
hschwentner
2
1.5k
GitHub Copilotのススメ
marcy731
1
220
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Elm 0.19.0 Changes
bkuhlmann
0
510
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
510
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
Ruby GitHub Packages
bkuhlmann
0
640
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
420
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
360
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
GraphQLとの向き合い方2022年版
quramy
33
12k
Facilitating Awesome Meetings
lara
43
5.6k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Designing Experiences People Love
moore
136
23k
Unsuck your backbone
ammeep
663
57k
Building Adaptive Systems
keathley
32
1.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Become a Pro
speakerdeck
PRO
13
4.6k

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]