accessible web 2.0 applications
DESCRIPTION
Accessible Web 2.0 Applications. PRESENTED BY: Arne Louison , Web Developer, Governor’s Office of Employee Relations Jeff Bennett, Programmer & Usability Tester, Office of the Chief Information Officer / Office for Technology Mike J. Hritcko , Web Developer, NYS Insurance Fund - PowerPoint PPT PresentationTRANSCRIPT
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