Accessible Web Apps: New Standards & Technology

Accessible Web Apps: New Standards & Technology Accessible Modal Windows http://go.ncsu.edu/a11y-modal Greg Kraus NC State University

Why do we need ARIA?

Accessibility on the Desktop push button name is "Cancel" focusable default action unpressed Application Operating System

Accessibility on the Web push button name is "Cancel" focusable default action unpressed Web Page Application (Browser) Operating System

The Browser Translates The Object into Something the Operating System Understands Image Drop Down List Checkbox Text Input Radio Button Text Button Loremipsum dolor sit amet, consecteturadipiscingelit.

ARIA Fills in the Gaps for Items Lost in Translation

What is ARIA? • Roles, States, and Properties • Roles = defining what an object is • Widgets • Document Structure • Landmark • Attributes = describing an object • States • Properties

Putting our toes in the water… <label for="first-name">First Name</label> <input id="first-name" name="first-name" type="text" /> <span class="required"> * </span>

aria-required <label for="first-name">First Name</label> <input id="first-name" name="first-name" type="text" aria-required="true" /> <span class="required"> * </span>

ARIA Gone Wild What you can do, but shouldn't do ...and don't let anyone catch you doing it

A Simple Checkbox <input id="signup" type="checkbox" /> <label for="signup">Sign me up!</label>

The Starting Point <div>Sign me up!</div>

Introducing the "role" <div role="checkbox">Sign me up!</div>

<dog role="at-at"></dog> AT-AT = All Terrain Armored Transport, first introduced in The Empire Strikes Back

Adding the checkbox <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;">Sign me up!</div>

Responding to clicks <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;" onclick="toggleCheckBox(this);">Sign me up!</div>

Make it so you can tab to it <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;" onclick="toggleCheckBox(this);" tabindex="0">Sign me up!</div>

Make it so you can use the keyboard to activate it <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;" onclick="toggleCheckBox(this);" tabindex="0" onKeyPress="trapSpaceKey(this,event);">Sign me up!</div>

Make it so screen readers can know its current state <div role="checkbox" style="background-image:url('checkbox-unchecked.gif'); background-repeat: no-repeat; padding-left:25px;padding-top:10px;" onclick="toggleCheckBox(this);" tabindex="0" onKeyPress="trapSpaceKey(this,event);" aria-checked="true">Sign me up!</div>

...and all of this code function trapSpaceKey(t,e){ if ( e.which == 32 ) { toggleCheckBox(t); } } function toggleCheckBox(t) { if($(t).attr("aria-checked")=="false") { $(t).css("background-image","url('checkbox-checked.gif')"); $(t).attr("aria-checked","true"); } else { $(t).css("background-image","url('checkbox-unchecked.gif')"); $(t).attr("aria-checked","false"); } $(t).focus(); }

When all you needed was this <input id="signup" type="checkbox" /> <label for="signup">Sign me up!</label>

Don't be tempted to do this <input id="signup" type="checkbox" role="checkbox" /> <label for="signup">Sign me up!</label>

Superfluous Labelling is Not Needed

Step 1: Basic Page Structure <body> <div id="mainContent">...</div> <div id="modalWindow">...</div> </body>

Step 2: Adding role="dialog" <body> <div id="mainContent">...</div> <div id="modalWindow" role="dialog">...</div> </body>

Step 3: Adding the Overlay <body> <div id="mainContent">...</div> <div id="modalWindow" role="dialog">...</div> <div id="modalOverlay" tabindex="-1"></div> </body>

Step 3: Adding the Description and Heading <div id="modalWindow" role="dialog" aria-labelledby="modalTitle modalDescription"> <div id="modalDescription" class="screen-reader-offscreen">Beginning of dialog window. It begins with a heading 1 called "Registration Form&quot.</div> <h1 id="modalTitle">Registration Form</h1> </div> <div id="modalOverlay" tabindex="-1"></div>

Step 4: Trapping the focus jQuery('#modalWindow').keydown(function(event){ trapTabKey($(this),event);}) function trapTabKey(obj,evt) { if tab pressed cycle through the tabbable elements, looping from first to last, or last to first when needed else do nothing }

Step 4: Setting and restoring the focus var focusedElementBeforeModal; function showModal() { ... focusedElementBeforeModal = jQuery(':focus'); …} function hideModal() { ... focusedElementBeforeModal.focus(); …}

Step 5: Adding aria-hidden <body> <div id="mainContent" aria-hidden="false">...</div> <div id="modalWindow" role="dialog" aria-labelledby="modalTitle modalDescription" aria-hidden="true">...</div> <div id="modalOverlay" tabindex="-1"></div> </body>

Step 6: Trapping the escape key jQuery('#modalWindow').keydown( function(event){trapEscapeKey($(this),event);}) function trapEscapeKey(obj,evt){ if escape key is pressed $('#cancelButton').click(); else do nothing }

Step 6: Trapping the enter key jQuery('#modalWindow').keydown( function(event){trapEnterKey($(this),event);}) function trapEnterKey(obj,evt){ if enter key is pressed $('#enter').click(); else do nothing } FAIL

Step 6: Trapping the enter key jQuery('#modalInputForm').keydown( function(event){trapEnterKey($(this),event);}) function trapEnterKey(obj,evt){ if enter key is pressed $('#enter').click(); else do nothing }

Step 7: Adding the shims <div id="modalWindow" role="dialog" aria-labelledby="modalTitle modalDescription" aria-hidden="true" tabindex="-1">...</div> if(usingWebKit()){ focus on the modal window itself } else { focus on the first object }

aria-required +1 <span class="required” aria-hidden=“true”> Required </span> <label for="first-name">First Name</label> <input id="first-name" name="first-name" type="text" aria-required="true" />

Resources ARIA Authoring Practices http://www.w3.org/WAI/PF/aria-practices/ ARIA Roles http://www.w3.org/TR/wai-aria/roles Web Accessibility Initiaitve http://www.w3.org/WAI/

Accessible Web Apps: New Standards & Technology