Accessible Web Apps: New Standards & Technology

Accessible Web Apps: New Standards & TechnologyAccessible Modal Windows

http://go.ncsu.edu/a11y-modal

Greg KrausNC State UniversityWhy do we need ARIA?Accessibility on the Desktoppush buttonname is "Cancel"focusabledefault actionunpressedApplicationOperating SystemAccessibility on the Webpush buttonname is "Cancel"focusabledefault actionunpressedApplication(Browser)Operating SystemWeb PageThe Browser Translates The Object into Something the Operating System Understands

Lorem ipsum dolor sit amet, consectetur adipiscing elit.CheckboxRadio ButtonButtonImageTextText InputDrop Down ListARIA Fills in the Gaps for Items Lost in TranslationPhoto Credits:http://www.flickr.com/photos/joriel/2360038974/http://www.flickr.com/photos/jekemp/5428792/

What is ARIA?Roles, States, and PropertiesRoles = defining what an object isWidgetsDocument StructureLandmarkAttributes = describing an objectStatesProperties

http://www.w3.org/TR/wai-aria/states_and_propertiesPutting our toes in the waterFirst Name

*

aria-requiredFirst Name

*

ARIA Gone WildWhat you can do, but shouldn't do...and don't let anyone catch you doing itA Simple Checkbox

Sign me up!

The Starting PointSign me up!Introducing the "role"Sign me up!

AT-AT = All Terrain Armored Transport,first introduced in The Empire Strikes BackPhoto credit:http://www.flickr.com/photos/invokemedia/6277401581/

Adding the checkboxSign me up!Responding to clicksSign me up!Make it so you can tab to itSign me up!Make it so you can use the keyboard to activate itSign me up!Make it so screen readers can know its current stateSign me up!...and all of this codefunction 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

Sign me up!

Don't be tempted to do this

Sign me up!

Superfluous Labelling is Not NeededStep 1: Basic Page Structure

......

Step 2: Adding role="dialog"

......

Step 3: Adding the Overlay

......

Step 3: Adding the Description and Heading

Beginning of dialog window. It begins with a heading 1 called "Registration Form&quot.Registration Form

Step 4: Trapping the focusjQuery('#modalWindow').keydown(function(event){ trapTabKey($(this),event);})

function trapTabKey(obj,evt) {if tab pressedcycle through the tabbable elements, looping from first to last, or last to first when neededelsedo nothing}

Step 4: Setting and restoring the focusvar focusedElementBeforeModal;

function showModal() { ...focusedElementBeforeModal = jQuery(':focus');}

function hideModal() { ...focusedElementBeforeModal.focus();}

Step 5: Adding aria-hidden

...

...

Step 6: Trapping the escape keyjQuery('#modalWindow').keydown(function(event){trapEscapeKey($(this),event);})

function trapEscapeKey(obj,evt){if escape key is pressed$('#cancelButton').click();elsedo 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();elsedo nothing}FAILStep 6: Trapping the enter key jQuery('#modalInputForm').keydown(function(event){trapEnterKey($(this),event);})

function trapEnterKey(obj,evt){if enter key is pressed$('#enter').click();elsedo nothing}

Step 7: Adding the shims...

if(usingWebKit()){focus on the modal window itself} else {focus on the first object}

aria-required +1