aria + html5
DESCRIPTION
Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group. ARIA + HTML5. Diving in to some HTML5. Details/summary Dialog Spin button slider ARIA rules HTML/ARIA validation Tools. HTML5. Getting simple. HTM5 demo – details/summary. - PowerPoint PPT PresentationTRANSCRIPT
ARIA + HTML5
Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory
The Paciello Group
Diving in to some HTML5
Details/summary Dialog Spin button slider ARIA rules HTML/ARIA validation Tools
HTML5
Getting simple
HTM5 demo – details/summary<details><summary> label </summary>Some content </details>
simple
HTM5 demo – details/summary
= ½ an implementation
HTM5 demo – details/summary What we get now
simple
<details>
<summary>
HTM5 demo – details/summary What we want <summary>
HTM5 demo – details/summaryWhat we want<details>
HTML5 demo – details/summary
Filling Gaps
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>
HTM5 demo – details/summary
HTM5 demo – dialog
Creating a modal dialog that works with keyboard and prevents users from accessing ‘disabled’ content is the holy grail….
HTM5 demo – dialog
What we get for freeo Focus moves to modal dialog when it is
displayedo Focus stays in modal dialog until it is dismissedo Content not in the modal dialog is really
disabled o ESC key dismisses the dialogo<dialog> = role=dialog
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
HTM5 demo – dialog
The good oil on implementing custom dialogso Juicy Studio - Custom-Built Dialogso The Incredible Accessible Modal DialogoWAI-ARIA design pattern – modal dialog
HTM5 demo – input type=number
What we geto Correct role and value informationo Keyboard operable
<input step="2" type="number">
HTM5 demo – input type=range
<input type=range value=10 min=1 max=11>
HTM5 demo – input type=range What we get for free
EVERYTHING \o/
ARIA There are conformance rules:oHTML5 – WAI-ARIA 3.2.7
But they can be difficult to decipheroUsing ARIA in HTML
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>
If you only leave with one take away
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
4rd rule of ARIA useDo 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>
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
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)
Live Regions
03 / 18 / 14 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014 37
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
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
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
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
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
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
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
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
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
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