/
WAI-ARIA In Practice Ebooks WAI-ARIA In Practice Ebooks

WAI-ARIA In Practice Ebooks - PowerPoint Presentation

interviewpsych
interviewpsych . @interviewpsych
Follow
342 views
Uploaded On 2020-10-22

WAI-ARIA In Practice Ebooks - PPT Presentation

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

amp aria semantics div aria amp div semantics https fake role html wai roles www digital publishing associating pages

Share:

Link:

Embed:

Download Presentation from below link

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.


Presentation Transcript

Slide1

WAI-ARIA In Practice

Ebooks

That Are Dynamic, Beautiful,

and

Accessible

Slide2

Deborah Kaplan

Suberic

Networks, LLC

https://suberic.net/

Slide3

Assistive Technology / ATE-reader, Browser, and User Agent

Accessibility API

Terminology

Slide4

Web Accessibility Initiative:

Accessible Rich Internet Applications

WAI-ARIA

Slide5

How to use

ARIA

When not to use ARIA

It’s for assistive

tech only!

3 Simple

Rules

Slide6

Okay, it’s a little disingenuous to call this one a “simple rule.”

How to use it

Slide7

Fake HTML semantics

Digital publishing semantics

Associating & describing

Displaying & hiding

Actions & form controls

Dynamically changing pages

Slide8

Fake HTML semantics

Digital publishing semantics

Associating & describing

Displaying & hiding

Actions & form controls

Dynamically changing pages

Slide9

role

Fake HTML Semantics

Slide10

<button>

Genuine

</button>

<div

class=“button”>

Fake

</div>

Slide11

Slide12

<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

Slide14

Slide15

Widget Roles

button

checkboxcombobox

gridcell

link

listbox

menuitem

menuitemcheckbox

menuitemradiooptionprogressbar

radioscrollbarsearchbox

separator

slider

spinbutton

switchtabtabpaneltextboxtreeitem

Slide16

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!

Slide17

Fake HTML semantics

Digital publishing semantics

Associating & describing

Displaying & hiding

Actions & form controls

Dynamically changing pages

Slide18

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

Slide19

Slide20

<

nav

epub:type

="

toc“

role=“doc-toc”

>

Redundancy + DPUB-ARIA = Good

Slide21

States and Properties

Associating & describing

Displaying

& hiding

Controls

Dynamic pages

https

://www.w3.org/TR/wai-aria-1.1/#states_and_properties

Slide22

Fake HTML semantics

Digital publishing semantics

Associating & describing

Displaying & hiding

Actions & form controls

Dynamically changing pages

Slide23

Associating & 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>

Slide26

Fake HTML semantics

Digital publishing semantics

Associating & describing

Displaying & hiding

Actions & form controls

Dynamically changing pages

Slide27

Displaying & hiding

aria-hidden

Use

me

very

carefully

Slide28

Slide29

Fake HTML semantics

Digital publishing semantics

Associating & describing

Displaying & hiding

Actions & form controls

Dynamically changing pages

Slide30

Actions & form controls

aria-checked

aria-disabled

aria-invalid

aria-placeholder

aria-required

Slide31

Fake HTML semantics

Digital publishing semantics

Associating & describing

Displaying & hiding

Actions & form controls

Dynamically changing pages

Slide32

But first, a word of warning…

Dynamic pages

Slide33

Progressive Enhancement

Slide34

Slide35

Slide36

,my ,amaz+1 ,dynamic1 ,9cr$ibly ,cool ,

ebook

Slide37

Slide38

Slide39

Stop trying to dissuade us from cool stuff, Deborah

aria-live

Slide40

Portrait of an Actual

Web Developer

Slide41

Slide42

<div

aria-live

="polite

"

>

Slide43

When Not To Use It

Slide44

“Sounds cool”

“Does the right thing”

Slide45

role=“application”role=“presentation”

aria-hidden=“true”

Common Mistakes

Slide46

Slide47

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!”

Slide48

Don’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

Slide49

Only Helps AT

Slide50

<button>

Genuine

<button>

<div

role=“button”>

Fake

<div>

Slide51

They both look real to us!

Screen Reader

Speech Recognition

Other AT

Only the <button> is real!

Slide52

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

Slide53

In Conclusion

Slide54

Check 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

Slide56

Some Trusted Sources

in Web Accessibility

https://developer.paciellogroup.com/blog

/

https://www.marcozehe.de

/

https://

tink.uk/

Slide57

Questions?

Where can

you

can use ARIA?

Discuss!