Steve Faulkner amp Hans Hillen amp Karl Groves amp Billy Gregory The Paciello Group Diving in to some HTML5 Detailssummary Dialog Spin button slider ARIA rules HTMLARIA validation Tools ID: 166633
Download Presentation The PPT/PDF document "ARIA + HTML5" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
ARIA + HTML5
Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory
The Paciello GroupSlide2
Diving in to some HTML5
Details/summary
Dialog
Spin button
slider
ARIA rules
HTML/ARIA validation
ToolsSlide3
HTML5
Getting simpleSlide4
HTM5 demo – details/summary
<details>
<summary> label </summary>
Some content
</details>
simpleSlide5
HTM5 demo – details/summary
= ½ an implementationSlide6
HTM5 demo – details/summary
What we get now
simple
<details>
<summary>Slide7
HTM5 demo – details/summary
What we want
<summary>Slide8
HTM5 demo – details/summary
What we want
<details>Slide9
HTML5 demo – details/summary
Filling GapsSlide10
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>Slide11
HTM5 demo – details/summarySlide12
HTM5 demo – dialog
Creating a
modal dialog
that works with keyboard and prevents users from accessing ‘disabled’ content is the holy grail….Slide13
HTM5 demo – dialog
What we get for free
Focus moves to modal dialog when it is displayed
Focus stays in modal dialog until it is dismissed
Content not in the modal dialog is
really
disabled
ESC key dismisses the dialog
<dialog> =
role=dialogSlide14
HTM5 demo – dialog
What we need to add
Accessible name to dialog
<dialog aria-label="text">
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 scriptingSlide15
HTM5 demo – dialog
The good oil on implementing custom dialogs
Juicy Studio - Custom-Built
Dialogs
The
Incredible Accessible Modal
Dialog
WAI-ARIA design pattern – modal dialogSlide16
HTM5 demo –
input type=number
What we get
Correct role and value information
Keyboard operable
<input
step=
"
2
"
type
=
"
number
"
>Slide17
HTM5 demo – input
type=range
<input
type=range value=10 min=1 max=11>Slide18
HTM5 demo – input type=range
What we get for free
EVERYTHING
\o/Slide19
ARIA
There are conformance rules:
HTML5 – WAI-ARIA 3.2.7
But they can be difficult to
decipher
Using ARIA in HTMLSlide20
HTML 5.1 specificationSlide21
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>Slide22
http
://validator.w3.org/nu/Slide23
If you only leave with one take awaySlide24
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
.Slide25
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.Slide26
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.Slide27
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 PracticesSlide28
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>
Slide29
Firefox
Internet Explorer
Safari
Chrome
Windows, Linux
Windows
OSX + IOS
Android + IOS + Chrome
OS
Zoom
Keyboard
CSS
Zoom
Keyboard
CSS
ZoomKeyboardTouch
ZoomKeyboardTouchAccessibility testing toolsBrowsers + KeyboardSlide30
Firefox
Internet Explorer
Safari
Chrome
Windows
Windows
OSX + IOS
Android + IOS + Chrome
OS
shift+alt+print
screen
shift+alt+print
screen
Universal Access
IOS
OSXContrast ExtensionAccessibility testing toolsBrowsers + High Contrast ModeSlide31
Firefox
Internet Explorer
Safari
Chrome
Windows, Linux
Windows
OSX + IOS
Android + IOS + Chrome
OS
Web Developer
DOM
inspector
Firebug
Developer
tools (F12)
Developer tools (OSX)Developer
tools (OSX + Chrome OS)Accessibility testing toolsDeveloper toolsSlide32
Accessibility testing tools
Firefox –
DOM InspectorSlide33
Accessibility testing tools
Internet Explorer –
Web Accessibility Toolbar Slide34
Accessibility testing tools
aViewerSlide35
Accessibility testing tools
NVDA
– A free open source screen reader for Windows
NVDA Screen Reader
command key quick referenceSlide36
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)Slide37
Live Regions
03 / 18 / 14
Accessibility of HTML5 and Rich Internet Applications - CSUN 2014
37Slide38
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 notifications
03 / 18 / 14
Accessibility of HTML5 and Rich Internet Applications - CSUN 2014
38Slide39
What is this thing &
what does it do?
Chat, error logs, etc.
role=
'log'
Status messages
role=
'
status
'
Urgent message req. immediate notice
role='
alert’Stock ticker
role=
'
marquee'Timer/ Clockrole='timer'Progress indicatorrole='progressbar'None of the above?role='region
'03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201439Slide40
How important is the content?
Meh
aria-live=
'
polite
'
W
aits
for queued output to be read/ paused
Default for most roles
OMFG
aria-live=
'assertive'Interrupts outputDefault for alert role
03 / 18 / 14
Accessibility of HTML5 and Rich Internet Applications - CSUN 2014
40Slide41
What is being changed?
I’m adding stuff
aria-relevant=
'additions'
I’m removing stuff
aria-relevant
=
'
removals
'
I’m changing text
aria-relevant
='text'I’m replacing stuffaria-relevant='all'
03 / 18 / 14
Accessibility of HTML5 and Rich Internet Applications - CSUN 2014
41Slide42
What matters?
The New Hotness
aria-atomic=
'false
'
Default
behavior
Only
announces
changed
node.
All the things!aria-atomic='true'
Presents
entire contents03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201442Slide43
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 201443Slide44
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
44Slide45
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 201445Slide46
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 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201446Slide47
Let’s Chat
http://chat.karlgroves-sandbox.com
(Just
for show)
Live Regions Plugin
https://github.com/karlgroves/jquery-live-
regions
03 / 18 / 14
Accessibility of HTML5 and Rich Internet Applications - CSUN 2014
47Slide48
thank you
www.twitter.com/stevefaulkner
www.paciellogroup.com/blog
www.html5accessibility.com
sfaulkner@paciellogroup.com