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
Contemporary Test Cases
maaretp
0
140
Macとオーディオ再生 2024/11/02
yusukeito
0
370
初めてDefinitelyTypedにPRを出した話
syumai
0
420
役立つログに取り組もう
irof
28
9.6k
subpath importsで始めるモック生活
10tera
0
310
Amazon Bedrock Agentsを用いてアプリ開発してみた！
har1101
0
340
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Jakarta EE meets AI
ivargrimstad
0
580
Jakarta EE meets AI
ivargrimstad
0
650
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170

Featured

See All Featured
Product Roadmaps are Hard
iamctodd
PRO
49
11k
The Cult of Friendly URLs
andyhume
78
6k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Ruby is Unlike a Banana
tanoku
97
11k
Automating Front-end Workflow
addyosmani
1366
200k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k

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]