Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪ TPR 4 October 6, 2008

What is the JavaScript Void? The inability of a user to access web content or features due to system incompatibilities, such as the lck of JavaScript. <a href= “javascript:void('')” onclick= “window.open('popup.html', 'height=500, width=300);”>more information</a>

Accessible Content: Not Just For Blind Users Anymore The web is becoming increasingly ubiquiteous: Mobile Devices “Smart” Devices Implications Smaller Screens Lack of Graphics Support Lack of Scripting Support

Accessible Content: Not Just For Blind Users Anymore The web is being used by more less-experienced users: Grandparents Disabled Persons Lower Socioeconomic Status

Accessible Content: Not Just For Blind Users Anymore This means: Less computer savvy Older, slower systems Possible assistive technologies Lower speed connections Less likely to do timely upgrades

Accessible Content: Not Just For Blind Users Anymore Some people just choose to be different: JavaScript off Cookies off Styles off Using older or non-standard browsers

We’d Like to Accommodate Everyone…But We Have a Deadline Know your audience Code like it’s 1999 Use progressive enhancement on the client side Level the playing field with JavaScript libraries Use WAI-ARIA to make it accessible

Code Like It’s 1999 As much as possible, return plain old (X)HTML from server generated scripts Follow current standards to ensure consistancy and forward compapatibility Make sure all basic functionality exists, even if it ain’t pretty

Use Progressive Enhancement There’s nothing wrong with bells and whistles when they provide a benefit and don’t confuse or hinder the user Use JavaScript to alter the page and add the features

Progressive Enhancement Examples Forms and disabled fields: all fields should be enabled by default and disabled with JavaScript Calendar widgets: attach to date fields after the page loads Popup windows: devise a method of navigating to a new page and back

Level the Playing Field JavaScript libraries, such as YUI and jQuery: Eliminate many browser irregularities Add support for “missing” events such as “onDocumentReady” Make it easy to work with AJAX and other advanced features Offer clean, consistent sets of widgets

Progressive Enhancement 101 $(document).ready(function () { $(“.datefield”).insertAfter(‘<input type=“button” class=“calpopup”>’); })

Use WAI-ARIA ARIA attempts to solve the two biggest issues regarding web accessibility: Runtime changes to content can’t be “seen” by assistive technologies Users of don’t understand the intended meaning of objects on the page

About ARIA Accessible Rich Internet Applications suite Part of the W3C Web Accessibility Initiative (WAI) A set of specifications for browser manufactures and web developers to follow to ensure the accessibility of web applications

ARIA Roles and States Operating systems generally define a set of “atomic widgets” that are used in GUIs Fields, labels, tabs, windows, etc. ATs understand these widgets and interpret them for the user The set of widgets available in HTML is much smaller, so we fake them with markup, JavaScript, and CSS

Example: Tabs Typical tab list markup on a web page: <ul class=“tablist”> <li class=“selected”><a href=“#tab1”> Tab 1</a></li> <li><a href=“#tab2”>Tab 2</a></li> …

Example: Tabs What we see:

Example: Tabs What the screen reader sees: Tab 1 Tab 2 Tab 3

ARIA Roles Attempt to tell the browser the indended function of a piece of markup The browser should then pass that to the AT Implemented using the “role” attribute <a role=“checkbox”>…</a>

Recognized Roles Role, Input, Textbox, Select, Range, Section, Sectionhead, Window Link, Combobox, Option, Checkbox, Checkboxtristate, Radio, Radiogroup, Menuitemradio, Menuitemcheckbox, Progressbar, Secret, Slider, Spinbutton, Separator, Textarea, Textfield, Tree, Treegroup, Treeitem, Status, Alert, Alertdialog, Dialog Presentation, Appliction, Document, Group, Imagegroup, Directory, Region, Liveregion, Log, Grid, Gridcell, Tabcontainer, Tab, Tabpanel, Tablist, Table, TH, TD, Rowheader, Columnheader, List, Listitem, Menu, Toolbar, Menubar, Menuitem, Breadcrumbs

ARIA States States define the current status of an element A checkbox can be “checked” or “unchecked” A tab can be “selected” States are implemented using aria-* attributes <span role=“checkbox” aria-checked=“true”>

ARIA States Available states vary by role A few common ones: Checked (true|false|mixed) Disbaled (true|false) Selected (true|false) Expanded (true|false) Valuenow, Valuemax, Valuemin Invalid (true|false) current value is invalid

Live Regions Most ATs are unable to see that a page element has changed if that element doesn’t have the focus This poses a problem for most AJAX-type RIAs ARIA Live Regions are designed to fix this

Live Regions Live Regions are defined as sections of a page that are likely to change Text in live regions can be spoken without giving the region focus Live regions are denoted by the aria-live property being set to one of the recognized politeness settings <div aria-live=“polite”>…</div>

Politeness Polite - if content is currently being spoken, wait until done before alerting of change (default) Assertive – new content has a higher priority than “polite” but still doesn’t necessarilly interrupt the current content Rude – the new content has a very high priority and the user should be notified of it immeadiately

ARIA Downsides Still in draft state and still evolving Not yet widely supported ARIA properties are not part of (X)HTML specs and therefore do not validate

ARIA Is Not Enough ARIA is designed as a notification tool only It does not help users interact with custom widgets, navigate the page, etc. It is still necessary to include proper event handlers on ARIA-enabled elements, including keyboard navigation

ARIA and AAA As you research ARIA you may come across examples that use the aaa: namespace Namespaces aren’t supported in HTML Namespaces are only supported in XHTML when the application/xhtml+xml MIME type is used IE doesn’t recognize application/xhtml+xml So the namespace was dropped in favor of the prefix aria- prefix instead.

ARIA Demos FireVox Tutorials http://firevox.clcworld.net/tutorial/tut4.html Mozilla Developer Center Examples http://developer.mozilla.org/en/Accessible_DHTML

ARIA Links Intro: http://www.w3.org/WAI/intro/aria Overview: http://www.w3.org/TR/wai-aria/ Roles Working Draft: http://www.w3.org/TR/2006/WD-aria-role-20060926/ States and Properties Working Draft: http://www.w3.org/TR/2006/WD-aria-state-20060926/

Toolkits YUI Supports ARIA (with a bit of work), YUIBlog articles frequently show how: http://developer.yahoo.com/yui http://yuiblog.com Fluid Project – a new, open source, initiative built on top of JQuery http://www.fluidproject.org

Screen Readers, Etc. NVDA – Open Source Screen Reader http://www.nvda-project.org/ AccessFirefox – Accessibility Extensions Overview Site (includes FireVox) http://www.accessfirefox.org/

MobileOK W3C Initiative for Designing for Mobile Devices Working Draft: http://www.w3.org/TR/mobileOK/ Basic Tests: http://www.w3.org/TR/mobileOK-basic10-tests/ Validator: http://validator.w3.org/mobile/

I Am Accessible Jason R. Pitoniak Web Services Senior Programmer/Analyst Information Technology Services Rochester Institute of Technology (585) 475-4186 ▪ jrpisd@rit.edu