Accessible Web 2.0 Applications
description
Transcript of Accessible Web 2.0 Applications
![Page 1: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/1.jpg)
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
![Page 2: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/2.jpg)
IntroductionsIntroductionsArne Louison
Governor’s Office of Employee Relations
Mike HritckoState Insurance Fund
Jeff BennettOffice of the Chief Information Officer / Office for Technology
![Page 3: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/3.jpg)
Today’s AgendaToday’s Agenda
Web 2.0Web AccessibilityAJAXARIA
![Page 4: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/4.jpg)
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.
![Page 5: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/5.jpg)
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.
![Page 6: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/6.jpg)
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.
![Page 7: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/7.jpg)
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.
![Page 8: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/8.jpg)
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)
![Page 9: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/9.jpg)
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.
![Page 10: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/10.jpg)
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.
![Page 11: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/11.jpg)
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.
![Page 12: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/12.jpg)
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.
![Page 13: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/13.jpg)
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.
![Page 14: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/14.jpg)
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"-->
![Page 15: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/15.jpg)
Example of a “Portal” using server-side includes
![Page 16: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/16.jpg)
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.
![Page 17: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/17.jpg)
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.
![Page 18: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/18.jpg)
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.
![Page 19: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/19.jpg)
Example of a Portal shell
![Page 20: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/20.jpg)
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>
![Page 21: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/21.jpg)
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.
![Page 22: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/22.jpg)
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.
![Page 23: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/23.jpg)
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.
![Page 24: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/24.jpg)
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.
![Page 25: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/25.jpg)
Key concepts of Web 2.0Key concepts of Web 2.0User interacts with page and
makes requests.
![Page 26: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/26.jpg)
Key concepts for Web 2.0Key concepts for Web 2.0Browser allows JavaScript to
make changes to page content – without server reloading page.
![Page 27: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/27.jpg)
Will screen reader user be able to effectively interact with page?
![Page 28: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/28.jpg)
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.
![Page 29: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/29.jpg)
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.
![Page 30: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/30.jpg)
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.
![Page 31: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/31.jpg)
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.
![Page 32: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/32.jpg)
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.
![Page 33: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/33.jpg)
The DOMThe DOMTree structure.Parent-child relationships.Create elements
◦ document.createElement(“value")
Navigate elements◦ getElementsByID()◦ getElementsByName()◦ getElementsByTagName()◦ getElementsByClassName()
![Page 34: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/34.jpg)
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
![Page 35: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/35.jpg)
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
![Page 36: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/36.jpg)
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.
![Page 37: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/37.jpg)
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.
![Page 38: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/38.jpg)
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.
![Page 39: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/39.jpg)
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.
![Page 40: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/40.jpg)
ARIA - RolesARIA - RolesRoles – used to define a widget
and what a widget will do.
![Page 41: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/41.jpg)
ARIA - Properties and ARIA - Properties and StatesStatesProperties and StatesExamples:
- aria-checked- aria-labelledby- aria-describedby- aria-haspopup- aria-expanded
![Page 42: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/42.jpg)
focus()focus()focus() - method to move
keyboard focus to a DOM node using JavaScript.
![Page 43: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/43.jpg)
tabindextabindexUsed for identifying elements
that can receive keyboard focus.
![Page 44: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/44.jpg)
Notice a trend?Notice a trend?Keyboard focus and keyboard
navigation.
![Page 45: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/45.jpg)
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”
![Page 46: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/46.jpg)
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>
![Page 47: Accessible Web 2.0 Applications](https://reader035.fdocuments.in/reader035/viewer/2022062723/56813d6e550346895da74eb7/html5/thumbnails/47.jpg)
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