Steve Faulkner amp Hans Hillen The Paciello Group Course Material wwwpaciellogroupcomtrainingCSUN2012 Examples httpwwwhtml5accessibilitycomCSUN12 foreward If you can avoid using ID: 166631
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
The Paciello GroupSlide2
Course Material
www.paciellogroup.com/training/CSUN2012
Examples:
http://www.html5accessibility.com/CSUN12/ Slide3
foreward
If you can avoid using:
JavaScript
CSS
ARIA
HTML5
DO IT!
Now back to reality...Slide4
not an expert
I am not an expert
I know some things about HTML5 and WAI-ARIA
I know some people who
know some other things about HTML5 and WAI-ARIA
I will hold up a virtual sign if you ask a question I cannot answer
Consider it held up when you ask a question and I look vagueSlide5
the sign
Hans or
Gez or Leonie
email
or tweetSlide6
What is the primary use case for ARIA?
There’s a clue in the name:
Accessible Rich Internet
ApplicationsSlide7
What was the original name for HTML5?
“This specification introduces features to HTML and the DOM that ease the authoring of Web-based
applications
.”Slide8
Web applicationSlide9
No JavaScriptSlide10
No CSSSlide11
Web applicationSlide12
No CSSSlide13
No JavaScriptSlide14
ARIA?
WAI-ARIA Introduction
What is it?
It’s a
W3C Specification
, like HTML, CSS etc.Slide15
ARIA is not so much about content
ARIA is about interaction
ARIA?Slide16
Much of ARIA only makes sense in conjunction with scripting.
Much of ARIA is about making sense of scripted interaction
ARIA?Slide17
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 rolesSlide18
ARIA is a ‘bridging technology’
HTML- 2.0 1995
button
HTML- 5
2013Slide19
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"> </span>
<div class="asf T-I-J3 J-J5-Ji"></div>
</div>
</div>Slide20
ARIA not just about HTML
ARIA can/could be used with any markup language.
HTML
SVG –
ARIA in SVG 2
MATHML
MXML
XULSlide21
ARIA+XUL
Firebug
Hans hillenSlide22
ARIA and RIAs
Issues with (accessible) rich internet applications
Number 1 is the problems associated with custom controls
Number 2 is all the other usual issues with the accessibility of web content
Number 1 can be helped by use of ARIA markupSlide23
ARIA and RIAs
WAI-ARIA Introduction
WAI
=
W
eb
A
ccessibility
I
nitiative
ARIA
=
A
ccessible
R
ich
I
nternet
A
pplicationsSlide24
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"> </span>
<div class="asf T-I-J3 J-J5-Ji"></div>
</div>
</div>
source: Gmail
This is the problem:Slide25
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:10Slide26
What’s it do?
OK
link graphic
OK
ARIA and RIAsSlide27
ARIA
role=“button"
What’s it do?
OK
button
OK
To activate press spacebarSlide28
What’s gained?
Correct
role
information:
“Button”
Usage
instructions
:
“To activate press spacebar”
”
ARIA
role=“button"Slide29
Highlight (on)
Highlight (off)
button
Highlight
pressed
button
Highlight
aria-pressed="false"
aria-pressed=“true"
aria-pressed=“true|false"Slide30
What’s gained?
state
information:
“pressed”
aria-pressed=“true|false"Slide31
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:10Slide32
Custom button
Steps to make a custom button accessibleSlide33
ARIA and RIAs
<div
role="banner"
>
<div
aria-haspopup=
"
true"
>Slide34
ARIA and RIAsSlide35
ARIA and RIAs
typically act as containers that manage other, contained widgets.Slide36
Properties (including states) attributesSlide37
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 propertiesSlide38
ARIA and RIAs
There
are
conformance rules
:
HTML5 – WAI-ARIA 3.2.7
But they are difficult to decipher
Using ARIA in HTMLSlide39
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>Slide40
http
://validator.w3.org/nu/Slide41
Landmarks
The 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
Search
Application =
don’t use
as a landmark Slide42
Landmarks
Using WAI -ARIA
Landmark
Roles
|
Screen reader support for HTML5 sectionsSlide43
Properties (including states) attributesSlide44
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 + othersSlide45
How well is ARIA supported?Slide46
Accessible Widgets Examples
JQuery
http://hanshillen.github.com/jqtest/
Extjs GXT
http://
dev.sencha.com/playpen/gxt/aria2/test.html
OpenAJAX examples
http://www.oaa-accessibility.org/examples/
46
Accessibility in Tomorrows Web - WWW 2201212
04 / 16 / 12Slide47
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
.Slide48
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.Slide49
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
.Slide50
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 PracticesSlide51
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 figcaptionSlide52
Firefox
Internet Explorer
Safari
Chrome
Windows, Linux
Windows
OSX + IOS
Android + IOS + Chrome
OS
Zoom
Keyboard
CSS
Zoom
Keyboard
CSS
Zoom
Keyboard
Touch
Zoom
Keyboard
Touch
Accessibility testing tools
Browsers + KeyboardSlide53
Firefox
Internet Explorer
Safari
Chrome
Windows
Windows
OSX + IOS
Android + IOS + Chrome
OS
shift+alt+print
screen
shift+alt+print
screen
Universal Access
IOS
OSX
Contrast
Extension
Accessibility testing tools
Browsers + High Contrast ModeSlide54
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 tools
Developer toolsSlide55
Accessibility testing tools
Firefox –
DOM InspectorSlide56
Accessibility testing tools
Internet Explorer –
Web Accessibility Toolbar Slide57
Accessibility testing tools
aViewerSlide58
Accessibility testing tools
NVDA
– A free open source screen reader for Windows
NVDA Screen Reader
command key quick referenceSlide59
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)Slide60
thank you
www.twitter.com/stevefaulkner
www.paciellogroup.com/blog
www.html5accessibility.com
sfaulkner@paciellogroup.com