ARIA

WAI, WHY & WTF

Dennis Deacon / @deconspray

This presentation inspired by

Viking & the Lumberjack

Please note...

  • Not an expert
  • Folks still trying to figure ARIA out
  • Some things are well supported, others not so much
  • ARIA is seriously abused by nubes, don't be a nube
    • ...you'll end up doing more damage than good
    • With that said, you WILL make mistakes ... embrace, fix and move on

My goal tonight

  • Create awareness
  • Provide a high-level overview
    • ...that doesn't mean light on substance
  • Provide a better understanding when and why to use ARIA
  • Walk away motivated to learn more

Before we continue...

Prerequisite for using ARIA

HTML

HTML has roles (mostly)

A role provides an element's purpose.

  • <img> role is to display an image
  • <a> role is to display a hyperlink
  • <main> role is to provide a landmark for the main content of a page
  • <div> & <span> - no default role, can be crafted into whatever you like - custom controls

HTML has Names

Names provide a means to differeniate between elements

  • <img> name is the alternative text description
  • <a> name is the link text
  • <label> text provides the name for the associated input or form field

HTML has States & Properties

Provides information on an elements current state

  • <input type="checkbox" checked> provides information that the checkbox is currently checked.
    • Communicates visually that the checkbox is checked, and by passing this info to assistive technology, allows the user to become aware the checkbox is checked
  • <select required> the required attributed notifies that this form element is required.

HTML handles keyboard focus and interaction

Provides visual cues and default interaction with actionable elements

  • <a> can be followed by pressing the Enter key
  • <button> can be acted on by pressing the Space key
    • Action outside of form container dependant on JavaScript

HTML

  • Use it
  • Do as little as possible
  • Let HTML and the browser handle the majority of your needs

Accessibility APIs

  • Platform-specific, yet similar
  • Provides role, name and state info that is accessed by browsers and asssitive technology

W3C's HTML Accessibility API Mappings 1.0

http://www.w3.org/TR/html-aam-1.0/

Browsers

  • Creates a Document Object Model (DOM) of the page
  • Creates an Accessibility Tree of the page
  • While the DOM can be manipulated with JavaScript, the Accessibility Tree cannot be manipulated (today)

ARIA

What is ARIA?

  • Accessible Rich Internet Applications
  • A means for providing semantic value
  • Like a vitamin, ARIA supplements semantic meaning Vitamin ARIA

ARIA has commandments

ARIA Commandment #1

  • Thou shalt not use ARIA
    “Say What!?”
    • If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, use that element or attribute
    • Don't use to re-purpose an element and add an ARIA role, state or property to make it accessible.


Click here

Click here

ARIA Commandment #2

  • Thou shalt not change native semantics (unless you're weak-minded, poorly organized or desperate)
    • Do not change native semantics, unless you really have to.
      • Before changing native semantics, look for any other way, including using the native element


Click here

ARIA Commandment #3

  • Thou shalt make all interactive ARIA controls usable with the keyboard
    • If you create an interactive widget, a user must also be able to navigate to the widget and perform an equivalent action using the keyboard.
    • All interactive widgets must be scripted to respond to standard key strokes or key stroke combinations where applicable.

ARIA Commandment #4

  • Thou shalt not use role="presentation" or aria-hidden="true" on a visible focusable element
    • Using either of these on a visible focusable element will result in some users focusing on 'nothing'.
    • Don't do either of the following:

ARIA Commandment #5

  • Thou shalt provide an accessible name for all interactive elements
    • An interactive element only has an accessible name when it's Accessibility API accessible name (or equivalent) property has a value.

ARIA Roles, States and Properties

ARIA Roles

  • Describe the structure of the Web page
  • Describe the type of widget presented

What Roles Do Not Do

  • Does not make an element look or act differently for people not using assistive technology
  • Does not change the behaviours, states and properties of the host element but only the native role semantics.

Before we go any further...

Adding an ARIA role overrides the native role semantics, therefore ARIA indirectly affects what is reported to a screen reader or other assistive technology.

When to use ARIA roles

  • When the semantics you need don't exist otherwise
    (i.e. <div>,<span>, tablist tabpanel)
  • When the semantics are weak or are not well supported (you may have to duplicate)

Roles (not complete list)

    Navigational Landmarks

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

    • UI Widgets

  • alert
  • button
  • checkbox
  • dialog
  • gridcell
  • link
  • menuitem
  • radio
  • slider
  • tab
  • tablist
  • tabpanel
  • tooltip

Landmark Roles

Provides web page landmarks for navigation, wayfinding

role="banner"role="navigation"role="search"
role="main"
role=
"complimentary"
role="contentinfo"

Links




Click here...


						


Click here...

Button




Go to CNN

Links vs. Button

  • Links navigate to another resource
    • Keyboard-focusable; triggered by the Enter key
  • Buttons are a hook for a JavaScript-driven event
    • Keyboard-focusable; triggered by the Space key

role="application"

  • Beware of
  • Use with caution and only with complete understanding
  • Completely changes mode

role="presentation"

  • Beware of
  • Use with caution and only with complete understanding
  • Completely changes/removes semantics

States

  • Used to provide current state of role or object
  • Usually updated through scripting, user action
  • Parameter using the aria- prefix
    (ex. aria-hidden="true")

States & Properties
(not complete list)

  • aria-label
  • aria-labelledby
  • aria-live
  • aria-checked
  • aria-disabled
  • aria-expanded
  • aria-hidden
  • aria-required
  • aria-selected
  • aria-describedby
  • aria-atomic
  • aria-live

States & Properties

ARIA - Inline vs. Script

  • Inline:
    • Doesn't rely on scripting to provide interaction behaviour
      • It's fine to add ARIA landmark roles or ARIA labelling and describing attributes inline
  • Via Script
    • Use it to change/alter existing inline ARIA states/properties
      • Similar to scripting hide/show, aria-hidden="false/true"

ARIA Examples

aria-label

  • Apples
  • Beans
  • Toilet Paper

aria-labelledby

Billing Address
Name
Address

aria-labelledby vs
aria-describedby

  • aria-labelledby describes the essence of an object
    • What this is
    • A label pre-existing nearby on the page
  • aria-describedby provides more information that the user might need
    • More info about this item
    • Help text, expected input

ARIA Demos

Resources

Questions?