Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
-
Upload
steven-faulkner -
Category
Technology
-
view
3.726 -
download
1
description
Transcript of Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications (Part 1)
Hans Hillen (TPG)
Steve Faulkner (TPG)
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 1
Course Material
www.paciellogroup.com/training/CSUN2012
Examples: part 1 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 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 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
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 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
ARIA+XUL
Firebug accessibility implemented by Hans Hillen using ARIA
Hans hillen
In the begining
ARIA attribute
s
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 role
MAC Accessibility Role
buttonROLE_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 propertiesButton 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>
HTML5+ARIA rules
There are rules:
HTML5 – WAI-ARIA 3.2.7
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
10 JAWS 13NVDA 2012
Orca
VoiceOver
Window eyes 7.5
Chart Title
Su
pp
ort
score
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)
Stay in touch
www.twitter.com/stevefaulkner
www.twitter.com/hanshillen
www.paciellogroup.com/blog
www.html5accessibility.com
Accessibility of HTML5 and Rich Internet Applications (Part 2)
Hans Hillen (TPG)
Steve Faulkner (TPG)
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 42
In This Part:
Keyboard and Focus Management
Labeling and Describing
Live Regions
Form Validation
Mode Conflicts
Fallback Solutions
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 43
Keyboard and Focus Management
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 44
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 45
The Problem with Custom Controls
Problem:
Images, divs, spans etc. are not standard controls with defined behaviorso Not focusable with keyboard
o Have a default tab order
o Behavior is unknown
Solution:
Ideally: Use native focusable HTML controls o <a>, <input type=“image” />, <button>, etc.
Or manually define keyboard focus and behavior needs
02 / 27 / 12
Keyboard Issues in a Nutshell Reachability: Moving keyboard focus to a
widget o Through tab order
• Native focusable controls or tabindex=“0”
o Through globally defined shortcut
o By activating another widget
Operability: Interacting with a widgeto All functionally should be performable through
keyboard and mouse input
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 46
Focus & Keyboard Accessibility To be accessible, ARIA input widgets need focus
o Use natively focusable elements, such as <a>, <input />, etc
o Add ‘tabindex’ attribute for non focusable elements, such as <span>, <div>, etc.• Tabindex=“0”: Element becomes part of the tab order• Tabindex=“-1” (Element is not in tab order, but focusable)
o For composite widgets (menus, trees, grids, etc.):• Every widget should only have 1 stop in the tab order.• Keep track where your widget’s current tab stop is:
o Alternative for tabindex: ‘aria-activedescendant=“<idref>”• Focus remains on outer container• AT perceives element with the specified ID as being
focused.• You must manually highlight this active element, e.g. With
CSS
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 47
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 48
Keyboard Handling
Every widget needs to be operable by keyboard. common keystrokes are:o Arrow keys
o Home, end, page up, page down
o Enter, space
o ESC
Mimic the navigate in the desktop environmento DHML Style Guide: http://
dev.aol.com/dhtml_style_guide
o ARIA Best Practices: http://www.w3.org/TR/wai-aria-practices/
02 / 27 / 12
Skipping Mechanisms
The ability to skip content is crucial for both screen reader and keyboard users
Skip links are out of date, out of fashion and often misusedo But keyboard users still need to be able to skip
Other alternatives for skipping:o Collapsible sections
o Consistent shortcuts (e.g. a shortcut that moves focus between panes and dialogs)
o Custom focus manager that allows the user to move focus into a container to skip its contents
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 49
Popup Dialogs and Windows More and more web apps use HTML based popup dialogs rather than actual
browser windows/dialogso Get a screen reader to perceive it properly using role="dialog"
Dialogs should have their own tab ordero Focus should "wrap"
For modal dialogs, it should not be possible to interact with the main page o Prevent keyboard access
o Virtual mode access can't be prevented
For non modal dialogs, provide shortcut to switch between dialog and main page
If dialog supports moving or resizing, these features must be keyboard accessible
Support closing dialogs using Enter (OK) or Escape (Cancel) keyso Focus should be placed back on a logical element, e.g. the button that triggered the
dialog.
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 50
Selection & Editing
Trees, Lists, Grids can support single or multiple selectionoMultiple selection must be keyboard accessible,
for example: • Shift + arrow keys: contiguous selection• Ctrl + arrow keys: move focus without selection• Ctrl + space: Toggle focused item in selection
(discontiguous selection)
Editable grids need to support switching to edit mode by keyboard
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 51
Labeling and Describing
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 52
Labeling in a Nutshell
All of these must have an accessible name:o Every interactive widget
o Composite widgets (menu(bar), toolbar, tablist, tree, grid)
o Groups, regions and landmarks
Browsers determines an element’s accessible name by checking the following :
1. aria-labelledby
2. aria-label
3. Associated label (<label for=“myControl”>) or alt attribute
4. Text contents
5. Title attribute
Optionally, add an accessible description for additional info02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 53
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 54
Label, Labelledby & Describedby Aria-labelledby=“elemID”
o Points to element ID that identifies the widget.
o Can also use regular label element / title attribute
Aria-describedby=“elemID”o Optional, provides additional info besides identity
o Useful for additional info, instructions, hints
Aria-label=“text”o Only use when no on-screen text
Title attribute will also work
02 / 27 / 12
<h2 id=“treeLbl”>My Folders</h2><p id=“treeDesc” class=“hidden”>Each tree item has a context menu with more options</p><div role=“tree” aria-labelledby=“treeLbl” aria-describedby=“treeDesc”>
Labeling And Describing Widgets (2) Aria-labelledby=“IDREFS”
o Value is one or more IDs of elements that identifiy the widget.o The elements ‘aria-labelledby’ targets can be any kind of text based element,
anywhere in the document.o Add multiple Ids to concatinate label text:
• Multiple elements can label one widget, and one element can label multiple widgets. (example)
Aria-describedby=“IDREFS”o Similar to labelledby, except used for additional description, e.g. Form hints,
instructions, etc.
Aria-labelo Simply takes a string to be used as label.o Quick and dirty way of making the screen reader say what you want.o Very easy to use, but only supported in Firefox at the moment.
<h2 id=“treeLbl”>My Folders</h2><p class=“hidden”>Each tree item has a context menu with more options</p><div role=“tree” aria-labelledby=“treeLbl” aria-describedby=“treeDesc”>...02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 55
Labeling containers
Containers such as toolbars, dialogs, and regions provide context for their contents
When the user moves focus into the container, the screen reader should first announce the container before announcing the focused control
<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
<h2 id="dialogTitle">Confirm</h2><p id="dialogDescription">
Are you sure you want to do that?</p><button>Yes</button> <button>No</button>
</div>
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 56
Live Regions
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 57
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 58
ARIA Live Regions
Problem: content is updated dynamically on screen may not be apparent to screen reader users
o No page refresh, no screen reader announcement
o Change is only announced by stealing focus
o Users miss relevant information
o Users have to ‘search’ for updated page content
Solution: live regions indicate page updates without losing focus
o Screen readers announce change based on type of live region
Challenge: When should users be informed of the change?
o Ignore trivial changes: changing seconds in a clock
o Announce important changes immediately / as convenient
02 / 27 / 12
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 59
“Built In” Live Regions
Role=“alert” for one-time, high-priority notificationso Shown for a period of time, or until the cause of the alert is solved
o Basic message, no complex content
o The element with the alert role does not need to be focused to be announced
Role=“alertdialog” is similar to alert, but for actual (DHTML) dialogs.o May contain other widgets, such as buttons or other form fields
o Does require a sub-element (such as a ‘confirm’ button) to receive focus
Live regions ‘built into ‘ roles’• role="timer", "log", "marquee" or "status“ get default live behavior
• Role=“alert” implicitly sets live to assertive
02 / 27 / 12
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 60
How to Use Live Regions
1. Identify which part (containing HTML element) is expected to be updated
2. To make it live, add ‘aria-live’ attribute with a politeness value:o Off (default): Do not speak this region
o Polite: Speak this region when the user is idle
o Assertive: Speak this region as soon as possible
3. Choose whether entire region should be announced or just the part that changed:o ‘aria-atomic': true (all) or false (part)
4. Add other attributes as necessary:o aria-relevant: choose what to announce:
• Combination of ‘Additions’, ‘removals’, ‘text’, ‘all’
o aria-busy: indicate content is still updating
o aria-labelledby, aria-describedby: label and describe regions
02 / 27 / 12
Forms & Validation
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 61
Forms & ARIA
You can used ARIA to make your form validation easier to manage.o aria-required & aria-invalid states
o Role="alert" to flag validation errors immediately
Use validation summaries invalid entries easier to findo Use role=“group” or Role="alertdialog" to mark up the summary
o Link to corresponding invalid controls from summary items
o Use different scope levels if necessary
Visual tooltips: Useful for validation messages and formatting instructionso Tooltips must be keyboard accessible
o Tooltip text must be associated with the form control using aria-describedby
Live Regions: Use for concise feedback messages
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 62
Mode Conflicts
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 63
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 64
Role = Application
Screen readers normally browse in ‘virtual mode’o Navigates a virtual copy of the web pageo Intercepts all keystrokes for its own navigation (e.g. ‘H’ for heading
navigation)
For dynamic Web apps, virtual mode may need to be turned offo Interactive widgets need to define the keystrokes themselveso Content needs to be live, not a virtual copyo Automatically switches between virtual and non-virtual mode
role=“application”o Screen reader switches to non-virtual for these elementso Must provide all keyboard navigation when in role=“application”
modeo Screen readers don’t intercept keystrokes then, so typical functions will
not work02 / 27 / 12
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 65
Role = Document
For apps with ‘reading’ or ‘editing’ sections o A reading pane in an email client
o Screen reader switches back to virtual mode, standard ‘web page reading’ shortcuts work again
o Read / edit documents in a web application
Banner, complementary, contentinfo, main, navigation, search & form
When applied to a container inside an application role, the screen reader switches to virtual mode.
02 / 27 / 12
Fall Back Solutions
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 66
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 67
Role = Presentation
Role=“presentation” overrides existing roleo Useful to ‘hide’ default HTML roles from AT
For example: o Hide layout tables by adding the role to the <table>
element
o Textual content read by the screen reader but table is ignored
02 / 27 / 12
Fall back solution for dialogs In IE, JAWS currently does not properly announce dialogs
when moving focus into them
It's possible to provide a fallback solution for IE to fix this, using hidden fieldsets to apply the ARIA dialog markup to o Hide fieldset's padding, margin, and border
o Move legend off-screen
<fieldset role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
<legend id="dialogTitle">Confirm</legend><p id="dialogDescription">
Are you sure you want to do that?</p><button>Yes</button> <button>No</button>
</fieldset>
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 68
Fallback solutions for link buttons
Developers often use links as (icon) buttonso Side effect: screen reader will announce them as a link, not a
button
This can be made accessible by setting role="button"o Screen reader announces link as button now, but also provides
hint for using a button ("press" space to activate)• You lie! Links work through the Enter key, Space will scroll down the page
o To make sure JAWS is not lying, you'll have to manually add a key event handler for the Space key.
<a role="button" onkeypress="handleKeyPress(event);">refresh</a>
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 69
Hiding Content
Three types of hiding:
1. Hiding content visually and from AT:
2. Hiding content visually, but not from AT
3. Hiding content from AT, but not visually
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 70
1. Hiding Content from All Display: none;
o Hides content both visually and from AT products
oOnly works when CSS is supported (by user agent, user, or AT product)
oOnly use to hide content that still ‘makes sense’• E.g. contents of a collapsible section
o Do not use for content that provides incorrect information• E.g. preloaded error messages that are not applicable
at the moment, or stale content • Instead, this content should be removed from the DOM
completely
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 71
2. Hiding Content Visually Hiding content off-screen will still make it available for screen
readers, without it being visible
Useful to provide extra information to screen reader users or users that do not support CSSo E.g. add hidden headings, screen reader instructions, role & state info
for older technology/* Old */.offscreen { position: absolute; left: -999em;}
/* New */.ui-helper-hidden-accessible {
position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px);
}
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 72
3. Hiding Content From AT Only Sometimes developers want to hide content from
screen readers, e.g.:o Duplicate controls
o Redundant information that was already provided through semantic markup.
Difficult to achieve:o Role=“presentation” will remove native role, but content is
still visible for AT products
o Aria-hidden=“true” would be ideal, but:• The spec did not intend for aria-hidden to be used this way• Browsers handle aria-hidden differently
• IE does nothing • FF exposes content but marks it as hidden• Chrome does not expose content (i.e. truly hides it)
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 73
Grids and Tables
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 74
Fixing Incorrect Grid Structure (1)
Some developers will use multiple HTML <table> elements to create one single grid. For example:o One <table> for the header row, one <table> for the
body rows
o One <table> for every single row
Why? Because this is easier to manage, style, position, drag & drop, etc.
Screen reader does not perceive one single table, but it sees two ore more separate tableso Association between column headers and cells is broken
o Screen reader's table navigation is broken
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 75
Fixing Incorrect Grid Structure (2)
If using a single table is not feasible, use ARIA to fix the grid structure as perceived by the screen reader o Use role="presentation" to hide the original
table elements form the screen readers
o Use a combination of "grid", "row", "gridcell", "columnheader" roles to make the screen reader see one big grid.
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 76
Fixing Incorrect Grid Structure (3)
Using ARIA to create a correct grid structure
<div role="grid"><table role="presentation">
<tr role="row"><th role="columnheader">Dog Names</th><th role="columnheader">Cat Names</th><th role="columnheader">Cow names</th>
</tr></table><table role="presentation">
<tr role="row"><td role="gridcell">Fido</td><td role="gridcell">Whiskers</td><td role="gridcell">Clarabella</td>
</tr></table>
</div>
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 77
Anything Else?
Questions?
Additional Topics?
Course Material: http://www.paciellogroup.com/training/CSUN2012
02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 78