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
命名をリントする
chiroruxx
1
400
モバイルアプリにおける自動テストの導入戦略
ostk0069
0
110
暇に任せてProxmoxコンソール 作ってみました
karugamo
2
720
情報漏洩させないための設計
kubotak
1
130
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
3
470
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
270
Beyond ORM
77web
5
650
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ！
maroon1st
0
460
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
110
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
140

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Mobile First: as difficult as doing things right
swwweet
222
9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Building Applications with DynamoDB
mza
91
6.1k
Optimising Largest Contentful Paint
csswizardry
33
3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Language of Interfaces
destraynor
154
24k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k

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]