ARIA + HTML5 Steve Faulkner & Hans Hillen The Paciello Group.
39
ARIA + HTML5 Steve Faulkner & Hans Hillen The Paciello Group
-
Upload
britton-gray -
Category
Documents
-
view
230 -
download
0
Transcript of ARIA + HTML5 Steve Faulkner & Hans Hillen The Paciello Group.
ARIA + HTML5
Steve Faulkner & Hans HillenThe Paciello Group
Course Material
• www.paciellogroup.com/training/CSUN2012• Examples:
http://www.html5accessibility.com/CSUN12/
foreward
If 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 sign
Hansemail
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 is not so much about content
ARIA is about interaction
Much of ARIA only makes sense in conjunction with scripting.
Much of ARIA is about making sense of scripted interaction
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 2012
2012
<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>
ARIA not just about HTML
ARIA can/could be used with any markup language.
—HTML—XHTML—SVG—MATHML—MXML—XUL
In the begining
ARIA attributes
role aria-*
In the begining
role
widgetDocument structure‘heading’
Landmark‘main’
abstract
ABSTRACT ROLES
Don’t use them
command (abstract role) composite (abstract role) input (abstract role) landmark (abstract role) range (abstract role) roletype (abstract role) section (abstract role) sectionhead (abstract role) select (abstract role) structure (abstract role) widget (abstract role) window (abstract role)
widgets
widget
Simple‘button’
Composite‘menubar’
typically act as containers that manage other, contained widgets.
Important stuff about roles
• What do they do?• How do they do it?• What they don’t do (generally)
What roles do
Override native html roles If you want the native semantic to be used Do not add a role!
BAD<h1 role=“button”>heading text</h1>
GOOD<h1>
<span role=“button”>heading text</span>
</h1>
What do they do?
role=“button”Expose role information to accessibility APIs
WAI-ARIA role MSAA role IAccessible2
role
UIA Control Pattern Type
ATK roleMAC Accessibility Role
button ROLE_SYSTEM_PUSHBUTTON.
IA2_ROLE_TOGGLE_BUTTON Button ATK_ROLE_PUSH
_BUTTON AXButton
HTML to Platform Accessibility APIs Implementation Guide
Widget rolesWhat do they do?
role=“button”
“to activate press space bar”http://www.paciellogroup.com/blog/aria-tests/user-input-widgets.htmldemo
Widget rolesWhat they don’t do?
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
Button example
LandmarksThe following roles are regions of the page intended as navigational landmarks.
application banner complementary html5 contentinfo
form html4main navigation html5search
demo
aria-*
Widget‘aria-checked’
Live Region‘aria-live’
Drag & Drop‘ aria-dragged’
Relationship‘aria-labelledby’
Properties (including states) attributes
conformance
—Use of ARIA in HTML<5 is non conforming and probably always will be.
—It doesn’t make any difference—Simple solution – use the HTML5 doctype
<!DOCTYPE html>
Conformance warning!
You can use:—validator.w3.org/nu/
But some of the rules are out of date
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– Zoomtext– Free screen readers: NVDA, ORCA– VoiceOver– ChromeVox
• Libraries (support)– ExtJs, Jquery, Dojo, GWT, YUI, Glow + others
How well is ARIA supported?
10123456789
10JAWS 13 NVDA 2012
Orca
VoiceOver
Window eyes 7.5
Chart Title
Supp
ort
scor
e
HTML5
• Accessibility support: www.HTML5accessibility.com
• New interactive elements: html5 interactive controls
• Text alternatives: long descriptions• Canvas: canvas example• Structural elements: HTML5 structural elements• Figure and figcaption: figures and figcaption
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/stevefaulkner
www.paciellogroup.com/blog
www.html5accessibility.com
