Tunando sua App com WAI-ARIA

Slide 1

Slide 1 text

Tunando suas Apps com WAI-ARIA

Slide 2

Slide 2 text

Olá, eu sou Bruno Pulis! • @brunopulis • facebook.com/bpulis • speakerdeck.com/brunopulis 2

Slide 3

Slide 3 text

• 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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

WCAG

Slide 7

Slide 7 text

Web Accessibility Iniciative O Grupo de Iniciativa de Acessibilidade (WAI) do W3C, desenvolve diretrizes de acessibilidade. 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

WCAG != ARIA

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

WAI-ARIA

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Os atributos podem ser: • role • state • property 18

Slide 19

Slide 19 text

Roles

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Lista completa das roles Para ver todas as roles consulte documentação oficial 22

Slide 23

Slide 23 text

States & Properties

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

States & Properties Lista de States e Properties documentação oficial. 26

Slide 27

Slide 27 text

Observações

Slide 28

Slide 28 text

Semântica Utilize os elementos do HTML corretos para marcar seu conteúdo. 28

Slide 29

Slide 29 text

Nunca faça isso

Slide 30

Slide 30 text

Faça isso

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Obrigado!