Creating dynamic and accessible content in Drupal 7 using WAI-ARIA Sarah Pulis (@sarahtp) Web...
-
Upload
rowan-massingill -
Category
Documents
-
view
230 -
download
0
Transcript of Creating dynamic and accessible content in Drupal 7 using WAI-ARIA Sarah Pulis (@sarahtp) Web...
Creating dynamic and accessible content in Drupal 7 using WAI-ARIASarah Pulis (@sarahtp)
Web Accessibility Evangelist
DruaplCon | Content Authoring | 7 February 2013
About me
2002 Ignorant
2002+ Educated and aware
2010 Commitment
2012 Champion
Read about Making accessibility part of culture change: it's all in the attitude on Access iQ™. Image credit: Ruth Ellison and Kim Chatterjee
WAI-ARIA
Accessible Rich Internet Applications
(from the W3C Web Accessibility Initiative)
Accessibility interoperability at a DOM Node without JavaScript
Assistive Technology
UIcomponent
Data
UI
RoleStatesActionsCaretSelectionTextHypertextValueNameDescriptionChildrenChangesRelations
Con
trac
t
From WAI-ARIA Primer
Accessibility interoperability at a DOM Node with JavaScript
Assistive Technology
UIcomponent
Data
UI
^Role^States^ActionsCaretSelectionTextHypertext^ValueNameDescriptionChildren^Changes^Relations
Con
trac
t
From WAI-ARIA Primer
WAI-ARIA
WAI-ARIA rolesAbstract, widget, document structure and landmark roles
WAI-ARIA states and propertiesWidget, live region, drag-and-drop and relationship attributes
What we are looking at today
WAI-ARIA for page structure
WAI-ARIA live regions
WAI-ARIA to enhance keyboard navigation
WAI-ARIA for forms
WAI-ARIA for widgets
WAI-ARIA for page structure
<div role=”banner”><form role=”search”>
<div role=
”navigation”
<div role=”contentinfo”>
<div role=”main”>
<div role=”form”>
<div role=”application”>
<div role=
”complementary
”
Differentiate landmarks with the same type
Use aria-label to differentiate between regions with the same landmark type<div role=“navigation” aria-label=“main menu”><div role=“navigation”aria-label=“sub menu”>
Assistive technology support
Jaws 11/12/13 has complete support.
ChromeVox has complete support
VoiceOver supports all landmarks except “form”
NVDA supports all landmarks except “application” and “form”
Window Eyes does not support ARIA landmarksLatest ARIA landmark role support data, The Paciello Group (Nov 2011)
WAI-ARIA and forms
aria-required
Use aria-required=“true” for required form fields
<label for="name">First Name</label>:
<input name="name" id="name" aria-required="true">
<em>(required)</em>
aria-describedby
Use aria-describedby to provide supporting information for an input field<input type=“password"id=“pwd“ aria-describedby=“pwd-reqs“ /> <p id=“pwd-reqs”>Your password must be 8 characters in length and include one number</p>
aria-invalid
<label for=“firstname">First name</label>:<input name=“firstname" id=“firstname" aria-invalid="true">
aria-label and aria-labelledby
The purpose of aria-label and aria-labelledby are the sameUse aria-labelledby if the label text is visible on the screen
Use aria-label if the label text isn’t visible on the screen
Aria-labelledby
<label id="label" for="time">Self destruct this page in </label><input id="time" type="text" aria-labelledby="label time seconds" size="2" value="5"><span id="seconds"> seconds</span>
Example from WebAIM: http://webaim.org/presentations/2012/ahgaria/labelledby3
WAI-ARIA live regions
ARIA live regions (priority)
aria-live=“off”Updates are not announced to the user
aria-live=“polite”Updates only announced if user is idle
aria-live=“assertive”Updates are announced ASAP, but user is not interrupted
ARIA live regions (relevance)
aria-busy (values: true, false)AT will only announced changes once aria-busy=“false”
aria-atomic (values: true, false)Read out only the change, or the entire live region
aria-relevant (values: additions, removals, text)Relevant changes to live regions depends on value
<div aria-live="assertive" role="log">
<div id="container-contacts“ aria-live="assertive">
<div … role=“application">
WAI-ARIA for widgets
http://www.paciellogroup.com/blog/misc/ARIA/slider/
<button aria-valuetext="61%" aria-valuenow="61" aria-valuemax="100" aria-valuemin="0" aria-labelledby="sliderLabel" role="slider" id="sliderThumb1" class="sliderThumb" style="left: 113px;"> </button>
http://www.paciellogroup.com/blog/misc/ARIA/slider/
http://www.paciellogroup.com/blog/misc/samples/aria/slider/doubleslider.html
ARIA validation
ARIA attributes don’t validate in HTML4
Use the HTML5 DOCTYPE with ARIA markup
Validate using the W3C Nu Markup Validation Service
Take-aways
Dynamic content no longer has to be inaccessible to assistive technologies
Start using ARIA now (if you aren’t already)
Easy wins (landmark roles, forms)
It’s kinda fun!
Session evaluation
Creating dynamic and accessible content in Drupal 7 using WAI-ARIA
W3C WAI-ARIA documents
WAI-ARIA technical specificationhttp://www.w3.org/TR/wai-aria/
WAI-ARIA Primerhttp://www.w3.org/TR/wai-aria-primer
WAI-ARIA Authoring Practiceshttp://www.w3.org/TR/wai-aria-practices
Useful WAI-ARIA resources
Using ARIA in HTMLhttp://bit.ly/Qz3DHs
Introduction to WAI-ARIA (Opera)http://bit.ly/116YOW
The Paciello Group Blog http://www.paciellogroup.com/blog
Web accessibility know how
Level 3, 616-620 Harris St
Ultimo NSW 2007
t: +61 2 8218 9320
@accessiq
accessiq.org