SlideShare une entreprise Scribd logo
1  sur  56
Télécharger pour lire hors ligne
ARIA Gone Wild!

    Jared Smith
  @jared_w_smith
    webaim.org
ARIA




n. A solo vocal piece with instrumental accompaniment, as in an opera.
Accessible Rich
Internet Applications
why aria?
weaknesses in
    html
dynamic
content
updates
soware-like
 interactions
 in web apps
complex
    web
applications
aria is sexy
 and cool
aria allows us to build
accessibility into modern
 web applications today
aria does not
   solve all
accessibility
    issues
“How do I
download
  aria?”
aria is simply markup

   roles, states, and properties
   <div role=”main”>
aria does not change browser
functionality or visual appearance
aria changes
and enhances
 native html
  semantics

 aria always
    wins
most answers
  are in the
specification

  using
WAI-ARIA in
  HTML
aria is
   supported*
  by nearly all
modern browsers,
 screen readers,
  and scripting
    libraries


         *support varies
you can only make
your content more
accessible by using
        aria

you lose nothing by
   using it now


          (if done correctly)
when shouldn’t i use aria?
when native html
    will get the job done
Bad:
<img src="submit.jpg" onclick=...>

OK:
<a onclick="..."><img src="submit.jpg"...

Better:
<a role="button" onclick="...">
<img src="submit.jpg"...

Best:
<button onclick="...">
aria landmarks
application, banner, complementary, contentinfo,
       main, navigation, form, and search



       <ul role=”navigation”>

           <div role=”main”>

        <form role=”search”>
you can (but don’t have to) label multiple
landmarks of the same type to differentiate them


       <ul role=”navigation”
   aria-label=”main navigation”>

      <div role=”navigation”
   aria-labelledby=”catHeading”>
<h2 id=”catHeading”>Categories</h2>
don’t overdo it
adding aria just
 because you can
is a slippery slope
typically only one
     per page:
    banner,
contentinfo,
    and main
avoid orphaned
     content

put everything in a
     landmark
the end of
“skip” links?
screen reader “freakout” mode




when an element that has focus or is being read is
            modified or destroyed
screen reader “freakout” mode


can be controlled by allowing manual control of
 updates, setting focus with javascript, aria live
             regions, aria alerts, etc.
learn the power of
tabindex=0 and
 tabindex=-1

learn the dangers of
  tabindex=1+
role=”alert”

read me right now
regardless of focus

also alertdialog
role=”presentation”

  hides roles of elements
and most descendants from
   assistive technology

       <table
role=”presentation”>


   will should not hide default
   roles of navigable elements
role=”application”




forms mode vs. reading mode
application or forms
mode causes screen
reader keystrokes to
   be sent to the
browser/application

  standard screen
reader shortcuts are
      disabled
<body role=”application”>
makes it very difficult to manually move out
         of application/forms mode
some aria elements (tree view, slider, table,
tabpanel, dialog, toolbar, menus, etc.) have
      an assumed application role
test without a mouse

... and test without a mouse
      in a screen reader

  screen readers change
   keyboard interaction
        behavior
follow the aria
design patterns
program esc key
to cancel dialogs,
   menus, etc.
aria-required=”true”


       not necessary if it’s intuitive
        that the field is required

             does not change
            functionality, only
                semantics
aria-invalid=”true”




 identify broken or
 errant form fields
let css do the heavy liing



   you change semantic
 attributes, let css handle
          styling

[aria-invalid=true] {
    border : 2px solid red;
}
aria-disabled=”true”

disabled=”disabled” in html removes object from
 keyboard flow and have extremely poor contrast



                          aria-disabled=”true”
                          allows it to remain in the
                            keyboard flow, but be
                            presented as disabled.
aria-hidden=”true”



hides element and all
    descendants

child elements can’t be
       unhidden

[aria-hidden=true]{
   display:none;
}
aria-labelledby




 overcomes html’s
1-to-1 label to form
 control limitation
Name    Age   Weight

                       Verl    24     145

                       Ethel




aria-labelledby=“row2header ageheader”
aria-haspopup




indicate that a link or
  button triggers an
  in-page dialog or
      sub-menu
aria-expanded

    indicate the status of expandable elements

should usually be placed on the link or button that
             controls the expansion
... and much, much more...
              role=”menu”
              role=”tree”
              role=”grid”
            role=”slider”
          role=”progressbar”
            role=”tooltip”
           role=”tabpanel”
               aria-live
             aria-grabbed
                   etc.
 Authoring Practices document provides
  interaction models and design patterns
http://www.w3.org/WAI/PF/aria-practices/
sometimes things fail,
even if you’ve followed
   the specification

 screen reader testing
        is vital

support is improving
wcag 2.0 techniques
 do not yet include
     much aria

focus on accessibility,
 not just compliance
html5 mappings

           <div>

     <div role=”main”>

     <main role=”main”>

           <main>


          <input>

<input aria-required=”true”>

      <input required>
the future is html5
thank you
  Jared Smith
@jared_w_smith
  webaim.org

Contenu connexe

Tendances

WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
Patrick Lauke
 
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Patrick Lauke
 
Netvibes UWA workshop at ParisWeb 2007
Netvibes UWA workshop at ParisWeb 2007Netvibes UWA workshop at ParisWeb 2007
Netvibes UWA workshop at ParisWeb 2007
Netvibes
 
Tutorial1 - Part 2
Tutorial1 - Part 2Tutorial1 - Part 2
Tutorial1 - Part 2
hstryk
 

Tendances (20)

Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
 
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
 
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
Getting touchy - an introduction to touch events / Web Standards Days / Mosco...
 
Responsive design
Responsive designResponsive design
Responsive design
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
jQuery for web development
jQuery for web developmentjQuery for web development
jQuery for web development
 
You're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp OrlandoYou're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp Orlando
 
AppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App PerformanceAppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App Performance
 
Dress Your WordPress with Child Themes
Dress Your WordPress with Child ThemesDress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
 
P.S. I love you
P.S. I love youP.S. I love you
P.S. I love you
 
Netvibes UWA workshop at ParisWeb 2007
Netvibes UWA workshop at ParisWeb 2007Netvibes UWA workshop at ParisWeb 2007
Netvibes UWA workshop at ParisWeb 2007
 
Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
 
Apex & jQuery Mobile
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
 
Tutorial1 - Part 2
Tutorial1 - Part 2Tutorial1 - Part 2
Tutorial1 - Part 2
 
WAI-ARIA
WAI-ARIAWAI-ARIA
WAI-ARIA
 

En vedette

[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
Christopher Schmitt
 

En vedette (20)

Curriculum Vitae de un alumno.
Curriculum Vitae de un alumno.Curriculum Vitae de un alumno.
Curriculum Vitae de un alumno.
 
The Legend of the Typical Screen Reader User
The Legend of the Typical Screen Reader UserThe Legend of the Typical Screen Reader User
The Legend of the Typical Screen Reader User
 
Implementing ARIA for Real World Accessibility
Implementing ARIA for Real World AccessibilityImplementing ARIA for Real World Accessibility
Implementing ARIA for Real World Accessibility
 
Insights into Cognitive Web Accessibility
Insights into Cognitive Web AccessibilityInsights into Cognitive Web Accessibility
Insights into Cognitive Web Accessibility
 
Daniel Àlvarez G - Hoja de vida 2016
Daniel Àlvarez G - Hoja de vida 2016Daniel Àlvarez G - Hoja de vida 2016
Daniel Àlvarez G - Hoja de vida 2016
 
Buenamar tejiendo cultura dede la primera infancia.
Buenamar tejiendo cultura dede la primera infancia.Buenamar tejiendo cultura dede la primera infancia.
Buenamar tejiendo cultura dede la primera infancia.
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown Widget
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT Accessibility
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBos
 
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!
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical Communicators
 
Usability meets accessibility
Usability meets accessibilityUsability meets accessibility
Usability meets accessibility
 
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
 
Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]
 

Similaire à ARIA Gone Wild

Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 
aria_with_kissy
aria_with_kissyaria_with_kissy
aria_with_kissy
yiming he
 

Similaire à ARIA Gone Wild (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
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
 
Aria a11ycamp-bay-2015
Aria a11ycamp-bay-2015Aria a11ycamp-bay-2015
Aria a11ycamp-bay-2015
 
WAI-ARIA In Practice - Deborah Kaplan - ebookcraft 2018
WAI-ARIA In Practice - Deborah Kaplan - ebookcraft 2018WAI-ARIA In Practice - Deborah Kaplan - ebookcraft 2018
WAI-ARIA In Practice - Deborah Kaplan - ebookcraft 2018
 
Rich Internet Applications - How to Make them Accessible
Rich Internet Applications - How to Make them AccessibleRich Internet Applications - How to Make them Accessible
Rich Internet Applications - How to Make them Accessible
 
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!
 
aria_with_kissy
aria_with_kissyaria_with_kissy
aria_with_kissy
 
ARIA and JavaScript Accessibility
ARIA and JavaScript AccessibilityARIA and JavaScript Accessibility
ARIA and JavaScript Accessibility
 
Web accessibility - WAI-ARIA a small introduction
Web accessibility - WAI-ARIA a small introductionWeb accessibility - WAI-ARIA a small introduction
Web accessibility - WAI-ARIA a small introduction
 
Accessible Salesforce
Accessible SalesforceAccessible Salesforce
Accessible Salesforce
 
HTML5 & WAI ARIA for online banking
HTML5 & WAI ARIA for online bankingHTML5 & WAI ARIA for online banking
HTML5 & WAI ARIA for online banking
 
Accessibility: A Journey to Accessible Rich Components
Accessibility: A Journey to Accessible Rich ComponentsAccessibility: A Journey to Accessible Rich Components
Accessibility: A Journey to Accessible Rich Components
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
 
Web accessibility workshop 4
Web accessibility workshop 4Web accessibility workshop 4
Web accessibility workshop 4
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
 

Plus de Jared Smith (6)

Accessibility & Compatibility
Accessibility & CompatibilityAccessibility & Compatibility
Accessibility & Compatibility
 
Web Accessibility Gone Wild
Web Accessibility Gone WildWeb Accessibility Gone Wild
Web Accessibility Gone Wild
 
Web 2.0 = Accessibility 2.0?
Web 2.0 = Accessibility 2.0?Web 2.0 = Accessibility 2.0?
Web 2.0 = Accessibility 2.0?
 
Web Accessibility Evaluation with WAVE
Web Accessibility Evaluation with WAVEWeb Accessibility Evaluation with WAVE
Web Accessibility Evaluation with WAVE
 
Twitter Accessibility
Twitter AccessibilityTwitter Accessibility
Twitter Accessibility
 
Web Accessibility Gone Wild
Web Accessibility Gone WildWeb Accessibility Gone Wild
Web Accessibility Gone Wild
 

Dernier

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Dernier (20)

2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 

ARIA Gone Wild