What is new in ARIA 1.1 and the Authoring Practices Guide

CSUN 2017

March 1, 2017

James Nurthen


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


< 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:

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

Landmark roles

  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search


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



Was it < 5 minutes?

WAI-ARIA 1.1 - The Easy Stuff

New Roles

Voting form with 'None of Above' checked


= role="presentation"

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


A lightswitch Image Source


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


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


Note - we already had role=definiton in ARIA 1.0

A Twitter 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>
  • AT "signals" browser where virtual cursor is.
  • Feed Role
4 Outdoor tables with a few chairs Image Source

role="table" , role="cell"

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


And some new Properties

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




Trees, Dialogs, Grid or Listbox

  • Zebra
  • Zoom
Combo box with A date Dialog popup
Combo box with textbox search within the popup

CAUTION: Changes are more complex than this

Recommend to read Authoring practices guide carefully.

Also - Bryan Garaventa has an excellent Blog on this subject

A yummy pepperoni pizza Image Source
Bill has 5 slices of pizza. He gives 2 slices to Mary. How many slices does he have left?


  • More specific version of a common widget
  • A "new" widget without any known convention for how to operate
Pie chart.
A signpost in London directing to a bunch of different landmarks Image Source



Form Field with hint text showing


Form Field with hint text and an error message showing


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)


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

Doesn't actually implement the shortcut


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)



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)