Fazendo a Web falar: HTML5, WAI-ARIA e NVDA. Reinaldo Ferraz W3C Brasil

Tamanho: px

Começar a partir da página:

Download "Fazendo a Web falar: HTML5, WAI-ARIA e NVDA. Reinaldo Ferraz W3C Brasil"

Giuliana Gil Veiga
8 Há anos
Visualizações:

1 Fazendo a Web falar: HTML5, WAI-ARIA e NVDA Reinaldo Ferraz W3C Brasil

2 Em breve

5 Acessibilidade na Web: A quem se destina?

6 Cegos - daltônicos - baixa visão

7 Deficiência auditiva

8 Deficiência motora

9 Estatísticas Pessoas com deficiências no Brasil 24% pessoas Fonte: Censo 2010

10 Estatísticas No mundo, esse número é aproximadamente 1 bilhão de pessoas Fonte: ONU

13 Você acha que sabe tudo do seu usuário?

14 NÃO

15 Você não tem controle sobre o seu usuário

16 Acessibilidade deve fazer parte da rotina

18 Web Content Accessibility Guidelines

19 Princípios do WCAG Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto

20 ARIA e HTML5 WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas.

Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário

21 ARIA e HTML5 73 ROLES (Ou Papéis) progressbar radiogroup scrollbar slider spinbutton status Tab tabpanel textbox tooltip alert Alertdialog button checkbox dialog menu menubar menuitem option...

22 ARIA e HTML5 35 States and Properties (Estados e Propriedades) aria-activedescendant aria-atomic aria-autocomplete aria-busy (state) aria-checked (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-expanded (state) aria-flowto aria-grabbed (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns...

23 ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em JAWS 10 NVDA VoiceOver no iphone IOS4.

26 As WCAG utilizam a semântica do HTML para tornar o conteúdo acessível ARIA são atributos que conseguem mudar a semântica dos elementos para tornar o conteúdo acessível

28 Situação 1: Uma galeria de imagens

29 <img src= starwars.jpg alt= Foto com a capa do filme Star Wars O império contra ataca >

30 <div class="foto" role="img" aria-label="logo do W3C que está dentro do CSS"></div> <img src="img-slides/w3clogo.png" alt="logo do W3C dentro do HTML">

31 Exemplos

32 Situação 2: Uma página cheia de destaques

35 <a href= #contents >Saltar</a> <elemento id= contents >

36 <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...<h2> <h3>...</h3> <h4>...</h4> <h2>...</h2> <h3>...</h3>

37 Exemplos

38 Situação 3: Menu e Submenus

39 CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"

40 Exemplos

41 Situação 4: Formulários

42 <fieldset> <legend> Identifique-se! </legend> <label for="text"> Nome</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Preencha seu nome de verdade, viu?</p> </fieldset>

43 <fieldset> <legend> Identifique-se! </legend> <label for="text"> Nome</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Preencha seu nome de verdade, viu?</p> </fieldset>

44 <fieldset> <legend> Identifique-se! </legend> <label for="text"> Nome</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Preencha seu nome de verdade, viu?</p> </fieldset>

45 CAPTCHA

46 Exemplos

47 Slider

49 Exemplos

50 Não dá para usar o input type= range?

51 SIM!

52 html5accessibility.com

53 html5accessibility.com

54 Exemplos

55 Situação 5: Utilização de cores

57 Situação 4: Múltiplos idiomas

58 Exemplos

59 Situação 5: Elementos dinâmicos

60 <button role= button aria-pressed= false > <img src= off.png alt= Status Desligado > </button> <button role= button aria-pressed= true > <img src= on.png alt= Status Ligado > </button>

61 Tablist

62 <ul role="tablist"> <li role="tab id="tab1" aria-controls="panel1" aria-selected="false"> Preços</li> </ul> <div id="panel1" aria-labelledby="tab1" role="tabpanel" aria-hidden="true">

63 Exemplos

64 Live Regions

65 Exemplos

66 Dicas importantes para melhorar a acessibilidade Validação de Markup Siga as diretrizes de acessibilidade (WCAG e ARIA) Validação automática de acessibilidade Verificação de avisos Teste com tecnologias assistivas Coloque a acessibilidade na rotina do desenvolvimento

67 Se o seu site não está pronto para receber TODAS as pessoas, o site é deficiente. Adaptado da arq. Thais Frota reinaldo@nic.br

Documentos relacionados

Acessibilidade, HTML5, WAI/ARIA. FrontIn Curitiba Curitiba PR 23 de junho de 2012 Reinaldo Ferraz W3C.br @reinaldoferraz

Acessibilidade, HTML5, WAI/ARIA FrontIn Curitiba Curitiba PR 23 de junho de 2012 Reinaldo Ferraz W3C.br @reinaldoferraz Um pouco do W3C É um consórcio internacional, criado em 1994 por Tim Berners- Lee