Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML5's ARIA and a Web-Accessible Dropdown Widget

3.697 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Design
  • My open letter to Slideshare: http://www.webaxe.org/open-letter-to-slideshare/
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Google Drive version here: http://bit.ly/V50Ciz
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Sample code is here: http://bit.ly/Xbmiwt
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×