The document discusses making dropdown menus accessible. It begins with an introduction of the speaker and an overview of accessibility and why it's important. It then discusses ARIA and its role in improving accessibility of modern web technologies. The document provides a simple example of using landmark roles and a more complex example of building an accessible dropdown menu with HTML, CSS, JavaScript, and ARIA attributes. It concludes with a demonstration of the dropdown menu working with a screen reader and contact information.

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

4. 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)

7. 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)

10. 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

11. 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

13. 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)

15. 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

16. 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>

17. 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>

18. 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;
}
...

19. 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() {
...

22. Confidential and Proprietary 22
COMPLEX EXAMPLE – DEMO
screen reader demo

25. Confidential and Proprietary 25
QUESTIONS

26. 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