Tunando sua App com WAI-ARIA

590371c05fc56adf612fd91ea509cf74?s=47 Bruno Pulis
November 17, 2014

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.

590371c05fc56adf612fd91ea509cf74?s=128

Bruno Pulis

November 17, 2014
Tweet

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
  4. 4

  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
  13. None
  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!