SlideShare a Scribd company logo
Creating dynamic and accessible
content in Drupal 7 using WAI-ARIA
Sarah 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
• People who use screen readers turn off
  Javascript
• You can’t have dynamic content on an
  accessible website
• Accessible website are boring
WAI-ARIA
      Accessible Rich
   Internet Applications
(from the W3C Web Accessibility Initiative)
Accessibility interoperability at a
DOM Node without JavaScript
             Role
             States
             Actions
             Caret                                        Data
             Selection


                           Contract
             Text
 Assistive   Hypertext
                                         UI
Technology   Value                    component
             Name
             Description                                    UI
             Children
             Changes
             Relations
                                                  From WAI-ARIA Primer
Accessibility interoperability at a
DOM Node with JavaScript
             ^Role
             ^States
             ^Actions
             Caret                                        Data
             Selection


                           Contract
             Text
 Assistive   Hypertext
                                         UI
Technology   ^Value                   component
             Name
             Description                                    UI
             Children
             ^Changes
             ^Relations
                                                  From WAI-ARIA Primer
WAI-ARIA

WAI-ARIA roles
Abstract, widget, document structure and
landmark roles
WAI-ARIA states and properties
Widget, 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 for forms
WAI-ARIA for widgets
WAI-ARIA for page structure
<div role=”banner”>
                                 <form role=”search”>




                                                ”complementary
                 <div role=”main”>
  ”navigation”
  <div role=




                                                <div role=
                   <div role=”form”>

                   <div role=”application”>




                                                ”
<div role=”contentinfo”>
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”>
Videos demonstrating landmark roles using NVDA available at
Landmark roles - element list – NVDA and
Landmark roles voiced by NVDA.
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 landmarks
Latest 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 same
Use 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
Video demonstrating ARIA live regions using NVDA on
YouTube with captions.
WAI-ARIA for widgets
Video demonstrating dynamic menubar voiced by NVDA on
YouTube with captions. Code from Accessible jQuery-ui
Components Demonstration.
Drupal and ARIA
Drupal 7 themes with WAI-ARIA

Boron
Genesis
Panels 960gs

From Drupal Watchdog – D7 Starter Tehemes
Drupal accessibility

Drupal groups
Join the Accessibility Drupal Group!
List of Drupal sites in the Disability Sector
Accessible Drupal distros
Web Accessibility Toolkit: Government of Canada
aGov: PreviousNext
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!
Don’t forget!

Session evaluation
Creating dynamic and accessible content
in Drupal 7 using WAI-ARIA
[http://bit.ly/XWc3cM]
Slides and videos

Slides from this presentation on
Access iQ™ SlideShare

Videos from this presentation on
Access iQ™ YouTube channel
Access iQ™ provides practical hands-on
workshops that teach you how to
implement accessibility in your projects.

HTML and CSS techniques for building
accessible websites – Sydney – teaching
developers how to create accessible digital
experiences.

Implementing accessibility into your digital
projects [custom workshop] – teaching your
project team who does what in
accessibility.

accessiq.org/events
W3C WAI-ARIA documents

WAI-ARIA technical specification
http://www.w3.org/TR/wai-aria/
WAI-ARIA Primer
http://www.w3.org/TR/wai-aria-primer
WAI-ARIA Authoring Practices
http://www.w3.org/TR/wai-aria-practices
More WAI-ARIA resources

Using ARIA in HTML
http://bit.ly/Qz3DHs
Introduction to WAI-ARIA (Opera)
http://bit.ly/116YOW
The Paciello Group Blog
http://www.paciellogroup.com/blog
Even more WAI-ARIA resources

Accessible jQuery-ui Components Demonstration
http://bit.ly/12uew61
Yahoo! Accessibility code library
http://bit.ly/12ueIC1
Mozilla developer network – ARIA
http://mzl.la/XWgvZ1
Level 3, 616-620 Harris St
Ultimo NSW 2007
t: +61 2 8218 9320
e: knowhow@accessiq.org
    @accessiq

accessiq.org


Web accessibility know how

More Related Content

Viewers also liked

Reaching Corporate Australia with a Business Case
Reaching Corporate Australia with a Business CaseReaching Corporate Australia with a Business Case
Reaching Corporate Australia with a Business Case
Access iQ
 
Aria a11ycamp-bay-2015
Aria a11ycamp-bay-2015Aria a11ycamp-bay-2015
Aria a11ycamp-bay-2015
Dylan Barrell
 
NDS Employment Conference
NDS Employment ConferenceNDS Employment Conference
NDS Employment Conference
Access iQ
 
Ramp Up Your Web Experiences Using Drupal and Apache Solr
Ramp Up Your Web Experiences Using Drupal and Apache SolrRamp Up Your Web Experiences Using Drupal and Apache Solr
Ramp Up Your Web Experiences Using Drupal and Apache Solr
lucenerevolution
 
Implementing ARIA for Real World Accessibility
Implementing ARIA for Real World AccessibilityImplementing ARIA for Real World Accessibility
Implementing ARIA for Real World Accessibility
Jared Smith
 
Web accessibility: It's everyone's responsibility
Web accessibility: It's everyone's responsibilityWeb accessibility: It's everyone's responsibility
Web accessibility: It's everyone's responsibility
Access iQ
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility Techniques
Jared Smith
 

Viewers also liked (7)

Reaching Corporate Australia with a Business Case
Reaching Corporate Australia with a Business CaseReaching Corporate Australia with a Business Case
Reaching Corporate Australia with a Business Case
 
Aria a11ycamp-bay-2015
Aria a11ycamp-bay-2015Aria a11ycamp-bay-2015
Aria a11ycamp-bay-2015
 
NDS Employment Conference
NDS Employment ConferenceNDS Employment Conference
NDS Employment Conference
 
Ramp Up Your Web Experiences Using Drupal and Apache Solr
Ramp Up Your Web Experiences Using Drupal and Apache SolrRamp Up Your Web Experiences Using Drupal and Apache Solr
Ramp Up Your Web Experiences Using Drupal and Apache Solr
 
Implementing ARIA for Real World Accessibility
Implementing ARIA for Real World AccessibilityImplementing ARIA for Real World Accessibility
Implementing ARIA for Real World Accessibility
 
Web accessibility: It's everyone's responsibility
Web accessibility: It's everyone's responsibilityWeb accessibility: It's everyone's responsibility
Web accessibility: It's everyone's responsibility
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility Techniques
 

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

Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIADynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIA
Access iQ
 
Accessing Your Existing SAP NetWeaver Portal on Mobile Device
Accessing Your Existing SAP NetWeaver Portal on Mobile DeviceAccessing Your Existing SAP NetWeaver Portal on Mobile Device
Accessing Your Existing SAP NetWeaver Portal on Mobile DeviceSAP Portal
 
HTML5 and ARIA accessibility - Bangalore 2013
HTML5 and ARIA accessibility - Bangalore 2013HTML5 and ARIA accessibility - Bangalore 2013
HTML5 and ARIA accessibility - Bangalore 2013
Ted Drake
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
Radek Pavlíček
 
HTML5 Accessibility CSUN 2012
HTML5 Accessibility CSUN 2012HTML5 Accessibility CSUN 2012
HTML5 Accessibility CSUN 2012
Steven Faulkner
 
Optimizing HTML5 Sites with CQ5/WEM
Optimizing HTML5 Sites with CQ5/WEMOptimizing HTML5 Sites with CQ5/WEM
Optimizing HTML5 Sites with CQ5/WEM
Gabriel Walt
 
ARIA: A bridge to greater accessibility
ARIA: A bridge to greater accessibilityARIA: A bridge to greater accessibility
ARIA: A bridge to greater accessibility
Rachel Cherry
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
IWMW
 
CSUN The ARIA Technology Stack Browsers and Screen Readers
CSUN The ARIA Technology Stack Browsers and Screen ReadersCSUN The ARIA Technology Stack Browsers and Screen Readers
CSUN The ARIA Technology Stack Browsers and Screen ReadersEduardo Meza-Etienne
 
Top Five Reasons to Upgrade to SAP NetWeaver Portal 7.3
Top Five Reasons to Upgrade to SAP NetWeaver Portal 7.3Top Five Reasons to Upgrade to SAP NetWeaver Portal 7.3
Top Five Reasons to Upgrade to SAP NetWeaver Portal 7.3
SAP Portal
 
Moving to Web 2.0 - Best Practices for Business and Application Migration
Moving to Web 2.0 - Best Practices for Business and Application MigrationMoving to Web 2.0 - Best Practices for Business and Application Migration
Moving to Web 2.0 - Best Practices for Business and Application Migration
anilmadugula
 
Develop Your First Mobile Application with Portal on Device
Develop Your First Mobile Application with Portal on DeviceDevelop Your First Mobile Application with Portal on Device
Develop Your First Mobile Application with Portal on DeviceSAP Portal
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
Dennis Lembree
 
Smwcon widget editor - first preview
Smwcon widget editor - first previewSmwcon widget editor - first preview
Smwcon widget editor - first preview
Jesse Wang
 
Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!
Andrew Ronksley
 
RIA And SOA
RIA And SOARIA And SOA
RIA And SOA
Ethan Cha
 
When worlds Collide: HTML5 Meets the Cloud
When worlds Collide: HTML5 Meets the CloudWhen worlds Collide: HTML5 Meets the Cloud
When worlds Collide: HTML5 Meets the Cloud
David Pallmann
 
What is WebDAV - uploaded by Murali Krishna Nookella
What is WebDAV - uploaded by Murali Krishna NookellaWhat is WebDAV - uploaded by Murali Krishna Nookella
What is WebDAV - uploaded by Murali Krishna Nookella
muralikrishnanookella
 
DrupalCamp ATL 2010: Not all CMSs are created equal
DrupalCamp ATL 2010: Not all CMSs are created equalDrupalCamp ATL 2010: Not all CMSs are created equal
DrupalCamp ATL 2010: Not all CMSs are created equal
andrewmriley
 
Kentico Technical Learning: Exploring jQuery Mobile
Kentico Technical Learning: Exploring jQuery MobileKentico Technical Learning: Exploring jQuery Mobile
Kentico Technical Learning: Exploring jQuery Mobile
Thomas Robbins
 

Similar to Creating dynamic and accessible content in Drupal 7 using WAI-ARIA (20)

Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIADynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIA
 
Accessing Your Existing SAP NetWeaver Portal on Mobile Device
Accessing Your Existing SAP NetWeaver Portal on Mobile DeviceAccessing Your Existing SAP NetWeaver Portal on Mobile Device
Accessing Your Existing SAP NetWeaver Portal on Mobile Device
 
HTML5 and ARIA accessibility - Bangalore 2013
HTML5 and ARIA accessibility - Bangalore 2013HTML5 and ARIA accessibility - Bangalore 2013
HTML5 and ARIA accessibility - Bangalore 2013
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
 
HTML5 Accessibility CSUN 2012
HTML5 Accessibility CSUN 2012HTML5 Accessibility CSUN 2012
HTML5 Accessibility CSUN 2012
 
Optimizing HTML5 Sites with CQ5/WEM
Optimizing HTML5 Sites with CQ5/WEMOptimizing HTML5 Sites with CQ5/WEM
Optimizing HTML5 Sites with CQ5/WEM
 
ARIA: A bridge to greater accessibility
ARIA: A bridge to greater accessibilityARIA: A bridge to greater accessibility
ARIA: A bridge to greater accessibility
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
 
CSUN The ARIA Technology Stack Browsers and Screen Readers
CSUN The ARIA Technology Stack Browsers and Screen ReadersCSUN The ARIA Technology Stack Browsers and Screen Readers
CSUN The ARIA Technology Stack Browsers and Screen Readers
 
Top Five Reasons to Upgrade to SAP NetWeaver Portal 7.3
Top Five Reasons to Upgrade to SAP NetWeaver Portal 7.3Top Five Reasons to Upgrade to SAP NetWeaver Portal 7.3
Top Five Reasons to Upgrade to SAP NetWeaver Portal 7.3
 
Moving to Web 2.0 - Best Practices for Business and Application Migration
Moving to Web 2.0 - Best Practices for Business and Application MigrationMoving to Web 2.0 - Best Practices for Business and Application Migration
Moving to Web 2.0 - Best Practices for Business and Application Migration
 
Develop Your First Mobile Application with Portal on Device
Develop Your First Mobile Application with Portal on DeviceDevelop Your First Mobile Application with Portal on Device
Develop Your First Mobile Application with Portal on Device
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
 
Smwcon widget editor - first preview
Smwcon widget editor - first previewSmwcon widget editor - first preview
Smwcon widget editor - first preview
 
Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!
 
RIA And SOA
RIA And SOARIA And SOA
RIA And SOA
 
When worlds Collide: HTML5 Meets the Cloud
When worlds Collide: HTML5 Meets the CloudWhen worlds Collide: HTML5 Meets the Cloud
When worlds Collide: HTML5 Meets the Cloud
 
What is WebDAV - uploaded by Murali Krishna Nookella
What is WebDAV - uploaded by Murali Krishna NookellaWhat is WebDAV - uploaded by Murali Krishna Nookella
What is WebDAV - uploaded by Murali Krishna Nookella
 
DrupalCamp ATL 2010: Not all CMSs are created equal
DrupalCamp ATL 2010: Not all CMSs are created equalDrupalCamp ATL 2010: Not all CMSs are created equal
DrupalCamp ATL 2010: Not all CMSs are created equal
 
Kentico Technical Learning: Exploring jQuery Mobile
Kentico Technical Learning: Exploring jQuery MobileKentico Technical Learning: Exploring jQuery Mobile
Kentico Technical Learning: Exploring jQuery Mobile
 

More from Access iQ

Creating an inclusive social media strategy
Creating an inclusive social media strategyCreating an inclusive social media strategy
Creating an inclusive social media strategyAccess iQ
 
Web accessibility: it's not a dirty word
Web accessibility: it's not a dirty wordWeb accessibility: it's not a dirty word
Web accessibility: it's not a dirty word
Access iQ
 
Using the cloud to support people with disabilities
Using the cloud to support people with disabilitiesUsing the cloud to support people with disabilities
Using the cloud to support people with disabilities
Access iQ
 
Accessibility for social media platforms
Accessibility for social media platformsAccessibility for social media platforms
Accessibility for social media platforms
Access iQ
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!
Access iQ
 
Understanding the implications of accessibility requirements on your project
Understanding the implications of accessibility requirements on your projectUnderstanding the implications of accessibility requirements on your project
Understanding the implications of accessibility requirements on your projectAccess iQ
 
Maximising digital engagement and inclusion 2.0
Maximising digital engagement and inclusion 2.0Maximising digital engagement and inclusion 2.0
Maximising digital engagement and inclusion 2.0
Access iQ
 
Strategies for ensuring the accessibility of online content
Strategies for ensuring the accessibility of online contentStrategies for ensuring the accessibility of online content
Strategies for ensuring the accessibility of online contentAccess iQ
 
Accessibility and the Cloud
Accessibility and the CloudAccessibility and the Cloud
Accessibility and the Cloud
Access iQ
 

More from Access iQ (9)

Creating an inclusive social media strategy
Creating an inclusive social media strategyCreating an inclusive social media strategy
Creating an inclusive social media strategy
 
Web accessibility: it's not a dirty word
Web accessibility: it's not a dirty wordWeb accessibility: it's not a dirty word
Web accessibility: it's not a dirty word
 
Using the cloud to support people with disabilities
Using the cloud to support people with disabilitiesUsing the cloud to support people with disabilities
Using the cloud to support people with disabilities
 
Accessibility for social media platforms
Accessibility for social media platformsAccessibility for social media platforms
Accessibility for social media platforms
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!
 
Understanding the implications of accessibility requirements on your project
Understanding the implications of accessibility requirements on your projectUnderstanding the implications of accessibility requirements on your project
Understanding the implications of accessibility requirements on your project
 
Maximising digital engagement and inclusion 2.0
Maximising digital engagement and inclusion 2.0Maximising digital engagement and inclusion 2.0
Maximising digital engagement and inclusion 2.0
 
Strategies for ensuring the accessibility of online content
Strategies for ensuring the accessibility of online contentStrategies for ensuring the accessibility of online content
Strategies for ensuring the accessibility of online content
 
Accessibility and the Cloud
Accessibility and the CloudAccessibility and the Cloud
Accessibility and the Cloud
 

Recently uploaded

Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 

Recently uploaded (20)

Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 

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

  • 1. Creating dynamic and accessible content in Drupal 7 using WAI-ARIA Sarah Pulis (@sarahtp) Web Accessibility Evangelist DruaplCon | Content Authoring | 7 February 2013
  • 2. 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
  • 3. • People who use screen readers turn off Javascript • You can’t have dynamic content on an accessible website • Accessible website are boring
  • 4. WAI-ARIA Accessible Rich Internet Applications (from the W3C Web Accessibility Initiative)
  • 5. Accessibility interoperability at a DOM Node without JavaScript Role States Actions Caret Data Selection Contract Text Assistive Hypertext UI Technology Value component Name Description UI Children Changes Relations From WAI-ARIA Primer
  • 6. Accessibility interoperability at a DOM Node with JavaScript ^Role ^States ^Actions Caret Data Selection Contract Text Assistive Hypertext UI Technology ^Value component Name Description UI Children ^Changes ^Relations From WAI-ARIA Primer
  • 7. WAI-ARIA WAI-ARIA roles Abstract, widget, document structure and landmark roles WAI-ARIA states and properties Widget, live region, drag-and-drop and relationship attributes
  • 8. What we are looking at today WAI-ARIA for page structure WAI-ARIA live regions WAI-ARIA for forms WAI-ARIA for widgets
  • 9. WAI-ARIA for page structure
  • 10.
  • 11. <div role=”banner”> <form role=”search”> ”complementary <div role=”main”> ”navigation” <div role= <div role= <div role=”form”> <div role=”application”> ” <div role=”contentinfo”>
  • 12. 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”>
  • 13. Videos demonstrating landmark roles using NVDA available at Landmark roles - element list – NVDA and Landmark roles voiced by NVDA.
  • 14. 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 landmarks Latest ARIA landmark role support data, The Paciello Group (Nov 2011)
  • 16. 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>
  • 17. 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>
  • 19. aria-label and aria-labelledby The purpose of aria-label and aria- labelledby are the same Use aria-labelledby if the label text is visible on the screen Use aria-label if the label text isn’t visible on the screen
  • 20. 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
  • 22. 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
  • 23. 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
  • 24. Video demonstrating ARIA live regions using NVDA on YouTube with captions.
  • 26. Video demonstrating dynamic menubar voiced by NVDA on YouTube with captions. Code from Accessible jQuery-ui Components Demonstration.
  • 28. Drupal 7 themes with WAI-ARIA Boron Genesis Panels 960gs From Drupal Watchdog – D7 Starter Tehemes
  • 29. Drupal accessibility Drupal groups Join the Accessibility Drupal Group! List of Drupal sites in the Disability Sector Accessible Drupal distros Web Accessibility Toolkit: Government of Canada aGov: PreviousNext
  • 30. ARIA validation ARIA attributes don’t validate in HTML4 Use the HTML5 DOCTYPE with ARIA markup Validate using the W3C Nu Markup Validation Service
  • 31. 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!
  • 32. Don’t forget! Session evaluation Creating dynamic and accessible content in Drupal 7 using WAI-ARIA [http://bit.ly/XWc3cM]
  • 33. Slides and videos Slides from this presentation on Access iQ™ SlideShare Videos from this presentation on Access iQ™ YouTube channel
  • 34. Access iQ™ provides practical hands-on workshops that teach you how to implement accessibility in your projects. HTML and CSS techniques for building accessible websites – Sydney – teaching developers how to create accessible digital experiences. Implementing accessibility into your digital projects [custom workshop] – teaching your project team who does what in accessibility. accessiq.org/events
  • 35. W3C WAI-ARIA documents WAI-ARIA technical specification http://www.w3.org/TR/wai-aria/ WAI-ARIA Primer http://www.w3.org/TR/wai-aria-primer WAI-ARIA Authoring Practices http://www.w3.org/TR/wai-aria-practices
  • 36. More WAI-ARIA resources Using ARIA in HTML http://bit.ly/Qz3DHs Introduction to WAI-ARIA (Opera) http://bit.ly/116YOW The Paciello Group Blog http://www.paciellogroup.com/blog
  • 37. Even more WAI-ARIA resources Accessible jQuery-ui Components Demonstration http://bit.ly/12uew61 Yahoo! Accessibility code library http://bit.ly/12ueIC1 Mozilla developer network – ARIA http://mzl.la/XWgvZ1
  • 38. Level 3, 616-620 Harris St Ultimo NSW 2007 t: +61 2 8218 9320 e: knowhow@accessiq.org @accessiq accessiq.org Web accessibility know how

Editor's Notes

  1. 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
  2. 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.
  3. 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.
  4. Attributes that are essential to the nature of a given object, or that represent a data value associated with the object.
  5. Only use banner, contentinfo and main once within a document or application
  6. If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label