That Are Dynamic Beautiful and Accessible Deborah Kaplan Suberic Networks LLC httpssubericnet Assistive Technology AT Ereader Browser and User Agent Accessibility API Terminology ID: 814816
Download The PPT/PDF document "WAI-ARIA In Practice Ebooks" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
WAI-ARIA In Practice
Ebooks
That Are Dynamic, Beautiful,
and
Accessible
Slide2Deborah Kaplan
Suberic
Networks, LLC
https://suberic.net/
Slide3Assistive Technology / ATE-reader, Browser, and User Agent
Accessibility API
Terminology
Slide4Web Accessibility Initiative:
Accessible Rich Internet Applications
WAI-ARIA
Slide5How to use
ARIA
When not to use ARIA
It’s for assistive
tech only!
3 Simple
Rules
Slide6Okay, it’s a little disingenuous to call this one a “simple rule.”
How to use it
Slide7Fake HTML semantics
Digital publishing semantics
Associating & describing
Displaying & hiding
Actions & form controls
Dynamically changing pages
Slide8Fake HTML semantics
Digital publishing semantics
Associating & describing
Displaying & hiding
Actions & form controls
Dynamically changing pages
Slide9role
Fake HTML Semantics
Slide10<button>
Genuine
</button>
<div
class=“button”>
Fake
</div>
Slide11Slide12<div
class=“button”>
Fake
<div>
<div
class=“button”
Fake
<div>
<div
class=“button”
role=“button”
Fake
<div>
Slide13<div
class=“button”
role=“button”
Fake
<div>
Hey, look at that button!
Screen Reader
Speech Recognition
Other AT
Slide14Slide15Widget Roles
button
checkboxcombobox
gridcell
link
listbox
menuitem
menuitemcheckbox
menuitemradiooptionprogressbar
radioscrollbarsearchbox
separator
slider
spinbutton
switchtabtabpaneltextboxtreeitem
Slide16Abstract 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!
Slide17Fake HTML semantics
Digital publishing semantics
Associating & describing
Displaying & hiding
Actions & form controls
Dynamically changing pages
Slide18abstract
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
Slide19Slide20<
nav
epub:type
="
toc“
role=“doc-toc”
>
Redundancy + DPUB-ARIA = Good
Slide21States and Properties
Associating & describing
Displaying
& hiding
Controls
Dynamic pages
https
://www.w3.org/TR/wai-aria-1.1/#states_and_properties
Slide22Fake HTML semantics
Digital publishing semantics
Associating & describing
Displaying & hiding
Actions & form controls
Dynamically changing pages
Slide23Associating & describing
aria-label
aria-
labelledby
aria-
describedby
aria-details
aria-
erorrmessage
Slide24<button
aria-label=
"
Add italic text <
ctrl+i
>“
>
Slide25<
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>
Slide26Fake HTML semantics
Digital publishing semantics
Associating & describing
Displaying & hiding
Actions & form controls
Dynamically changing pages
Slide27Displaying & hiding
aria-hidden
Use
me
very
carefully
Slide28Slide29Fake HTML semantics
Digital publishing semantics
Associating & describing
Displaying & hiding
Actions & form controls
Dynamically changing pages
Slide30Actions & form controls
aria-checked
aria-disabled
aria-invalid
aria-placeholder
aria-required
Slide31Fake HTML semantics
Digital publishing semantics
Associating & describing
Displaying & hiding
Actions & form controls
Dynamically changing pages
Slide32But first, a word of warning…
Dynamic pages
Slide33Progressive Enhancement
Slide34Slide35Slide36,my ,amaz+1 ,dynamic1 ,9cr$ibly ,cool ,
ebook
Slide37Slide38Slide39Stop trying to dissuade us from cool stuff, Deborah
aria-live
Slide40Portrait of an Actual
Web Developer
Slide41Slide42<div
aria-live
="polite
"
>
Slide43When Not To Use It
Slide44“Sounds cool”
≠
“Does the right thing”
Slide45role=“application”role=“presentation”
aria-hidden=“true”
Common Mistakes
Slide46Slide47HTML5
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!”
Slide48Don’t use it if HTML already does the jobDon’t add it anyway
“just
in case.”Do add redundancy if necessary.
Do
add redundancy for DPUB-ARIA.
Redundant Semantics
Slide49Only Helps AT
Slide50<button>
Genuine
<button>
<div
role=“button”>
Fake
<div>
Slide51They both look real to us!
Screen Reader
Speech Recognition
Other AT
Only the <button> is real!
Slide52ARIA 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
Slide53In Conclusion
Slide54Check out your reading list!
Keyboard
handling is
your
job!
HTML5
semantics
> ARIA.
Don’t add
ARIA
just in case
.
ARIA is awesome.
Slide55“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
Slide56Some Trusted Sources
in Web Accessibility
https://developer.paciellogroup.com/blog
/
https://www.marcozehe.de
/
https://
tink.uk/
Slide57Questions?
Where can
you
can use ARIA?
Discuss!