Tunando sua App com WAI-ARIA

Talk que aborda os conceitos do WAI-ARIA e seus benefícios para o desenvolvimento web moderno.

Foi ministrada na semana Uni+ da Faculdade UniBh Campus Diamantina.

Transcript

1. Tunando suas Apps com WAI-ARIA
2. Olá, eu sou Bruno Pulis! • @brunopulis • facebook.com/bpulis • speakerdeck.com/brunopulis 2
3. • Desenvolvedor Frontend desde 2010; • Tecnólogo em sistema para Internet pela Faculdade Pitágoras; • Especialista em acessibilidade; • Idealizador do projeto Acessibilidade Urbana; • Integrante do Minas Dev; • Fundador do Frontend Beagá 3
5. Minas Dev É uma comunidade de desenvolvedores que querem promover o diálogo e troca de conhecimento. Alguns projetos do Minas Dev: • Acessibilidade Urbana • Dev In Company • Dev In University • Minas Dev Beer 5
6. WCAG
7. Web Accessibility Iniciative O Grupo de Iniciativa de Acessibilidade (WAI) do W3C, desenvolve diretrizes de acessibilidade. 7
8. Web Accessibility Iniciative Web Content Accessibility Guidelines (WCAG) é uma recomendação de acessibilidade para conteúdo na Web que visa torná-los mais acessíveis. • A primeira versão do WCAG 1.0 foi lançada em 1998; • A segunda e atual 2008, onde o documento ficou de fácil compreensão para desenvolvedores e gestores. 8
9. Príncipios da WCAG • Príncipio 1: Perceptível A informação é a interface deve ser perceptível ao usuário. Não pode estar invisível para todos os seus sentidos. • Príncipio 2: Operável O usuário deve ser capaz de operar a interface toda via teclado. 9
10. Príncipios da WCAG • Príncipio 3: Compreensível Toda informação e operação da interface deve ser compreensível. • Príncipio 4: Robusto O conteúdo deve ser robusto para ser entendido por navegador e tecnologias assistivas. 10
11. WAI-ARIA No ano de 2008, o WAI criou a especificação para extender os recursos de acessibilidade, principalmente, o HTML5 e suas aplicações ricas. 11
12. Accessible Rich Internet Applications Contribui especialmente com conteúdo dinâmico e controles avançados de interface para usuário desenvolvidos, com HTML5 e tecnologias relacionadas. 12
14. WCAG != ARIA
15. WCAG != ARIA O WCAG usa a semântica do HTML para tornar o conteúdo acessível. O WAI-ARIA é uma especificação de atributos que muda a semântica dos elementos HTML para tornar o conteúdo acessível. 15
16. WAI-ARIA
17. Usando o WAI-ARIA Funciona como uma extensão do HTML5, trabalha apenas com adição e manipulação dos seus atributos nas tags do HTML. 17
18. Os atributos podem ser: • role • state • property 18
19. Roles
20. Abstract roles Usado para definir conceitos gerais. Não devemos usar para marcar conteúdo. Widget roles Elementos de interface soltos, como botões, checkbox, tabs e etc. 20
21. Document Structure roles Descreve uma estrutura para organizar páginas, que não são interativas. Landmark roles Destina-se para marcação de regiões da página para pontos de navegação importantes, como por exemplo: buscar, sidebar, footer e etc. 21
22. Lista completa das roles Para ver todas as roles consulte documentação oficial 22
23. States & Properties
24. States & Properties O termo "states" e "properties" se referem a caracteristícas semelhantes, ambos, fornecem informações específicas sobre um objeto. States são estados que os elementos HTML podem receber, ex: aria-checked, aria-true. Properties são propriedades dos elementos HTML, ex: aria-labelledby. 24
25. States & Properties Uma diferença importante é que, os valores das properties (como aria-labelledby) são menos propensos a mudar ao longo do ciclo de vida da aplicação do que os valores dos states (como aria-checked) que pode mudar com freqüência devido à interação do usuário. 25
26. States & Properties Lista de States e Properties documentação oficial. 26
27. Observações
28. Semântica Utilize os elementos do HTML corretos para marcar seu conteúdo. 28
29. Nunca faça isso <!-- Forma incorreta -- / > <span role="button">Botão</span> 01. 02. 29
30. Faça isso <!-- Forma correta -- / > <button role="button">Botão</button> 01. 02. 30
31. Utilize os elementos do HTML corretos e os atributos da WAI-ARIA para enriquecer a interação do usuário com sua aplicação. 31
32. As experiências que nós projetamos serão as que usaremos daqui há 20 anos, você pode ser vitíma do seu próprio veneno. Bruno Pulis “ 32
33. Obrigado!