Your SlideShare is downloading. ×
HTML5's ARIA and a Web-Accessible Dropdown Widget
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5's ARIA and a Web-Accessible Dropdown Widget

2,364
views

Published on

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

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

Published in: Technology, Design

3 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,364
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
3
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • http://html5devconf.com/
  • http://www.dennislembree.com
  • http://www.html5accessibility.com/https://docs.google.com/presentation/d/1VCOM0TDZ3IxtDAc3GzR4Z58MhKIA9nAk4fA8f-7D058/present
  • http://www.w3.org/TR/html5/wai-aria.html#wai-ariahttp://dev.w3.org/html5/spec/wai-aria.html
  • http://www.w3.org/TR/wai-aria/
  • http://www.w3.org/TR/wai-aria/
  • Menu element is not supported yet in browsers not AT.Required supported inconsistently in AT.Landmark roles have good support.
  • http://www.flickr.com/photos/odmag/8034463748/
  • http://weboverhauls.com/sandbox/HTML5_DevConf_ARIA_Example/
  • http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-using-aria-notes/
  • Transcript

    • 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. Confidential and Proprietary 2 AGENDA • About @DennisL • About accessibility • ARIA & HTML5 • Simple example • Complex example • Tips • Questions • Contact info
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Confidential and Proprietary 22 COMPLEX EXAMPLE – DEMO screen reader demo
    • 14. Confidential and Proprietary 25 QUESTIONS
    • 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

    ×