Dit zijn de slides van mijn Fronteers-talk op 27 september 2017. Zonder het verhaal en de demo's erbij, niet bijzonder leerzaam. Vandaar, heb je vragen: aarzel niet. Je vindt me op Twitter: @roelvangils.

1. Kennismaking met WAI-ARIA
en de Accessibility Tree
Roel Van Gils (Fronteers,28 September 2017)

5. Web
Accessibility
Initiative

6. Accessible
Rich Internet
Applications

7. ARIA is op zich niets
meer dan een hele hoop
HTML-attributen die we
roles en properties
noemen.

8. aria-role="checkbox"

9. aria-checked="true"

10. aria-hidden="true"

11. ARIA Landmarks

13. <header role="banner">
Naam, logo en tagline
</header>
<nav role="navigation">
Lijst met navigatie-items
</nav>
<main role="main">
Eigenlijke inhoud
</main>

14. <aside role="complementary">
Aanvullende info
</aside>
<footer role="contentinfo">
Footer
</footer>

15. !
Kleine instinker
<ul role="navigation">
<li><a href="…">Home</a></li>
<li><a href="…">Over Ons</a></li>
<li><a href="…">Contact</a></li>
</ul>

16. !
Kleine instinker
<ul role="navigation">
<li><a href="…">Home</a></li>
<li><a href="…">Over Ons</a></li>
<li><a href="…">Contact</a></li>
</ul>
!
Navigatie [tab] Home [tab] Over ons [tab] Contact
[tab] Item etc.

17. !
Beter!
<nav role="navigation">
<ul>
<li><a href="…">Home</a></li>
<li><a href="…">Over Ons</a></li>
<li><a href="…">Contact</a></li>
</ul>
</nav>

18. !
Beter
<nav role="navigation">
<ul>
<li><a href="…">Home</a></li>
<li><a href="…">Over Ons</a></li>
<li><a href="…">Contact</a></li>
</ul>
</nav>

19. !
Beter
<nav role="navigation">
<ul>
<li><a href="…">Home</a></li>
<li><a href="…">Over Ons</a></li>
<li><a href="…">Contact</a></li>
</ul>
</nav>
!
Navigatie [tab] Lijst met twee items [tab] Item 1: Home
[tab] Item 2: Over ons [tab] Etc.

20. Welk andere problemen
lost ARIA op?

21. — HTML heeft een beperkt aantal elementen en
attributen om interactieve componenten te bouwen
— Dat lossen we al jaren op met JavaScript
— JavaScript heeft ons vele mooie dingen gebracht
— Client-sided validatie
— Modal dialogs en tabbed interfaces
— Date pickers
— Carrousels

22. ☠
Carrousels

23. 'Why' ARIA?

25. Context

26. Accessibility in twee
minuten

27. Technologie toegankelijk
maken voor iedereen,zonder
aannames te maken over wat
mensen kunnen of hebben.

28. 'Your missing 20%'

29. ! "

30. Good design = POUR design
— Perceivable
— Operable
— Understandable
— Robust

31. A11y is een team effort

33. Front-end web
development

36. Terug naar ARIA

37. Drie Aha-momentjes

39. Drie Aha-momentjes
1. Pagina-semantiek
2. Focus management
3. De Accessibility Tree

40. Accessibility Tree

43. Aanzetten in Chrome
— In Chrome, ga naar chrome://flags/
— Zoek naar Developer Tools Experiments en klik op
Enable
— Open DevTools met ⌥ + ⌘ + i en vink Accessibility aan
in Settings

47. Voorbeeld 1
Tooltips

48. Screenreader Demo

49. Gebruikte ARIA-attributen
— role="tooltip"
— aria-describedby="[IDREF]"

51. <fieldset>
<legend>Aanmelden</legend>
<div>
<label for="username">Gebruikersnaam</label>
<input type="text" id="username"
aria-describedby="username-tip" required="">
<div role="tooltip" id="username-tip">
Je gebruikersnaam is je e-mailadres
</div>
</div>
<div>
<label for="password">Wachtwoord</label>
<input type="text" id="password"
aria-describedby="password-tip" required="">
<div role="tooltip" id="password-tip">
Wachtwoord vergeten? Klik op 'Nieuw wachtwoord aanvragen'
</div>
<p><a href="#">Nieuw wachtwoord aanvragen</a></p>
</div>
</fieldset>

52. Voorbeeld 2
Formulieren

53. Screenreader Demo

54. Gebruikte ARIA-attributen
— aria-hidden
— aria-label
— aria-labelledby
— aria-describedby

58. Voorbeeld 3
Live-updates

59. Screenreader Demo

60. Gebruikte ARIA-attributen
— role="alert"
— aria-live="assertive|polite|off"

61. <section id="offline-alert">
<div id="status"
aria-live="assertive" role="alert"
class="online">Niks aan de hand.
</div>
</section>

63. aria-live="polite"
Screenreader leest gewijzigde tekst van zodra hij klaar is met
praten. Beleefd dus.

65. aria-live="assertive"
Sreenreader spreekt de gewijzigde tekst onmiddellijk uit.
Als hij bezig was andere tekst uit te spreken, wordt die
onderbroken.

66. Atomic versus relevant
— Met aria-atomic=true (default) wordt alles binnen
de Live Region voorgelezen als de textContent verandert.
— Met aria-relevant=true worden enkele
toevoegingen opgelezen.

67. Opgelet!
— role="alert" is een impliciete (polite) live region
— De Live Region container moet al deel zijn van de
pagina's; er zijn issues met dynamisch genereren

68. Toepassingen
— De veranderde totaalprijs in een boodschappenmandje
— Waarschuwing als max. aantal karakters in een tweet
bereikt is
— Het aantal resultaten bij filters / facetnavigatie.
— Notification banners (zonder OK-knop)
— Chat bots

70. Opgelet!
Aria-live is handig en de support is goed. Overdrijf er echter
niet mee.

71. WARNING

72. alert alertdialog button
checkbox dialog gridcell
link log marquee
menuitem menuitem
checkbox

73. menuitem radio option
radio scrollbar slider
tab tabpanel textbox
timer tooltip

74. De knop

76. <mijnKnop>Sign up<!</mijnKnop>

77. <mijnKnop class="fancy">Sign up</mijnKnop>
.fancy {
display: inline-block;
color: white;
background: blue;
padding: 20px;
font: 20px sans-serif bold;
border-radius: 8px;
border: none;
cursor: pointer;
}

78. <mijnKnop class="button"
tabindex="0">Sign up</mijnKnop>

79. <mijnKnop class="button" role="button"
tabindex="0">Sign up</mijnKnop>

80. Computer says no

81. var buttons = Array.from(document.querySelectorAll('[role=button]'));
buttons.forEach(function(button) {
button.addEventListener('click', function() {
doeIetsNuttigs();
});
button.addEventListener('keyup', function(event) {
if (event.key == ' ') or (event.key == 'Enter') {
doeIetsNuttigs();
}
});
});

82. Doe-het-zelf Checklist
— Gebruik de juiste role (role=button in dit geval)
— Voeg tabindex=O toe zodat de knop bereikt kan
worden zonder muis
— Voeg stijlen toe voor :focus en :hover
— Vang niet enkel click events op, maar ook keyup
events!

83. Meer leren?

84. A11ycasts op YouTube = de max

91. Onthouden
1. Wijzig native semantics niet als het niet nodig is
2. ARIA is niet magisch: zorg ervoor dat interactieve
elementen bereikbaar en activeerbaar zijn
3. Check je Accessibility Tree
4. Tijd over? Check met NVDA, Jaws of VoiceOver. Handig
op iPad!
5. aria-live is handig, maar gebruik het met mate

92. Einde / Vragen
— @roelvangils op Twitter
— roel@11ways.be