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
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
450
return文におけるstd::moveについて
onihusube
1
1k
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
あれやってみてー駆動から成長を加速させる / areyattemite-driven
nashiusagi
1
200
talk-with-local-llm-with-web-streams-api
kbaba1001
0
180
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
180
Symfony Mapper Component
soyuka
2
730
たのしいparse.y
ydah
3
120
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
730
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
1
560
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
210

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Designing for humans not robots
tammielis
250
25k
Optimising Largest Contentful Paint
csswizardry
33
3k
Being A Developer After 40
akosma
87
590k
Automating Front-end Workflow
addyosmani
1366
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Faster Mobile Websites
deanohume
305
30k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building Adaptive Systems
keathley
38
2.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
It's Worth the Effort
3n
183
28k

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]