Creating dynamic and accessiblecontent in Drupal 7 using WAI-ARIASarah Pulis (@sarahtp)Web Accessibility EvangelistDruaplC...
About me2002    Ignorant2002+   Educated and aware2010    Commitment2012    Champion        Read about Making accessibilit...
• People who use screen readers turn off  Javascript• You can’t have dynamic content on an  accessible website• Accessible...
WAI-ARIA      Accessible Rich   Internet Applications(from the W3C Web Accessibility Initiative)
Accessibility interoperability at aDOM Node without JavaScript             Role             States             Actions    ...
Accessibility interoperability at aDOM Node with JavaScript             ^Role             ^States             ^Actions    ...
WAI-ARIAWAI-ARIA rolesAbstract, widget, document structure andlandmark rolesWAI-ARIA states and propertiesWidget, live reg...
What we are looking at todayWAI-ARIA for page structureWAI-ARIA live regionsWAI-ARIA for formsWAI-ARIA for widgets
WAI-ARIA for page structure
<div role=”banner”>                                 <form role=”search”>                                                ”c...
Differentiate landmarkswith the same typeUse aria-label to differentiate betweenregions with the same landmark type<div ro...
Videos demonstrating landmark roles using NVDA available atLandmark roles - element list – NVDA andLandmark roles voiced b...
Assistive technology supportJaws 11/12/13 has complete support.ChromeVox has complete supportVoiceOver supports all landma...
WAI-ARIA and forms
aria-requiredUse aria-required=“true” forrequired form fields<label for="name">  First Name</label>:<input name="name" id=...
aria-describedbyUse aria-describedby to providesupporting information for an input field<input type=“password"id=“pwd“ ari...
aria-invalid<label for=“firstname">Firstname</label>:<input name=“firstname"id=“firstname" aria-invalid="true">
aria-label and aria-labelledbyThe purpose of aria-label and aria-labelledby are the sameUse aria-labelledby if the label t...
aria-labelledby<label id="label" for="time">Selfdestruct this page in </label><input id="time" type="text" aria-labelledby...
WAI-ARIA live regions
ARIA live regions (priority)aria-live=“off”Updates are not announced to the useraria-live=“polite”Updates only announced i...
ARIA live regions (relevance)aria-busy (values: true, false)AT will only announced changes once aria-busy=“false”aria-atom...
Video demonstrating ARIA live regions using NVDA onYouTube with captions.
WAI-ARIA for widgets
Video demonstrating dynamic menubar voiced by NVDA onYouTube with captions. Code from Accessible jQuery-uiComponents Demon...
Drupal and ARIA
Drupal 7 themes with WAI-ARIABoronGenesisPanels 960gsFrom Drupal Watchdog – D7 Starter Tehemes
Drupal accessibilityDrupal groupsJoin the Accessibility Drupal Group!List of Drupal sites in the Disability SectorAccessib...
ARIA validationARIA attributes don’t validate in HTML4Use the HTML5 DOCTYPE with ARIAmarkupValidate using the W3C Nu Marku...
Take-awaysDynamic content no longer has to beinaccessible to assistive technologiesStart using ARIA now (if you aren’t alr...
Don’t forget!Session evaluationCreating dynamic and accessible contentin Drupal 7 using WAI-ARIA[http://bit.ly/XWc3cM]
Slides and videosSlides from this presentation onAccess iQ™ SlideShareVideos from this presentation onAccess iQ™ YouTube c...
Access iQ™ provides practical hands-onworkshops that teach you how toimplement accessibility in your projects.HTML and CSS...
W3C WAI-ARIA documentsWAI-ARIA technical specificationhttp://www.w3.org/TR/wai-aria/WAI-ARIA Primerhttp://www.w3.org/TR/wa...
More WAI-ARIA resourcesUsing ARIA in HTMLhttp://bit.ly/Qz3DHsIntroduction to WAI-ARIA (Opera)http://bit.ly/116YOWThe Pacie...
Even more WAI-ARIA resourcesAccessible jQuery-ui Components Demonstrationhttp://bit.ly/12uew61Yahoo! Accessibility code li...
Level 3, 616-620 Harris StUltimo NSW 2007t: +61 2 8218 9320e: knowhow@accessiq.org    @accessiqaccessiq.orgWeb accessibili...
Creating dynamic and accessible content in Drupal 7 using WAI-ARIA
Upcoming SlideShare
Loading in …5
×

Creating dynamic and accessible content in Drupal 7 using WAI-ARIA

4,201 views
4,007 views

Published on

Presentation by Web Accessibility Evangelist Sarah Pulis at DrupalCon Sydney - 7 February 2013

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,201
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Developed by the Protocols and Formats Working Group, which is part of the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI)ARIA is a W3C Candidate Recommendation on 18 Jan 2011
  • A state is a dynamic property expressing characteristics of an object that may change in response to user action or automated processes. States do not affect the essential nature of the object, but represent data associated with the object or user interaction possibilities.
  • A state is a dynamic property expressing characteristics of an object that may change in response to user action or automated processes. States do not affect the essential nature of the object, but represent data associated with the object or user interaction possibilities.
  • Attributes that are essential to the nature of a given object, or that represent a data value associated with the object.
  • Only use banner, contentinfo and main once within a document or application
  • If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label
  • Creating dynamic and accessible content in Drupal 7 using WAI-ARIA

    1. 1. Creating dynamic and accessiblecontent in Drupal 7 using WAI-ARIASarah Pulis (@sarahtp)Web Accessibility EvangelistDruaplCon | Content Authoring | 7 February 2013
    2. 2. About me2002 Ignorant2002+ Educated and aware2010 Commitment2012 Champion Read about Making accessibility part of culture change: its all in the attitude on Access iQ™. Image credit: Ruth Ellison and Kim Chatterjee
    3. 3. • People who use screen readers turn off Javascript• You can’t have dynamic content on an accessible website• Accessible website are boring
    4. 4. WAI-ARIA Accessible Rich Internet Applications(from the W3C Web Accessibility Initiative)
    5. 5. Accessibility interoperability at aDOM Node without JavaScript Role States Actions Caret Data Selection Contract Text Assistive Hypertext UITechnology Value component Name Description UI Children Changes Relations From WAI-ARIA Primer
    6. 6. Accessibility interoperability at aDOM Node with JavaScript ^Role ^States ^Actions Caret Data Selection Contract Text Assistive Hypertext UITechnology ^Value component Name Description UI Children ^Changes ^Relations From WAI-ARIA Primer
    7. 7. WAI-ARIAWAI-ARIA rolesAbstract, widget, document structure andlandmark rolesWAI-ARIA states and propertiesWidget, live region, drag-and-drop andrelationship attributes
    8. 8. What we are looking at todayWAI-ARIA for page structureWAI-ARIA live regionsWAI-ARIA for formsWAI-ARIA for widgets
    9. 9. WAI-ARIA for page structure
    10. 10. <div role=”banner”> <form role=”search”> ”complementary <div role=”main”> ”navigation” <div role= <div role= <div role=”form”> <div role=”application”> ”<div role=”contentinfo”>
    11. 11. Differentiate landmarkswith the same typeUse aria-label to differentiate betweenregions with the same landmark type<div role=“navigation”aria-label=“main menu”><div role=“navigation”aria-label=“sub menu”>
    12. 12. Videos demonstrating landmark roles using NVDA available atLandmark roles - element list – NVDA andLandmark roles voiced by NVDA.
    13. 13. Assistive technology supportJaws 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)
    14. 14. WAI-ARIA and forms
    15. 15. aria-requiredUse aria-required=“true” forrequired form fields<label for="name"> First Name</label>:<input name="name" id="name" aria-required="true"><em>(required)</em>
    16. 16. aria-describedbyUse aria-describedby to providesupporting information for an input field<input type=“password"id=“pwd“ aria-describedby=“pwd-reqs“ /><p id=“pwd-reqs”>Your password must be 8characters in length and include onenumber</p>
    17. 17. aria-invalid<label for=“firstname">Firstname</label>:<input name=“firstname"id=“firstname" aria-invalid="true">
    18. 18. aria-label and aria-labelledbyThe purpose of aria-label and aria-labelledby are the sameUse aria-labelledby if the label text is visible onthe screenUse aria-label if the label text isn’t visible on thescreen
    19. 19. aria-labelledby<label id="label" for="time">Selfdestruct 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
    20. 20. WAI-ARIA live regions
    21. 21. 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
    22. 22. 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
    23. 23. Video demonstrating ARIA live regions using NVDA onYouTube with captions.
    24. 24. WAI-ARIA for widgets
    25. 25. Video demonstrating dynamic menubar voiced by NVDA onYouTube with captions. Code from Accessible jQuery-uiComponents Demonstration.
    26. 26. Drupal and ARIA
    27. 27. Drupal 7 themes with WAI-ARIABoronGenesisPanels 960gsFrom Drupal Watchdog – D7 Starter Tehemes
    28. 28. Drupal accessibilityDrupal groupsJoin the Accessibility Drupal Group!List of Drupal sites in the Disability SectorAccessible Drupal distrosWeb Accessibility Toolkit: Government of CanadaaGov: PreviousNext
    29. 29. ARIA validationARIA attributes don’t validate in HTML4Use the HTML5 DOCTYPE with ARIAmarkupValidate using the W3C Nu MarkupValidation Service
    30. 30. Take-awaysDynamic content no longer has to beinaccessible to assistive technologiesStart using ARIA now (if you aren’t already)Easy wins (landmark roles, forms)It’s kinda fun!
    31. 31. Don’t forget!Session evaluationCreating dynamic and accessible contentin Drupal 7 using WAI-ARIA[http://bit.ly/XWc3cM]
    32. 32. Slides and videosSlides from this presentation onAccess iQ™ SlideShareVideos from this presentation onAccess iQ™ YouTube channel
    33. 33. Access iQ™ provides practical hands-onworkshops that teach you how toimplement accessibility in your projects.HTML and CSS techniques for buildingaccessible websites – Sydney – teachingdevelopers how to create accessible digitalexperiences.Implementing accessibility into your digitalprojects [custom workshop] – teaching yourproject team who does what inaccessibility.accessiq.org/events
    34. 34. W3C WAI-ARIA documentsWAI-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
    35. 35. More WAI-ARIA resourcesUsing ARIA in HTMLhttp://bit.ly/Qz3DHsIntroduction to WAI-ARIA (Opera)http://bit.ly/116YOWThe Paciello Group Bloghttp://www.paciellogroup.com/blog
    36. 36. Even more WAI-ARIA resourcesAccessible jQuery-ui Components Demonstrationhttp://bit.ly/12uew61Yahoo! Accessibility code libraryhttp://bit.ly/12ueIC1Mozilla developer network – ARIAhttp://mzl.la/XWgvZ1
    37. 37. Level 3, 616-620 Harris StUltimo NSW 2007t: +61 2 8218 9320e: knowhow@accessiq.org @accessiqaccessiq.orgWeb accessibility know how

    ×