everett zufelt - @ezufelt tech lead / accessibility lead @myplanetdigital accessibility of custom...
TRANSCRIPT
![Page 1: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/1.jpg)
![Page 2: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/2.jpg)
Everett Zufelt - @ezufeltTech Lead / Accessibility Lead @MyplanetDigital
Accessibility of Custom User Interface Components Using WAI-ARIA
![Page 3: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/3.jpg)
Why a <div> is not a button, and a <span> is not a slider!
![Page 4: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/4.jpg)
What Is The Problem ?
• How assistive technology interacts with the web
• Difference between markup, DOM, and accessibility API renderings
• How screen-readers interact with the accessibility API
![Page 5: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/5.jpg)
Introduction• What is a user interface component? • What components are available in
common markup languages?• What common components are not
available?• How can libraries like jQuery UI help?
![Page 6: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/6.jpg)
What is WAI-ARIA?• Ontology of roles, states, and properties• Can be used with markup languages like
xhtml and html5• Validates as html5• Adds semantics to the markup / DOM that
are mapped to the accessibility API
![Page 7: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/7.jpg)
Regions, Including Live Regions• Regions are roles meant to be navigational
aids• Live regions indicate that content may
change• Screen-readers can monitor live regions
and announce updates• Used in Drupal 7 progress bar and
password strength indicator
![Page 8: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/8.jpg)
B. C.A.
Affordances / When A Link Is A Button• Often anchors are styled as buttons• <a class=“my-button-class”
herf=“/some/path/action”>Do it!</a>• Screen-readers read: “Link, Do it!”
![Page 9: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/9.jpg)
• A visual affordance uses visual means to inform the user of the role (purpose), or state of a user interface component
• Adding the appropriate semantics to the component, we can achieve an equivalent result
B. C.A.
![Page 10: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/10.jpg)
• <a role=“button” class=“my-button-style” href=“/some/path/action”>Do it!</a>
• Screen-readers read: “Do it! button”
C.A. B.
![Page 11: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/11.jpg)
Application Mode• What is a virtual buffer and which screen-readers
use it?• How does using the role=“application” or
role=“dialog” change how a screen-reader user interacts with the page?
• Application/dialog roles should only be used when user interface or component is “applicationy”, as it diverges from stander user interaction pattern.
![Page 12: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/12.jpg)
Why is Overlay Not A “Dialogue” ?• The community tried, hard, really hard• WAI-ARIA is a contract between assistive
technology, user agents, and web authors• WAI-ARIA 1.0 is a candidate recommendation,
but still has bugs• Some example bugs
![Page 13: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/13.jpg)
ResourcesARIA - Mozilla Developer Network:https://developer.mozilla.org/en/ARIA
WebAIM Blog - The Ghosts of ARIA Present and Future:http://webaim.org/blog/the-ghosts-of-aria-present-and-future/
Rich Internet App Accessibility:http://www.deque.com/rich-internet-app-accessibility
Bruce Lawson - Ah, that's better. "Content authors MUST NOT use abstract roles because they are not implemented in the API binding”:http://t.co/XxufLdZb
Non-Normative Implementers Guide:http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html
Free Aria:[email protected]
Browser Bugs & Implications:http://www.paciellogroup.com/blog/2012/07/visualising-browser-accessibility-bugs/
![Page 14: Everett Zufelt - @ezufelt Tech Lead / Accessibility Lead @MyplanetDigital Accessibility of Custom User Interface Components Using WAI-ARIA](https://reader035.vdocument.in/reader035/viewer/2022062620/551ab38a5503466b3a8b621a/html5/thumbnails/14.jpg)
What did you think?
• Locate this session on the DrupalCon Munich website, and click “Evaluate This Session”. Thank you!
• http://munich2012.drupal.org/program/sessions/accessibility-custom-user-interface-components-using-wai-aria