ARIA + HTML5

ARIA + HTML5

Steve Faulkner & Hans HillenThe Paciello Group

forewardIf you can avoid using:— JavaScript— CSS— ARIA— HTML5

DO IT!Now back to reality...

not an expert

I am not an expertI know some things about HTML5 and WAI-

ARIAI know some people who know some other things about HTML5 and WAI-ARIAI will hold up a virtual sign if you ask a question I cannot answerConsider it held up when you ask a question and I look vague

the signHans or Gez or Leonieemail

or tweet

What is the primary use case for ARIA?

There’s a clue in the name:Accessible Rich Internet

Applications

What was the original name for HTML5?

“This specification introduces features to HTML and the DOM that ease the authoring of Web-based applications.”

Web application

No JavaScript

No CSS

Web application

No CSS

No JavaScript

ARIA?

WAI-ARIA Introduction

What is it?

It’s a W3C Specification, like HTML, CSS etc.

ARIA is not so much about content

ARIA is about interaction

ARIA?

Much of ARIA only makes sense in conjunction with scripting.

Much of ARIA is about making sense of scripted interaction

ARIA?

ARIA? Small subset not scripting related

ARIA Stuff that makes sense without scripting

—Landmark roles—A few of the relationship

attributes—A few of the document structure

roles

ARIA is a ‘bridging technology’

HTML- 2.0 1995button

HTML- 5 2013

2013

<div tabindex="0" role="button" act="20" class="T-I J-J5-Ji nu T-I-ax7 L3" style="-moz-user-select: none;" aria-label="Refresh" data-tooltip="Refresh">

<div class="asa"><span class="J-J5-Ji ask">&nbsp;</span>

<div class="asf T-I-J3 J-J5-Ji"></div>

</div>

</div>

ARIA not just about HTMLARIA can/could be used with any markup

language.— HTML— SVG – ARIA in SVG 2— MATHML— MXML— XUL

ARIA+XUL

Firebug

Hans hillen

ARIA and RIAs

Issues with (accessible) rich internet applicationso Number 1 is the problems associated with

custom controlso Number 2 is all the other usual issues with the

accessibility of web content Number 1 can be helped by use of ARIA

markup

ARIA and RIAs

WAI-ARIA Introduction

WAI = Web Accessibility Initiative

ARIA = Accessible Rich Internet Applications

ARIA and RIAs

<div tabindex="0" act="20" class="T-I J-J5-Ji nu T-I-ax7 L3" style="-moz-user-select: none;" data-tooltip="Refresh">

<div class="asa"><span class="J-J5-Ji ask">&nbsp;</span>

<div class="asf T-I-J3 J-J5-Ji"></div>

</div>

</div>

source: Gmail

This is the problem:

2013 – Google presentation app

HTML:1, HEAD:1, META:7, TITLE:1, SCRIPT:103, STYLE:11, LINK:3, BODY:1, DIV:2160, H2:1, OL:2, LI:4, A:17, SPAN:596, IMG:6, TABLE:29, TBODY:29, TR:106, TD:572, NOSCRIPT:1, TEXTAREA:4, I:1, INPUT:2, svg:42, rect:158, g:2505, text:1263, path:135, tspan:45, defs:39, filter:39, feGaussianBlur:39, image:29, line:31, IFRAME:5, B:2, UL:1, TH:20, H3:10

What’s it do?OK

link graphic OK

ARIA and RIAs

ARIA role=“button"

What’s it do?OK

button OKTo activate press spacebar

What’s gained?Correct role information:

“Button”Usage instructions:

“To activate press spacebar””

ARIA role=“button"

Highlight (on)Highlight (off)

button Highlight

pressed

button Highlight

aria-pressed="false" aria-pressed=“true"

aria-pressed=“true|false"

What’s gained?

state information:

“pressed”

aria-pressed=“true|false"

2013 – Google presentation app

HTML:1, HEAD:1, META:7, TITLE:1, SCRIPT:103, STYLE:11, LINK:3, BODY:1, DIV:2160, H2:1, OL:2, LI:4, A:17, SPAN:596, IMG:6, TABLE:29, TBODY:29, TR:106, TD:572, NOSCRIPT:1, TEXTAREA:4, I:1, INPUT:2, svg:42, rect:158, g:2505, text:1263, path:135, tspan:45, defs:39, filter:39, feGaussianBlur:39, image:29, line:31, IFRAME:5, B:2, UL:1, TH:20, H3:10

Custom button

Steps to make a custom button accessible

ARIA and RIAs

ARIA attribute

s

role aria-*<div role="banner"> <div aria-haspopup="true">

ARIA and RIAs

role

widgetDocument structure‘heading’

Landmark‘main’

abstract

ARIA and RIAs

widget

Simple‘button’

Composite‘menubar’

typically act as containers that manage other, contained widgets.

aria-*

Widget‘aria-

checked’Live Region‘aria-live’

Drag & Drop‘ aria-

dragged’

Relationship‘aria-

labelledby’

Properties (including states) attributes

ARIA and RIAs

ARIA roles- They are not magic!They do not (generally) add ANY interaction

behaviours.Adding a role does not: Make an element focusable Provide keyboard events Add properties

ARIA and RIAs There are conformance rules:oHTML5 – WAI-ARIA 3.2.7

But they are difficult to decipheroUsing ARIA in HTML

ARIA and RIAs

ARIA validation• Use of ARIA in HTML<5 is non conforming and

probably always will be.• It doesn’t make any difference, it still works• The easiest method is to use the

HTML5 DOCTYPE with ARIA markup and validate using the W3C Nu Markup Validation Service.

<!DOCTYPE html>

http://validator.w3.org/nu/

LandmarksThe following roles are regions of the page intended as navigational landmarks.

banner = <header> html5*

complementary = <aside> html5

contentinfo = <footer> html5*

form = <form> html4

main = <main> html5

navigation = <nav> html5

SearchApplication =

don’t use as a landmark

Landmarks

Using WAI -ARIA Landmark Roles | Screen reader support for HTML5 sections

aria-*

Widget‘aria-

checked’Live Region‘aria-live’

Drag & Drop‘ aria-

dragged’

Relationship‘aria-

labelledby’

Properties (including states) attributes

How well is ARIA supported?

• Browsers with ARIA support: rough guide

– Firefox 3+

– Internet Explorer 8+

– Safari 5 (Mac/iOS)

– Chrome 17

• Assistive Technology:

– JAWS 8 and up

– WindowEyes 5.5 and up

– Free screen readers: NVDA, ORCA

– VoiceOver

– ChromeVox

• Libraries (support)

– ExtJs, Jquery, Dojo, GWT, YUI, Glow + others

How well is ARIA supported?

JAWS 14

NVDA 2

013

Orca

Voice

Over O

SX an

d iOS

ChromeV

ox

Window

eyes

8

0

5

10

Accessibility in Tomorrows Web - WWW 2201212 46

Accessible Widgets Examples JQuery

o http://hanshillen.github.com/jqtest/ Extjs GXT

o http://dev.sencha.com/playpen/gxt/aria2/test.html

OpenAJAX exampleso http://www.oaa-accessibility.org/examples/

04 / 16 / 12

1st rule of ARIA use

If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

1st rule of ARIA useUnder what circumstances may this not be possible? If the visual design constraints rule out the use

of a particular native element, because the element cannot be styled as required.

If the feature is not currently available in HTML.

If the feature is available in HTML but it is not implemented or it is implemented, but accessibility support is not.

2nd rule of ARIA use

Do not change native semantics, unless you really have to.

For example: Developer wants to build a heading that's a button.Do not do this:

<h1 role=button>heading button</h1>

Do this:<h1><span role=button>heading button</span></h1>

Or better, do this:<h1><button>heading button</button></h1>

Note: it is OK to use native HTML elements, that have similar semantics to ARIA roles used, for fallback. For example using HTML list elements for the skeleton of an ARIA enabled, scripted tree widget.

3rd rule of ARIA use

All interactive ARIA controls must be usable with the keyboard.

If you create a widget that a user can click or tap or drag or drop or slide or scroll a user must also be able 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.

For example if using role=button the element must be able to recieve focus and a user just be able to activate the action associated with the element using both the enter and the space key.

Refer to the keyboard and structural navigation and design patterns sections of the WAI-ARIA 1.0 Authoring Practices

HTML5 Accessibility support:

www.HTML5accessibility.com New interactive elements:

html5 interactive controls Canvas: canvas example Structural elements:

HTML5 structural elements Figure and figcaption: figures and figcaption

FirefoxInternet Explorer Safari Chrome

Windows, Linux Windows OSX + IOS

Android + IOS + Chrome OS

ZoomKeyboardCSS

ZoomKeyboardCSS

ZoomKeyboardTouch

ZoomKeyboardTouch

Accessibility testing toolsBrowsers + Keyboard

FirefoxInternet Explorer Safari Chrome

Windows Windows OSX + IOSAndroid + IOS + Chrome OS

shift+alt+print screen

shift+alt+print screen

Universal AccessIOSOSX

Contrast Extension

Accessibility testing toolsBrowsers + High Contrast Mode

FirefoxInternet Explorer Safari Chrome

Windows, Linux Windows OSX + IOS

Android + IOS + Chrome OS

Web DeveloperDOM inspectorFirebug

Developer tools (F12)

Developer tools (OSX)

Developer tools (OSX + Chrome OS)

Accessibility testing toolsDeveloper tools

Accessibility testing tools

Firefox – DOM Inspector

Accessibility testing tools

Internet Explorer – Web Accessibility Toolbar

Accessibility testing tools

aViewer

Accessibility testing tools

NVDA – A free open source screen reader for Windows

NVDA Screen Reader command key quick reference

tools Aviewer (free desktop application for windows ) Dom Inspector (free Firefox extension) Inspect.exe (free desktop application for windows

available as part of the Windows SDK) Accprobe (free open source cross platform app) Accessibility Inspector (free Mac app) Java ferret (free cross platform app) Accerciser (free gnome desktop app)

thank you

www.twitter.com/stevefaulknerwww.paciellogroup.com/blogwww.html5accessibility.comsfaulkner@paciellogroup.com