What is new in ARIA 1.1 and the Authoring Practices Guide

CSUN 2017

March 1, 2017

James Nurthen

https://jnurthen.github.io/presentations/aria-csun.html#/

Twitter: @jnurthen

About Me

Worked at Oracle for a long time....
Accessibility for 15+ years
W3C ARIA and AG working groups
Co-Editor of ARIA Authoring Practices Guide

ARIA 1.0

Reached Recommendation March 2014

ARIA 1.1
- Quick...
- Close Gaps
- Bugfixes
ARIA Modules
- Graphics Module
- DPUB Module
ARIA 1.2
- Quick
- HTML5 role parity
ARIA 2.0

WAI-ARIA 1.0

< 5 minute intro

Fake Buttons


						
	My Fake Button

But What about Keyboard users?

Fake Buttons


						
	My Fake Button

But What about Screen Reader users?

Fake Buttons


						
	My Fake Button

Need to Expose the “Role” (and any states and properties) for an element
Here this is a “button” or a “push button”

WAI-ARIA Introduction

ARIA defines attributes to convey:

Role: What is this? (e.g. button, tab, treeitem)
States: What condition it is in (e.g. Pressed, disabled)
Properties: Any other information about the item (e.g. position in a set of values)
Name: What is the specific name of the item (e.g. Employee Name)

Landmark roles

banner
complementary
contentinfo
form
main
navigation
search

http://www.w3.org/TR/wai-aria/

Document structure roles

article
columnheader
definition
directory
document
group
heading
img
list
listitem
math
note
presentation
region
row
rowheader
separator
toolbar

Standalone widget roles

alert
alertdialog
button
checkbox
dialog
gridcell
link
log
marquee
menuitem
menuitemcheckbox
menuitemradio
option

progressbar
radio
scrollbar
slider
spinbutton
status
tab
tabpanel
textbox
timer
tooltip
treeitem

Composite widget roles

combobox
grid
listbox
menu
menubar
radiogroup
tablist
tree
treegrid

http://www.w3.org/TR/wai-aria/roles#widget_roles

WAI-ARIA 1.0

Was it < 5 minutes?

WAI-ARIA 1.1 - The Easy Stuff

New Roles

Voting form with 'None of Above' checked

role="none"

= role="presentation"

Remember - just like role=presentation, don't use it on anything that takes focus

Testcase

role="switch"

<div role="switch checkbox" aria-checked="true">

Testcase

You are currently on a switch, inside of web content. To select or deselect this checkbox, press Control=Option-Space. To exit this web area, press Control...

Equivalents to HTML roles

role="term": dt
role="searchbox": input[type="search"]
role="figure": figure

Note - we already had role=definiton in ARIA 1.0

role="feed"

<div role="feed">
	<article tabindex="-1">Story 1</article>
	<article tabindex="-1">Story 2</article>
	<article tabindex="-1">Story 3</article>
	<article tabindex="-1">Story 4</article>
	
</div>

AT "signals" browser where virtual cursor is.
Feed Role

role="table" , role="cell"

<div role="table">
  <div role="row">
    <div role="columnheader">Header 1</div>
    <div role="columnheader">Header 2</div>
  </div>
  <div role="row">
    <div role="cell">Cell 1</div>
    <div role="cell">Cell 2</div>
  </div>
</div>

Testcase

And some new Properties

Also - new magic value of aria-colcount, aria-rowcount & aria-setsize of -1

Implementations

Chrome??

Comboboxes

Trees, Dialogs, Grid or Listbox


    


    Zebra
    Zoom

CAUTION: Changes are more complex than this

Recommend to read Authoring practices guide carefully.

Also - Bryan Garaventa has an excellent Blog on this subject

Bill has 5 slices of pizza. He gives 2 slices to Mary. How many slices does he have left? 5 4 3 2 1

aria-roledescription

More specific version of a common widget
A "new" widget without any known convention for how to operate

A signpost in London directing to a bunch of different landmarks

<del>role=application<del>

<ins>role=region</ins>

`aria-errormessage`

Form Field with hint text and an error message showing

aria-modal

Allows to specify that a dialog is modal or not modal.

A well behaving screen reader will "hide" the rest of the content on the page if modal

FF45 + JAWS18
VO + Safari(iOS10)

aria-keyshortcuts

Allows to specify what are the shortcut to navigate to or activate something

Doesn't actually implement the shortcut

aria-current

specifies that this is the current "thing" in the superset of "things"

Chrome (windows, linux), Webkit (MacOS, iOS), JAWS18
https://ljwatson.github.io/design-patterns/aria-current/

Some other miscellaneous changes

aria-activedescendent - on more roles and no longer has to be a descendent
aria-details
aria-placeholder
aria-haspopup - new values specifying what type of popup
aria-readonly, aria-orientation, aria-posinset, aria-setsize (on more roles)
~~aria-grabbed, aria-dropeffect, (aria-describedat)~~

Modules

Graphics

Digital Publishing

What is next?

ARIA 1.2

ARIA 2.0?

Design Patterns

Other stuff....

Authoring Practices Guide (APG)

Strip out old content
Review all the Design Patterns
Create Hosted (vanilla) examples for all design patterns (help needed!!)
Review and re-write all old content.

Authoring Practices Guide (APG)

How can you help?

Create Example code
Log Issues
Submit PRs for open issues
All on github https://github.com/w3c/aria-practices
Please look in Editor's Draft before logging issues

APG Target Dates

Target: all required patterns complete when ARIA 1.1 goes to PR
6 months after PR: all patterns which were in previous versions re-added

More Information

ARIA 1.1 (Candidate Recommendation)

ARIA 1.1 Authoring Practices(Working Draft)

WAI-ARIA Graphics Module 1.0 (Working Draft)

Digital Publishing ARIA 1.0 Module (Candidate Recommendation)

Thanks

Questions?

@jnurthen