avoiding the javascript:void(‘’): building web apps that work anywhere and everywhere jason...
TRANSCRIPT
![Page 1: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/1.jpg)
Avoiding the JavaScript:Void(‘’):Building Web Apps That Work Anywhere and Everywhere
Jason PitoniakRochester Institute of TechnologyHighEdWeb 2008 ▪ TPR 4October 6, 2008
![Page 2: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/2.jpg)
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>
![Page 3: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/3.jpg)
Accessible Content:Not Just For Blind Users Anymore The web is becoming increasingly
ubiquiteous:Mobile Devices“Smart” Devices
ImplicationsSmaller ScreensLack of Graphics SupportLack of Scripting Support
![Page 4: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/4.jpg)
Accessible Content:Not Just For Blind Users Anymore The web is being used by more less-
experienced users:GrandparentsDisabled PersonsLower Socioeconomic Status
![Page 5: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/5.jpg)
Accessible Content:Not Just For Blind Users Anymore This means:
Less computer savvyOlder, slower systemsPossible assistive technologiesLower speed connections Less likely to do timely upgrades
![Page 6: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/6.jpg)
Accessible Content:Not Just For Blind Users Anymore Some people just choose to be different:
JavaScript offCookies offStyles offUsing older or non-standard browsers
![Page 7: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/7.jpg)
We’d Like to AccommodateEveryone…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
![Page 8: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/8.jpg)
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
![Page 9: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/9.jpg)
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
![Page 10: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/10.jpg)
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
![Page 11: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/11.jpg)
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
![Page 12: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/12.jpg)
Progressive Enhancement 101
$(document).ready(function () {
$(“.datefield”).insertAfter(‘<input type=“button” class=“calpopup”>’);
})
![Page 13: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/13.jpg)
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
![Page 14: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/14.jpg)
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
![Page 15: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/15.jpg)
ARIA Roles and States
Operating systems generally define a set of “atomic widgets” that are used in GUIsFields, 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
![Page 16: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/16.jpg)
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>
…
![Page 17: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/17.jpg)
Example: Tabs
What we see:
![Page 18: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/18.jpg)
Example: Tabs
What the screen reader sees:• Tab 1• Tab 2• Tab 3
![Page 19: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/19.jpg)
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>
![Page 20: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/20.jpg)
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
![Page 21: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/21.jpg)
ARIA States
States define the current status of an elementA checkbox can be “checked” or “unchecked”A tab can be “selected”
States are implemented using aria-* attributes<span role=“checkbox” aria-checked=“true”>
![Page 22: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/22.jpg)
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
![Page 23: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/23.jpg)
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
![Page 24: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/24.jpg)
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>
![Page 25: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/25.jpg)
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
![Page 26: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/26.jpg)
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
![Page 27: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/27.jpg)
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
![Page 28: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/28.jpg)
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.
![Page 29: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/29.jpg)
ARIA Demos
FireVox Tutorialshttp://firevox.clcworld.net/tutorial/tut4.html
Mozilla Developer Center Exampleshttp://developer.mozilla.org/en/Accessible_DHTML
![Page 30: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/30.jpg)
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/
![Page 31: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/31.jpg)
Toolkits
YUI Supports ARIA (with a bit of work), YUIBlog articles frequently show how:http://developer.yahoo.com/yuihttp://yuiblog.com
Fluid Project – a new, open source, initiative built on top of JQueryhttp://www.fluidproject.org
![Page 32: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/32.jpg)
Screen Readers, Etc.
NVDA – Open Source Screen Readerhttp://www.nvda-project.org/
AccessFirefox – Accessibility Extensions Overview Site (includes FireVox)http://www.accessfirefox.org/
![Page 33: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/33.jpg)
MobileOK
W3C Initiative for Designing for Mobile DevicesWorking Draft:
http://www.w3.org/TR/mobileOK/Basic Tests:
http://www.w3.org/TR/mobileOK-basic10-tests/
Validator: http://validator.w3.org/mobile/
![Page 34: Avoiding the JavaScript:Void(‘’): Building Web Apps That Work Anywhere and Everywhere Jason Pitoniak Rochester Institute of Technology HighEdWeb 2008 ▪](https://reader036.vdocuments.net/reader036/viewer/2022070400/56649f0d5503460f94c21d57/html5/thumbnails/34.jpg)
I Am Accessible
Jason R. Pitoniak
Web Services Senior Programmer/Analyst
Information Technology Services
Rochester Institute of Technology
(585) 475-4186 ▪ [email protected]