Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5's ARIA and a Web-Accessible Dropdown Widget

3,590 views

Published on

by @dennisl at HTML5 Developer Conference in San Francisco, October 16, 2012.

Published in: Technology, Design
  • My open letter to Slideshare: http://www.webaxe.org/open-letter-to-slideshare/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Google Drive version here: http://bit.ly/V50Ciz
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sample code is here: http://bit.ly/Xbmiwt
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5's ARIA and a Web-Accessible Dropdown Widget

  1. 1. HTML5'S ARIA AND A WEB- ACCESSIBLE DROPDOWN WIDGET by Dennis E. Lembrée HTML5 Developer Conference Palace Hotel, San Francisco October 15-16, 2012
  2. 2. Confidential and Proprietary 2 AGENDA • About @DennisL • About accessibility • ARIA & HTML5 • Simple example • Complex example • Tips • Questions • Contact info
  3. 3. Confidential and Proprietary 4 ABOUT ACCESSIBILITY Support a variety of users and a variety of environments • Visual, audio, motor, cognitive disability • Situational disability • Main language of website is non-native for user • Broken equipment (mouse or speakers don’t work) • Temporary disability (hand in cast, forgot glasses) • Environment (sunlight on screen; in library with no headphones) • Low-band connection (may have images off) • Large fingers (need large hit area)
  4. 4. Confidential and Proprietary 7 ABOUT ACCESSIBILITY Methods for implementation include multiple disciplines: • Code • Interaction design • Visual design • Content, writing • Testing • During development • QA testing (manual and automated) • User testing (including users with disabilities)
  5. 5. Confidential and Proprietary 10 ARIA & HTML5 • W3C WAI-ARIA • Accessible Rich Internet Applications (WAI-ARIA) 1.0 • W3C Candidate Recommendation, January 2011 • “attributes that define user interface elements to improve the accessibility and interoperability of web content and applications” • Basically, ARIA helps users of screen readers and other AT with modern web technologies. • Types of attributes: • Roles • States and Properties
  6. 6. Confidential and Proprietary 11 ARIA & HTML5 Roles • Widget roles: button, dialogue, menu, radio, tab • Document structure: list, presentation, row, separator • Landmark roles States and Properties • Widget attributes: aria-checked, aria-expanded, aria-haspopup, aria-label, aria-readonly, aria-required • Live regions: aria-atomic, aria-busy, aria-live • Relationship attributes: aria-controls, aria-describedby, aria-labelledby, aria-owns
  7. 7. Confidential and Proprietary 13 SIMPLE EXAMPLE Landmark Roles • banner (page header) • navigation (nav) • main (div, for now, or possibly section) • complementary (aside) • search (div, form) • contentinfo (page footer) • form, application (use with caution)
  8. 8. Confidential and Proprietary 15 COMPLEX EXAMPLE Goals • Make dropdown button • Use progressive enhancement (PE) • Follow keyboard conventions • Accessible; specifically, with keyboard and screen reader Steps • HTML • CSS • JavaScript • ARIA Demo URL: http://bit.ly/Xbmiwt
  9. 9. Confidential and Proprietary 16 COMPLEX EXAMPLE – HTML <div> <a>Share Options</a> <div> <div> <ul> <li><a href="http://www.facebook.com">Facebook</a></li> <li><a href="http://www.twitter.com">Twitter</a></li> <li><a href="http://www.linkedin.com">LinkedIn</a></li> <li><a href="mailto:dlembree@paypal.com">Email</a></li> </ul> </div> </div> </div>
  10. 10. Confidential and Proprietary 17 COMPLEX EXAMPLE – HTML <div class="dropdownMenu"> <a href="#ddMenuList1" id="ddMenu1" class="menuButton">Share Options</a> <div aria-labelledby="ddMenu1"> <div id="ddMenuList1"> <ul> <li><a href="http://www.facebook.com">Facebook</a></li> <li><a href="http://www.twitter.com">Twitter</a></li> <li><a href="http://www.linkedin.com">LinkedIn</a></li> <li><a href="mailto:dlembree@paypal.com">Email</a></li> </ul> </div> </div> </div>
  11. 11. Confidential and Proprietary 18 COMPLEX EXAMPLE – CSS (PARTIAL) .js .dropdownMenu { position: relative; display: inline-block; } .js .dropdownMenu a.menuButton { overflow: hidden; display: inline-block; width: 15px; height: 15px; margin-left: 4px; z-index: 5; top: 2px; text-indent:-999px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } ...
  12. 12. Confidential and Proprietary 19 COMPLEX EXAMPLE – JAVASCRIPT (PARTIAL) (function() { "use strict"; $.widget("widget.dropdownMenu", { options: { showOn: "click" }, _create: function() { this._getElements(); this._updateElements(); this._addListeners(); }, _getElements: function() { this.elements = {}; // the menu container (div role=menu) this.elements.container = this.element.find("div:first"); }, _addListeners: function() { ...
  13. 13. Confidential and Proprietary 22 COMPLEX EXAMPLE – DEMO screen reader demo
  14. 14. Confidential and Proprietary 25 QUESTIONS
  15. 15. Confidential and Proprietary 26 CONTACT INFO • Email: dlembree@paypal.com • Web: DennisLembree.com • Twitter Accounts • @DennisL • @WebAxe • @EasyChirp • @PayPalInclusive • Demo URL: http://bit.ly/Xbmiwt

×