When you aim for accessibility, you're guaranteed to hear about WAI-ARIA. But what is ARIA? When do you use it -- and more important, when don't you? We'll take an ebook and learn how to use ARIA to gain accessibility for modern, dynamic content. We'll learn when you can trust HTML to do the right thing, when ARIA is necessary, and where ARIA is necessary but not enough. The workshop focuses on practical examples.

1. Ebooks That Are Dynamic, Beautiful, and
Accessible

2. Deborah Kaplan
Suberic Networks, LLC
https://suberic.net/

3. –
™ Assistive Technology / AT
™ E-reader, Browser, and User Agent
™ Accessibility API
Terminology

4. –
Web Accessibility Initiative:
Accessible Rich Internet Applications
WAI-ARIA

5. –
1. How to use ARIA
2. When not to use ARIA
3. It’s for assistive tech only!
3 Simple Rules

6. –
Okay, it’s a little disingenuous to call this one a “simple rule.”
How to use it

7. ™ Fake HTML semantics
™ Digital publishing semantics
™ Associating & describing
™ Displaying & hiding
™ Actions & form controls
™ Dynamically changing pages

8. ™ Fake HTML semantics
™ Digital publishing semantics
™ Associating & describing
™ Displaying & hiding
™ Actions & form controls
™ Dynamically changing pages

9. –
role
Fake HTML Semantics

10. <button>
Genuine
</button>
<div
class=“button”>
Fake
</div>

11. –

12. <div
class=“button”>
Fake
<div>
<div
class=“button”
Fake
<div>
<div
class=“button”
role=“button”
Fake
<div>

13. <div
class=“button”
role=“button”
Fake
<div>
HEY, LOOK AT
THAT BUTTON!
Screen
Reader
Speech
Recognition
Other AT

14. –

15. –
Widget Roles
™ button
™ checkbox
™ combobox
™ gridcell
™ link
™ listbox
™ menuitem
™ menuitemcheckbox
™ menuitemradio
™ option
™ progressbar
™ radio
™ scrollbar
™ searchbox
™ separator
™ slider
™ spinbutton
™ switch
™ tab
™ tabpanel
™ textbox
™ treeitem

16. –
™ Abstract Roles
™ Widget Roles
™ Document Structure Roles
™ Landmark Roles
™ Live Region Roles
™ Window Roles
https://www.w3.org/TR/wai-aria-1.1/#roles_categorization
So Many Roles!

17. ™ Fake HTML semantics
™ Digital publishing semantics
™ Associating & describing
™ Displaying & hiding
™ Actions & form controls
™ Dynamically changing pages

18. –
abstract doc-abstract
dedication doc-dedication
epilogue doc-epilogue
pull quote doc-pullquote
tip doc-tip
table of contents doc-toc
Digital Publishing semantics:
DPUB-ARIA

20. –
<nav
epub:type="toc“
role=“doc-toc”
>
Redundancy + DPUB-ARIA =
Good

21. –
States and Properties
™ Associating & describing
™ Displaying & hiding
™ Controls
™ Dynamic pages
https://www.w3.org/TR/wai-aria-1.1/#states_and_properties

22. ™ Fake HTML semantics
™ Digital publishing semantics
™ Associating & describing
™ Displaying & hiding
™ Actions & form controls
™ Dynamically changing pages

23. –
Associating & describing
aria-label
aria-labelledby
aria-describedby
aria-details
aria-erorrmessage

24. <button
aria-label=
"Add italic text <ctrl+i>“>

25. <input
aria-describedby="special_desc“
type="text">
<div id="special_desc">
For example, gate code or other information to
help the driver find you</div>

26. ™ Fake HTML semantics
™ Digital publishing semantics
™ Associating & describing
™ Displaying & hiding
™ Actions & form controls
™ Dynamically changing pages

27. –
Displaying & hiding
aria-hidden
Use me very carefully

29. ™ Fake HTML semantics
™ Digital publishing semantics
™ Associating & describing
™ Displaying & hiding
™ Actions & form controls
™ Dynamically changing pages

30. –
Actions & form controls
aria-checked
aria-disabled
aria-invalid
aria-placeholder
aria-required

31. ™ Fake HTML semantics
™ Digital publishing semantics
™ Associating & describing
™ Displaying & hiding
™ Actions & form controls
™ Dynamically changing pages

32. –
But first, a word of warning…
Dynamic pages

33. Progressive
Enhancement

36. ,my ,amaz
+1 ,dynamic1 ,9cr
$ibly ,cool ,ebook

39. –
Stop trying to dissuade us
from cool stuff, Deborah
aria-live

40. Portrait of an Actual
Web Developer

42. <div
aria-live="polite">

43. –
When Not To Use It

44. “Sounds cool”
≠
“Does the right thing”

45. –
™ role=“application”
™ role=“presentation”
™ aria-hidden=“true”
Common Mistakes

46. –

47. HTML5 WAI-ARIA
input required input aria-required=“true”
button div role=“button”
div hidden div aria-hidden
hr div role=“separator”
nav div role=“navigation”
ul div role=“list”
input placeholder=“Text!” input aria-placeholder=“Text!”

48. –
™ Don’t use it if HTML already does the job
™ Don’t add it anyway “just in case.”
™ Do add redundancy if necessary.
™ Do add redundancy for DPUB-ARIA.
Redundant Semantics

49. –
Only Helps AT

50. <button>
Genuine
<button>
<div
role=“button”>
Fake
<div>

51. THEY BOTH
LOOK REAL TO
US!
Screen
Reader
Speech
Recognition
Other AT
ONLY THE
<BUTTON> IS
REAL!

52. –
™ ARIA doesn’t change browser behavior.
™ Keyboard handling is your job!
™ ARIA gives info to screen readers, speech
recognition, and other AT.
For Assistive Tech Only

53. –
In Conclusion

54. ™ Check out your reading list!
™ Keyboard handling is your job!
™ HTML5 semantics > ARIA.
™ Don’t add ARIA just in case.
™ ARIA is awesome.

55. –™ “Accessible Rich Internet Applications (WAI-ARIA) 1.1”. https://
www.w3.org/TR/wai-aria-1.1/
™ “HTML in ARIA”. https://www.w3.org/TR/html-aria/
™ “Digital Publishing WAI-ARIA Module 1.0
. https://www.w3.org/TR/dpub-aria-1.0/
™ “Quick guide to the ARIA specifications
. https://tink.uk/quick-guide-to-the-aria-specifications/
™ “Marco Zehe's Accessibility Blog: category ARIA”. https://
www.marcozehe.de/category/aria/
™ “Using ARIA”. https://www.w3.org/TR/using-aria/
™ “WAI-ARIA Authoring Practices”. https://www.w3.org/TR/wai-aria-
practices/
™ “The Incredible, Accessible, Modal Dialog”. https://gdkraus.github.io/
accessible-modal-dialog/
References

56. –
Some Trusted Sources
in Web Accessibility
™ https://developer.paciellogroup.com/blog/
™ https://www.marcozehe.de/
™ https://tink.uk/

57. ™ Questions?
™ Where can you can
use ARIA?
™ Discuss!