1) O documento discute o uso do WAI-ARIA para tornar conteúdos e aplicativos web mais acessíveis. 2) O WAI-ARIA define papéis e propriedades para elementos que permitem alterar sua semântica e melhorar a acessibilidade. 3) Quatro regras são apresentadas para o bom uso do WAI-ARIA: utilizar elementos semânticos do HTML quando possível, não alterar a semântica dos elementos, garantir acessibilidade via teclado e não ocultar elementos focáveis.

1. Quando e como usar
WAI-ARIA
Web sem Barreiras
4 de agosto de 2018
Reinaldo Ferraz

2. • https://pt.slideshare.net/reinaldoferraz
• https://pt.slideshare.net/CentroWeb/
@reinaldoferraz
Ilustração por Iconicbestiary - Freepik.com

5. WCAG WAI-ARIA
WCAG
ARIA

6. Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG/
WCAG

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

8. 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.
http://www.w3.org/WAI/intro/aria

9. progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES (Ou Papéis)
alert
Alertdialog
button
checkbox
dialog
menu
menubar
menuitem
option
...
http://www.w3.org/TR/wai-aria/roles#role_definitions

10. 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)
35 States and Properties (Estados e Propriedades)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-level
aria-live
aria-multiline
aria-multiselectable
aria-orientation
aria-owns
...
http://www.w3.org/TR/wai-aria/states_and_properties

11. Implementação por leitores de tela:
Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no iPhone IOS4.

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

13. Quatro regras para o bom uso de
WAI-ARIA

14. Regra nº 1
Não use ARIA
(prefira os elementos semânticos do HTML)

15. <span>Enviar</span>
<span onclick=“Event(this)”>Enviar</span>
<span onclick=“Event(this)”
onmouseover=“Event(this)”
onmouseout=“Event(this)”>Enviar</span>
<span onclick=“Event(this)”>
onmouseover=“Event(this)”
onmouseout=“Event(this)”
onfocus=“Event(this)”
onblur=“Event(this)”>Enviar</span>
<span role=“button” onclick=“Event(this)”>
onmouseover=“Event(this)”
onmouseout=“Event(this)”
onfocus=“Event(this)”
onblur=“Event(this)”>Enviar</span>

16. <button>Enviar</button>

17. Regra nº 2
Não mude a semântica
dos elementos
(apenas se você realmente precisar)

18. Não faça isso:
<h1 role=button>heading button</h1>

19. Não faça isso:
<h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>

20. Não faça isso:
<h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>
Se não puder usar o elemento correto, faça isso:
<h1>
<span role=button>heading button</span>
</h1>

21. Regra nº 3
Todos os controles
interativos devem ser
acessíveis via teclado

23. Regra nº 4
Não use role="presentation" ou
aria-hidden="true“ em um
elemento de foco visível

24. <h1 role=presentation>
heading button
</h1>
<h1 aria-hidden=true>
heading button
</h1>

25. • Navegação
• Conteúdo escondido
• Falta de controle pelo usuário
• Confusão/desorientação
Ótimo artigo sobre esse tópico: http://webaim.org/techniques/javascript/
Javascript e leitores de tela

26. Javascript e leitores de tela

27. Web Aim Screen Reader Survey
Fonte: http://webaim.org/projects/screenreadersurvey5/#javascript
Pesquisa feita com 1465 usuários de software
leitor de tela em Janeiro de 2014
Javascript e leitores de tela

28. Web Aim Screen Reader Survey
Fonte: http://webaim.org/projects/screenreadersurvey5/#javascript
97.6% mantém o JavaScript habilitado
Javascript e leitores de tela

29. JAWS 16
- Suporte a MathML (FF e IE)
- Lê cores de fundo (FF)
- Maior suporte a ARIA
NVDA 2015.2
- Suporte aos principais landmarks de ARIA
ORCA / VoiceOver
- Suporte a Live Regions
Javascript e leitores de tela

30. Quando usar? ou não...

31. Descrever regiões do site

32. Descrever regiões do site
<div id="header" role="banner">
A banner image and introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">
...a list of links here ... </div>
<div id="content" role="main">
... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">
....an advertisement here...</div>
<div id="footer" role="contentinfo">
c)The Freedom Company, 123 Freedom Way, Helpville,
USA</div>

33. Descrever regiões do site
<header>
A banner image and introductory title</header>
<input type=“search”>
<nav>
...a list of links here ... </nav>
<main>
... Ottawa is the capital of Canada ...</main>
<aside>
....an advertisement here...</aside>
<footer>
c)The Freedom Company, 123 Freedom Way, Helpville,
USA</footer>

34. Descrever regiões do site
header
nav aside
aside
article
section

35. https://caniuse.com/#feat=wai-aria

36. Descrição de conteúdos invisíveis

37. Descrição de conteúdos invisíveis
<div class="foto"
role=“img”
aria-label="Logo do W3C">
</div>
<label for=“pais” aria-label=“Este campo atualiza
automaticamente o próximo campo”>
Selecione o país</label>
<select id=“pais”>
<option>Argentina</option>
<option>Brasil</option>
<option>Bolívia</option>
<option>Chile</option>
<option>Equador</option>
<option>Peru</option>
</select>

38. Relacionar informações
<form>
<fieldset>
<legend>Casa de espetáculos</legend>
<label for=“valor">Valor do ingresso</label>
<input type=“valor" id=“valor"
aria-describedby="complementar">
<p id="complementar “>
O valor deve ser preenchido em reais</p>
</fieldset>
</form>

39. role=“application”
role=“tree”
role=“treeitem”
aria-expanded=“false"
aria-expanded="true"
role=“treeitem”
Definir status de elementos

40. Definir status de elementos

41. Definir status de elementos
<span role="checkbox" aria-checked="false" tabindex="0"
aria-labelledby=“unchecked"></span>
<span role="checkbox" aria-checked=“true" tabindex="0"
aria-labelledby=“checked"></span>

42. Definir status de elementos
<input type="radio" name="exemplo01" id="exemplo01">
<label for="exemplo01">Unchecked</label>

43. aria-live: Determina a prioridade da leitura pela TA (off, polite, assertive)
Conteúdo dinâmico

44. <span id="messages" aria-live="polite" >
Fulano adicionou você como amigo
</span>
Conteúdo dinâmico

45. Aplicar técnicas de acessibilidade em um site
com usabilidade ruim é como passar batom
em um porco. Não importa o quanto você
passe, ele continuará sendo um porco.
Não faça da ARIA o seu batom.
Fonte: http://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
Mantenha sua aplicação simples

46. Obrigado
www.ceweb.br
reinaldo@nic.br @reinaldoferraz
08 de agosto de 2018