Upload
aulii
View
72
Download
0
Embed Size (px)
DESCRIPTION
Steve Faulkner & Hans Hillen The Paciello Group. ARIA + HTML5. foreward. If you can avoid using: JavaScript CSS ARIA HTML5 DO IT! Now back to reality. not an expert. I am not an expert I know some things about HTML5 and WAI-ARIA - PowerPoint PPT Presentation
Citation preview
ARIA + HTML5
Steve Faulkner & Hans HillenThe Paciello Group
forewardIf 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 signHans or Gez or Leonieemail
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?
WAI-ARIA Introduction
What is it?
It’s a W3C Specification, like HTML, CSS etc.
ARIA is not so much about content
ARIA is about interaction
ARIA?
Much of ARIA only makes sense in conjunction with scripting.
Much of ARIA is about making sense of scripted interaction
ARIA?
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
roles
ARIA is a ‘bridging technology’
HTML- 2.0 1995button
HTML- 5 2013
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>
ARIA not just about HTMLARIA can/could be used with any markup
language.— HTML— SVG – ARIA in SVG 2— MATHML— MXML— XUL
ARIA and RIAs
Issues with (accessible) rich internet applicationso Number 1 is the problems associated with
custom controlso Number 2 is all the other usual issues with the
accessibility of web content Number 1 can be helped by use of ARIA
markup
ARIA and RIAs
WAI-ARIA Introduction
WAI = Web Accessibility Initiative
ARIA = Accessible Rich Internet Applications
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:
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:10
What’s it do?OK
link graphic OK
ARIA and RIAs
ARIA role=“button"
What’s it do?OK
button OKTo activate press spacebar
What’s gained?Correct role information:
“Button”Usage instructions:
“To activate press spacebar””
ARIA role=“button"
Highlight (on)Highlight (off)
button Highlight
pressed
button Highlight
aria-pressed="false" aria-pressed=“true"
aria-pressed=“true|false"
What’s gained?
state information:
“pressed”
aria-pressed=“true|false"
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:10
Custom button
Steps to make a custom button accessible
ARIA and RIAs
ARIA attribute
s
role aria-*<div role="banner"> <div aria-haspopup="true">
ARIA and RIAs
role
widgetDocument structure‘heading’
Landmark‘main’
abstract
ARIA and RIAs
widget
Simple‘button’
Composite‘menubar’
typically act as containers that manage other, contained widgets.
aria-*
Widget‘aria-
checked’Live Region‘aria-live’
Drag & Drop‘ aria-
dragged’
Relationship‘aria-
labelledby’
Properties (including states) attributes
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 properties
ARIA and RIAs There are conformance rules:oHTML5 – WAI-ARIA 3.2.7
But they are difficult to decipheroUsing ARIA in HTML
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>
LandmarksThe 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
SearchApplication =
don’t use as a landmark
Landmarks
Using WAI -ARIA Landmark Roles | Screen reader support for HTML5 sections
aria-*
Widget‘aria-
checked’Live Region‘aria-live’
Drag & Drop‘ aria-
dragged’
Relationship‘aria-
labelledby’
Properties (including states) attributes
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 + others
How well is ARIA supported?
JAWS 14
NVDA 2
013
Orca
Voice
Over O
SX an
d iOS
ChromeV
ox
Window
eyes
8
0
5
10
Accessibility in Tomorrows Web - WWW 2201212 46
Accessible Widgets Examples JQuery
o http://hanshillen.github.com/jqtest/ Extjs GXT
o http://dev.sencha.com/playpen/gxt/aria2/test.html
OpenAJAX exampleso http://www.oaa-accessibility.org/examples/
04 / 16 / 12
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
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 figcaption
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)
thank you
www.twitter.com/stevefaulknerwww.paciellogroup.com/[email protected]