Tunando sua App com WAI-ARIA

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

    4

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

    Web Accessibility Iniciative O Grupo de Iniciativa de Acessibilidade (WAI)

    do W3C, desenvolve diretrizes de acessibilidade. 7
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 13.
  12. 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
  13. 16.
  14. 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
  15. 19.
  16. 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
  17. 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
  18. 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
  19. 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
  20. 29.

    Nunca faça isso <!-- Forma incorreta -- / > <span

    role="button">Botão</span> 01. 02. 29
  21. 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
  22. 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
  23. 33.