creating dynamic and accessible content in drupal 7 using wai-aria
DESCRIPTION
Creating dynamic and accessible content in Drupal 7 using WAI-ARIA. DruaplCon | Content Authoring | 7 February 2013. Sarah Pulis (@ sarahtp ) Web Accessibility Evangelist. About me. Ignorant 2002+Educated and aware Commitment 2012Champion. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/1.jpg)
Creating dynamic and accessible content in Drupal 7 using WAI-ARIASarah Pulis (@sarahtp)Web Accessibility Evangelist
DruaplCon | Content Authoring | 7 February 2013
![Page 2: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/2.jpg)
About me
2002 Ignorant2002+ Educated and aware2010 Commitment2012 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
![Page 3: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/3.jpg)
WAI-ARIA Accessible Rich
Internet Applications(from the W3C Web Accessibility Initiative)
![Page 4: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/4.jpg)
Accessibility interoperability at a DOM Node without JavaScript
Assistive Technology
UIcomponent
Data
UI
RoleStatesActionsCaretSelectionTextHypertextValueNameDescriptionChildrenChangesRelations
Con
tract
From WAI-ARIA Primer
![Page 5: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/5.jpg)
Accessibility interoperability at a DOM Node with JavaScript
Assistive Technology
UIcomponent
Data
UI
^Role^States^ActionsCaretSelectionTextHypertext^ValueNameDescriptionChildren^Changes^Relations
Con
tract
From WAI-ARIA Primer
![Page 6: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/6.jpg)
WAI-ARIA
WAI-ARIA rolesAbstract, widget, document structure and landmark rolesWAI-ARIA states and propertiesWidget, live region, drag-and-drop and relationship attributes
![Page 7: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/7.jpg)
What we are looking at today
WAI-ARIA for page structureWAI-ARIA live regionsWAI-ARIA to enhance keyboard navigationWAI-ARIA for formsWAI-ARIA for widgets
![Page 8: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/8.jpg)
WAI-ARIA for page structure
![Page 9: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/9.jpg)
![Page 10: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/10.jpg)
<div role=”banner”> <form role=”search”>
<div r
ole=
”navigation”
<div role=”contentinfo”>
<div role=”main”>
<div role=”form”>
<div role=”application”>
<div r
ole=
”complementary
”
![Page 11: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/11.jpg)
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”>
![Page 12: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/12.jpg)
Assistive technology support
Jaws 11/12/13 has complete support.ChromeVox has complete supportVoiceOver 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)
![Page 14: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/14.jpg)
WAI-ARIA and forms
![Page 15: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/15.jpg)
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>
![Page 16: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/16.jpg)
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>
![Page 17: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/17.jpg)
aria-invalid
<label for=“firstname">First name</label>:<input name=“firstname" id=“firstname" aria-invalid="true">
![Page 18: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/18.jpg)
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 screenUse aria-label if the label text isn’t visible on the screen
![Page 19: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/19.jpg)
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
![Page 20: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/20.jpg)
WAI-ARIA live regions
![Page 21: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/21.jpg)
ARIA live regions (priority)
aria-live=“off”Updates are not announced to the useraria-live=“polite”Updates only announced if user is idlearia-live=“assertive”Updates are announced ASAP, but user is not interrupted
![Page 22: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/22.jpg)
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 regionaria-relevant (values: additions, removals, text)Relevant changes to live regions depends on value
![Page 23: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/23.jpg)
<div aria-live="assertive" role="log">
<div id="container-contacts“ aria-live="assertive">
<div … role=“application">
![Page 24: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/24.jpg)
WAI-ARIA for widgets
![Page 25: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/25.jpg)
http://www.paciellogroup.com/blog/misc/ARIA/slider/
![Page 26: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/26.jpg)
<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/
![Page 27: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/27.jpg)
http://www.paciellogroup.com/blog/misc/samples/aria/slider/doubleslider.html
![Page 28: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/28.jpg)
ARIA validation
ARIA attributes don’t validate in HTML4Use the HTML5 DOCTYPE with ARIA markup Validate using the W3C Nu Markup Validation Service
![Page 29: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/29.jpg)
Take-aways
Dynamic content no longer has to be inaccessible to assistive technologiesStart using ARIA now (if you aren’t already)Easy wins (landmark roles, forms)It’s kinda fun!
![Page 30: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/30.jpg)
Session evaluation
Creating dynamic and accessible content in Drupal 7 using WAI-ARIA
![Page 31: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/31.jpg)
W3C WAI-ARIA documents
WAI-ARIA technical specificationhttp://www.w3.org/TR/wai-aria/WAI-ARIA Primerhttp://www.w3.org/TR/wai-aria-primerWAI-ARIA Authoring Practiceshttp://www.w3.org/TR/wai-aria-practices
![Page 32: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/32.jpg)
Useful WAI-ARIA resources
Using ARIA in HTMLhttp://bit.ly/Qz3DHsIntroduction to WAI-ARIA (Opera)http://bit.ly/116YOWThe Paciello Group Blog http://www.paciellogroup.com/blog
![Page 33: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA](https://reader036.vdocuments.net/reader036/viewer/2022062501/568166f4550346895ddb52de/html5/thumbnails/33.jpg)
Web accessibility know how
Level 3, 616-620 Harris StUltimo NSW 2007t: +61 2 8218 9320e: [email protected]
@accessiq
accessiq.org