Accessible Web 2.0 Accessible Web 2.0 ApplicationsApplications

PRESENTED BY:Arne Louison, Web Developer, Governor’s Office of Employee

RelationsJeff Bennett, Programmer & Usability Tester, Office of the Chief

Information Officer / Office for TechnologyMike J. Hritcko, Web Developer, NYS Insurance Fund

For the NYS FORUM IT ACCESSIBILITY COMMITTEE

IntroductionsIntroductionsArne Louison

Governor’s Office of Employee Relations

Mike HritckoState Insurance Fund

Jeff BennettOffice of the Chief Information Officer / Office for Technology

Today’s AgendaToday’s Agenda

Web 2.0Web AccessibilityAJAXARIA

What is “Web 2.0”?What is “Web 2.0”?

Describes the trend in the use of web technology and design to enhance creativity, information sharing, and most notably collaboration among users through the use of interactive components.

Examples of Web 2.0Examples of Web 2.0Social networking service – an

online community of people that have similar interests or participate in similar activities. The interaction between these users takes place through the use of online chat, online messaging, video, voice chat or discussion groups…the list goes on.

Examples of Web 2.0Examples of Web 2.0Wiki – a collaborative web site

whose content can be edited by anyone who has access to it.

Examples of Web 2.0Examples of Web 2.0Portal – a web site that functions

as a collection/entry point for various resources on the site or through external forces (e.g., RSS feeds), and users expect current info at all times.

Examples of Web 2.0Examples of Web 2.0Blog – a web page or site usually

maintained by a single person with regular entries of commentary, descriptions of some events or other material. An example would be John Doe posting a few paragraphs on his web site about his ski trip to Aspen.*** (Some blogs permit comments by visitors)

Web 2.0 does not pertain to updates or changes to technical specifications for web languages; refers to changes in the way developers code and visitors user the web.

Web 2.0 is not a recommendation by the W3C.

Technologies involved in making Web 2.0 web sites such as JavaScript, CSS and HTML are not new, they have been around for a long time.

Screen Reader Screen Reader DemonstrationDemonstrationJeff Bennett, CIO/OFT.Inaccessible form example.Accessible form example.Inaccessible RSS FeedAccessible RSS FeedDiscussion on how the screen

reader transforms the page to the user.

What’s the difference?What’s the difference?With proper semantic markup:

◦Screen reader renders form properly◦User knows what info to provide on

first try because programmer/developer properly codes input element

By providing adequate user support and instructions, server traffic is reduced.

Web AccessibilityWeb AccessibilityWhat makes it so difficult to make

a data driven, visually engaging page, portal, or even dashboard?Dashboard is an application, like a Portal, that provides one central location to get current, real time data. In other words, a “Dashboard” is a presentational format, a visual form of the Portal concept.

The evils of buzzwords.Web 2.0 leans toward the latest

and least proven technologies.

PortalsPortalsA web site or web page that functions as a

gateway for various resources.Yahoo’s home page would be a good example

of a Portal, which is also customizable by any user as “My Yahoo”

Usually includes a few “widgets” on a web page that link to or access other resources. These resources can be internal or external.

A widget is defined as a chunk of reusable code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation.

Portals (cont’d)Portals (cont’d)Some products that provide access to APIs to

easily build these pages through a WYSIWYG editor.

Can be made out of a single web page using server side includes:ColdFusion: <cfinclude template=“weather.html”>PHP: <?php include ‘weather.html’ ?>ASP: <!--#include file =“weather.html"-->

Example of a “Portal” using server-side includes

Is this Portal Accessible?Is this Portal Accessible?Assume that all the pages were

validated using the NYS Validation Tool.

Assume they are compliant with the NYS Standards.

So having this knowledge, would this example be accessible?

Let’s discuss what makes a page accessible.

Certain things are required to make sure that a page is accessible.

Proper semantic markup.Tabindex attributes where

appropriate.

So having this knowledge, is this web page, or “Portal” accessible?

Without looking at the code there really is no way to tell.

I’ll answer the question for you, Sort of….

Okay, why?The page uses no other HTML markup other

than DIV tags.This does not allow for proper semantic

markup…….HUH?????By using <h1>, <h2> and other semantic

tags, the screen reader has some frame of reference of what you are trying to accomplish.

Example: 1 Home Page9 Pages brought in by server side includes.

Example of a Portal shell

What I am trying to show here is that a page using only DIVs could be made to be accessible if you properly code the page.

How is this done?<div id=“1”>Widget 1</div>

<div id=“2”>Widget 2</div>

<div id=“3”>Widget 3</div>

<div id=“4”>Widget 4</div>

<div id=“5”>Widget 5</div>

<div id=“6”>Widget 6</div>

<div id=“7”>Widget 7</div>

<div id=“8”>Widget 8</div>

<div id=“9”>Widget 9</div>

Order is goodOrder is goodBy putting the DIVs in order of how

you would like them to be presented, this page could be made to be accessible, and a screen reader would have no issue rendering the page properly.

Why is this?Why is this?When a browser receives a web page

back from the server, the screen reader will cache the page.

The screen reader interacts with the cached page, not with the page in the browser window.

If content changes in browser window without reloading page, screen reader won’t know about it.

Why not use tabindex Why not use tabindex attribute?attribute?The reason is that as soon as you

add a tabindex attribute to a non-sanctioned form element, the page instantly becomes inaccessible.

Form elements, anchors and objects are the only elements within the HTML 4.01 specification that can have a tabindex attribute.

The page will not pass any validation, NYS or otherwise.

Did we just see Web 2.0?Did we just see Web 2.0?

Nope.

This is just a workaround to get our feet wet.

Key concepts of Web 2.0Key concepts of Web 2.0User interacts with page and

makes requests.

Key concepts for Web 2.0Key concepts for Web 2.0Browser allows JavaScript to

make changes to page content – without server reloading page.

Will screen reader user be able to effectively interact with page?

Why JavaScript?Why JavaScript?

Why not some other language?

Simply put, JavaScript is client-side scripting - meaning that the processing and changes are done on the client’s PC, within the browser session.

Why JavaScript?Why JavaScript?

Other scripting languages, such as ASP, PHP, ColdFusion, etc. are considered server-side and a request has to be sent to the server for a change or response.

Server-Side ScriptingServer-Side ScriptingA request has to be made to the server

for a response, which in turn will refresh the page.

Causes the page to be refreshed every time a new request is made because the page is returned from the server.

This can cause excess server traffic.Not very efficient in high traffic sites

and can dramatically effect the server’s performance.

Client-Side ScriptingClient-Side ScriptingOnce the page is rendered in the

browser, the only requests that are sent to server, are from a “widget” on the page.

Done by accessing the Document Object Model (DOM).

Only refreshes the information in the calling widget.

The DOMThe DOMLanguage and platform independent.

Represents both HTML and XML.Suited for applications that need to access a document out of sequence.

Required by JavaScript to modify a web page dynamically.

The DOMThe DOMTree structure.Parent-child relationships.Create elements

◦ document.createElement(“value")

Navigate elements◦ getElementsByID()◦ getElementsByName()◦ getElementsByTagName()◦ getElementsByClassName()

With all this technology, where is the With all this technology, where is the problem?problem?

We talked about how the screen reader caches the page when the browser first receives it.

In current technology model, no way for the screen reader user to know anything has been updated or changed on the page.

This is a HUGE problem for screen reader users, who find:

- dead links- broken forms- wrong info – that appears right

AJAXAJAX(Asynchronous JavaScript and XML)(Asynchronous JavaScript and XML)Allows cool effects, such as:Adding form elements on the fly.Auto-Suggest features.Updatable Grids that mimic

Spreadsheet applications.Uses current technologies such

as HTML, JavaScript and CSS.XMLHTTPRequest() method

ARIAARIA(Accessible Rich Internet Application)(Accessible Rich Internet Application)Not a W3C recommendation yet, it

is a working draft.Goal: making AJAX-like applications

accessible.Uses the Accessibility APIs of OS

platforms to interact with Assistive Technologies.

Accomplished using Roles, Properties, States, focus(), and good use of tab indexes.

Tabindexes??Tabindexes??Tabindex attribute has limited

use in the current standard.(A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA)

ARIA may expand usage and utility of the tabindex attribute.

Confused yet?Confused yet?

ARIA is in its infancy and is not a recommendation yet.

Browsers and Assistive Technology can’t fully implement until it is a recommendation.

Insight into ARIAInsight into ARIA

But I would like to give you a little insight into what they are trying to accomplish with ARIA before we part ways today.

ARIA - RolesARIA - RolesRoles – used to define a widget

and what a widget will do.

ARIA - Properties and ARIA - Properties and StatesStatesProperties and StatesExamples:

- aria-checked- aria-labelledby- aria-describedby- aria-haspopup- aria-expanded

focus()focus()focus() - method to move

keyboard focus to a DOM node using JavaScript.

tabindextabindexUsed for identifying elements

that can receive keyboard focus.

Notice a trend?Notice a trend?Keyboard focus and keyboard

navigation.

NamespacesNamespacesMake it possible for older

browsers to make some use of ARIA markup.

xmlns:wairole=“http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#”

xmlns:aaa=“http://www.w3.org/2005/07/aaa”

Checkboxes in ARIACheckboxes in ARIA<ul class="checkboxes">

<li tabindex="0" role="wairole:checkbox" aaa:checked="false“ onclick="handleClickCheckbox(event)" onkeydown="handleKeyDownCheckbox(event)">

Widget Checkbox 1

</li>

<li tabindex="0" role="wairole:checkbox" aaa:checked="true" onclick="handleClickCheckbox(event)" onkeydown="handleKeyDownCheckbox(event)">

Widget Checkbox 2

</li>

<li tabindex="0" role="wairole:checkbox" aaa:checked="false" onclick="handleClickCheckbox(event)" onkeydown="handleKeyDownCheckbox(event)">

Widget Checkbox 3

</li>

</ul>

Research Research Research Research ResearchResearchResources:Accessibility Committee

◦http://www.nysforum.org/accessibility/resources/

Resources from this presentation◦http://www.nysforum.org/accessibilit

y/resources/curriculum/scripting/index.html