![Page 1: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/1.jpg)
ARIA + HTML5
Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory
The Paciello Group
![Page 2: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/2.jpg)
Diving in to some HTML5
Details/summary
Dialog
Spin button
slider
ARIA rules
HTML/ARIA validation
Tools
![Page 3: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/3.jpg)
HTML5
Getting simple
![Page 4: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/4.jpg)
HTM5 demo – details/summary
<details>
<summary> label </summary>
Some content
</details>
simple
![Page 5: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/5.jpg)
HTM5 demo – details/summary
= ½ an implementation
![Page 6: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/6.jpg)
HTM5 demo – details/summary
What we get now
simple
<details>
<summary>
![Page 7: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/7.jpg)
HTM5 demo – details/summary
What we want
<summary>
![Page 8: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/8.jpg)
HTM5 demo – details/summary
What we want<details>
![Page 9: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/9.jpg)
HTML5 demo – details/summary
Filling Gaps
![Page 10: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/10.jpg)
HTM5 demo – details/summary
<details role="group" id="d1">
<summary tabindex="0" role="button" aria-controls="d1" aria-expanded="true|false"> label </summary>
Some content
</details>
![Page 11: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/11.jpg)
HTM5 demo – details/summary
![Page 12: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/12.jpg)
HTM5 demo – dialog
Creating a modal dialog that works with keyboard and prevents users from accessing ‘disabled’ content is the holy grail….
![Page 13: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/13.jpg)
HTM5 demo – dialog
What we get for freeo Focus moves to modal dialog when it is
displayed
o Focus stays in modal dialog until it is dismissed
o Content not in the modal dialog is really disabled
o ESC key dismisses the dialog
o<dialog> = role=dialog
![Page 14: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/14.jpg)
HTM5 demo – dialog
What we need to addo Accessible name to dialog
• <dialog aria-label="text">
o Currently when the dialog is dismissed focus moves to the <body> when it needs to move to control that triggered dialog display• Can be polyfilled using scripting
![Page 15: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/15.jpg)
HTM5 demo – dialog
The good oil on implementing custom dialogso Juicy Studio - Custom-Built Dialogs
o The Incredible Accessible Modal Dialog
oWAI-ARIA design pattern – modal dialog
![Page 16: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/16.jpg)
HTM5 demo – input type=number
What we geto Correct role and value information
o Keyboard operable
<input step="2" type="number">
![Page 17: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/17.jpg)
HTM5 demo – input type=range
<input type=range value=10 min=1 max=11>
![Page 18: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/18.jpg)
HTM5 demo – input type=range What we get for free
EVERYTHING \o/
![Page 19: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/19.jpg)
ARIA
There are conformance rules:oHTML5 – WAI-ARIA 3.2.7
But they can be difficult to decipher
oUsing ARIA in HTML
![Page 21: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/21.jpg)
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 Checker.
<!DOCTYPE html>
![Page 23: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/23.jpg)
If you only leave with one take away
![Page 24: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/24.jpg)
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.
![Page 25: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/25.jpg)
1st rule of ARIA use
Under 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.
![Page 26: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/26.jpg)
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.
![Page 27: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/27.jpg)
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
![Page 28: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/28.jpg)
4rd rule of ARIA use
Do not use role="presentation" or aria-hidden="true" on a focusable element. Using either of these on a focusable element will result in some users focusing on 'nothing'.
Do not do this:<button role=presentation>press me</button>
Do not do this:<button aria-hidden=true>press me</button>
![Page 29: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/29.jpg)
FirefoxInternet Explorer Safari Chrome
Windows, Linux Windows OSX + IOS
Android + IOS + Chrome OS
ZoomKeyboardCSS
ZoomKeyboardCSS
ZoomKeyboardTouch
ZoomKeyboardTouch
Accessibility testing tools
Browsers + Keyboard
![Page 30: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/30.jpg)
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 tools
Browsers + High Contrast Mode
![Page 31: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/31.jpg)
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 tools
Developer tools
![Page 32: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/32.jpg)
Accessibility testing tools
Firefox – DOM Inspector
![Page 33: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/33.jpg)
Accessibility testing tools
Internet Explorer – Web Accessibility Toolbar
![Page 35: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/35.jpg)
Accessibility testing tools
NVDA – A free open source screen reader for Windows
NVDA Screen Reader command key quick reference
![Page 36: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/36.jpg)
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)
![Page 37: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/37.jpg)
Live Regions
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 37
![Page 38: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/38.jpg)
Live Regions
Allows user to be notified of content changes
Typically for content that changes automatically
Content change may exist separate to what has focus
Live Regions facilitate these notifications03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 38
![Page 39: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/39.jpg)
What is this thing & what does it do?
Chat, error logs, etc. o role='log'
Status messageso role='status'
Urgent message req. immediate noticeo role='alert’
Stock tickero role='marquee'
Timer/ Clocko role='timer'
Progress indicatoro role='progressbar'
None of the above?o role='region'
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 39
![Page 40: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/40.jpg)
How important is the content?
MEH
aria-live='polite'
Waits for queued output to be read/ paused
Default for most roles
OMFG
aria-live='assertive'
Interrupts output
Default for alert role
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 40
![Page 41: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/41.jpg)
What is being changed?
I’m adding stuffo aria-relevant='additions'
I’m removing stuff aria-relevant='removals'
I’m changing texto aria-relevant='text'
I’m replacing stuffo aria-relevant='all'
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 41
![Page 42: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/42.jpg)
What matters?
THE NEW HOTNESS
aria-atomic='false'
Default behavior
Only announces changed node.
ALL THE THINGS!
aria-atomic='true'
Presents entire contents
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 42
![Page 43: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/43.jpg)
What’s my name?
ARIA-LABEL
aria-label='Chat'
ARIA-LABELLEDBY
aria-labelledby='foo'
<h2 id='foo'>Chat</h2>
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 43
![Page 44: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/44.jpg)
You givin me static?
<div role='alert’ aria-label='Errors'>
Please correct the following errors:</div>
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 44
![Page 45: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/45.jpg)
You givin me static?
<h2 id='lunchtime'>
How long until lunch?
</h2>
<div role='timer' aria-labelledby='lunchtime'>
10 minutes
</div>
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 45
![Page 46: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/46.jpg)
But wait! There’s moar!
<div id="userList" role="region" aria-atomic="false" aria-live="polite" aria-busy="false" aria-relevant="additions" aria-label="User List">
<ol>
<li id="3xBCS2kJi" data-dateadded="1395160799” >
Karl</li>
</ol>
</div>
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 46
![Page 47: Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group](https://reader035.vdocuments.site/reader035/viewer/2022081603/56649f125503460f94c258d1/html5/thumbnails/47.jpg)
Let’s Chat
http://chat.karlgroves-sandbox.com
(Just for show)
Live Regions Pluginhttps://github.com/karlgroves/jquery-live-regions
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 47