Sakai Update and JAWS Tutorial

Sakai Update and JAWS
Tutorial

Mike Elledge, Accessibility Team Lead, Sakai Project

Gonzalo Silverio, User Interface Developer, Sakai Foundation

Topics

•
Chronology

•
Current Accessibility

•
What’s Next

•
JAWS Tutorial
—
Have you installed JAWS?

Accessibility Chronology

•
Version 1.5 to Version 2.01

•
Version 2.01 to Version 2.1

•
Version 2.1 to Version 2.2

•
Version 2.2 to Version 2.3

•
Version 2.3 to Version 2.4 (Proposed)

Version 1.5 to Version 2.01

•
Replaced automatic refresh/refocus with manual refresh.

•
Added skip links and accesskeys to content, tools, and worksites.

•
Added accesskeys to tools (0 to 9) and help.

•
Refactored legacy tools to reflect style guide accessibility
requirements: Headings, titles (iFrames, Links), tables, forms.

Version 2.01 to Version 2.1

•
Added link to accessibility page (Global; implemented by individual
school).

•
Added accessibility information to help.

•
Screen reader and device independence changes:

–
Improved linearization of information, semantic markup, labeling

–
Enhanced title tags, function titles, link phrases

–
Tabular information arranged semantically

–
Added alt tags, screen
-
reader
-
only text and labels

–
Removed redundancies

–
Added onkeypress added to event handlers (for users that cannot use a
mouse)

–
Converted 4.01 HTML to 1.0 XHTML transitional

Version 2.1 to Version 2.2

•
Added accesskeys to common functions (Save, Cancel, Options,
Permissions, Edit, Delete).

•
Enhanced title tags to include tool names for Options, Permissions,
Edit, etc. top bar tool functions.

•
Extended heading tags to include: form labels, table subjects.

•
Added of "onkeydown" to JSF event handlers (i.e., to provide
"onclick" alternative for screen reader users).

•
Added caption tag to data tables.


Version 2.2 to Version 2.3

•
Eliminated tool title and site navigation iFrames.

•
Increased use of CSS for portal and tool content presentation.

•
Resolved WYSIWYG navigation and help tabbing issues.

•
Eliminated numerous instances of "onkeypress" code (this was
originally added to comply with a WCAG 1.0 recommendation,
however, it was found to conflict with Internet Explorer).

•
Revised portal accesskeys to reflect UK eCommerce guidelines

Current Accessibility

•
Mostly Section 508/WCAG 1.0 compliant

(
http://bugs.sakaiproject.org/confluence/pages/viewpageattachments.action
?pageId=7825
)

–
JavaScript must be enabled

–
Scale > 200% not useable

–
JSF “Accessibility”

–
Content collapse (CSS)

–
Miscellaneous “Bugs”
(
http://bugs.sakaiproject.org/jira/secure/IssueNavigator.jspa?mo
de=hide&requestId=10254
)

•
Natural language not identified in header

•
Code burps

•
Onkeypress clean
-
up


Version 2.3 to Version 2.4*

•
Eliminate last iFrame (screen resizing and navigation)

•
Add user
-
specified presentation (font size, reverse type, etc.)
—
StyleAble

•
Revise non
-
CSS content scrolling

•
Identify/Integrate more accessible WYSIWYG text editor

•
Incorporate enhancements to JSF widgets

•
Repair various JIRA items

•
Integrate accessibility reviews with QA process






*Proposed (“Yes, Virginia, there is Santa Claus”)

Beyond 2.4

•
What’s left over from 2.4 wish list

•
FLUID interface

•
Accessible AJAX

•
Frameless portal and tools

•
Sakai accessibility checker


JAWS Tutorial

•
What is JAWS?

•
How people use JAWS

•
Download JAWS

•
JAWS Exercise

What is JAWS?

•
Leading screen reader for blind or low vision persons

•
Website, application interpreter (Word, Powerpoint, Excel, etc.)

•
With proper coding, assists scanning, navigation, comprehension


How People Use JAWS

•
Users invoke keyboard combinations to read through a web
-
page or
document

•
Benefit from keyboard shortcuts, organized content, contextual clues

•
Common techniques
: tabbing through links and form inputs,
checking page titles, reading link lists, scanning headings


Video Clip of Blind JAWS User












www.webaim.org/media/video/kyle/kyle.asx

JAWS As Evaluation Tool

•
Accessibility evaluation components

–
XHTML/CSS validation

–
Section 508/WCAG 1.0 evaluation

–
Manual review

–
JAWS

•
Protocol
:
(
http://bugs.sakaiproject.org/confluence/display/2ACC/2.2+Testing+Protocol
)

JAWS Installation

•
Freedom Scientific demo page

(
http://www.freedomscientific.com/fs_downloads/jaws.asp
)

JAWS Start
-
up

•
Close your browser

•
Close your mail program

•
Open JAWS

•
Open Internet Explorer

•
Surf to this address:



http://usability.msu.edu

JAWS Exercise

•
Use JAWS:

–
Listen to page (ins + down arrow)

–
Check page titles (insert + t)

–
Tab through links and link phrases (tab)

–
Scan through headings (h)

–
Review link phrases (insert + f7)

–
Review headings (insert +f6)

–
Go to different pages (alt + a, s, f, u, r, etc.)

•
Quit JAWS

JAWS Exercise #2

•
Go to a site of your choosing and repeat the exercise

What Do You Think?

Key JAWS Keystrokes

•
Top of page = Ctrl + home

•
Read = Ins + down

•
Stop = Control key


•
Next link = Tab

•
Prior link = Shift + Tab

•
Next table = t

•
Next heading = h

•
Next frame = Ctrl + Tab


•
Up 10 items = Page up

•
Down 10 items = Page down

•
Next page in browser = Alt + right

•
Last page in browser = Alt + left

•
Read title = Ins + t

•
Show links = Ins + F7

•
Show headings = Ins + F6

•
Show frames = Ins + F9


•
First table cell = Alt + Ctrl + home

•
Move to cell = Alt + Ctrl + arrow

•
Say current cell = Alt + Ctrl + numpad 5

•
Read from row start = Ins + Shift + Home


•
First form field = Ctrl + Ins + Home

•
Next form field = f

•
Turn on forms mode = enter


Common Code Elements A

Elements

Attributes

Example

Purpose

<a href>

title, name,
accesskey
, tabindex

<a href="#content" title="Go to Content"
accesskey="s" tabindex="2">Skip
Navigation</a><a name="content"
id="content"></a>Welcome…

Provides additional information about links,
creates anchor tag, provides keyboard
-
based navigation, sets tab order

<abbr>

--

<abbr ="workshop">wksp</abbr>

Defines abbreviation

<acronym>

--

<acronym="World Wide Web
Consortium">W3C</acronym>

Defines acronym

<caption>

--

<caption>Accessibility and User
Satisfaction</caption>

Provides table heading

<div>

id, class

<div id="news">Various news items</div>

Delineates page structure

<fieldset>,
<legend>

--

<fieldset><legend><Contact
Information</legend></fieldset>

Delineates form structure

Common Code Elements B

Elements

Attributes

Example

Purpose

<frame>

title, name

<frame name="webcontent" title="Page
Content Begins Here" />

Describes frame content

<h1>, <h2>...<h6>

--

<h1>Top heading</h1><h2>Second level
heading</h2>

Creates page content hierarchy and navigation

<img>

alt, longdesc

<img src="Images/logo.gif" alt="Usability &
Accessibility Center at Michigan State
University" longdesc="A state of the art
accessibility evaluation and research center
located in East Lansing, Michigan" /> Use
alt="" for images that do not present
information.

Provides image descriptions

<label>, <input>

for, id

<label for="FirstName">First
name:</label><input id="FirstName" />

Associates form input with form labels

<link rel>

prev, next,
stylesheet

<link rel="prev" href="Chapter1.html" />

Provides alternative navigation in Opera(?)
browser

<meta name>

keywords,
author,
description

<meta name="keywords"
content="Accessibility, usability" />

Describes web page content for search engines

Common Code Elements C

Elements

Attributes

Example

Purpose

<no
frames>

--

Page content rendered without frames

Provides alternative content when frames are
present

<span>

class

<span class="ExampleFormat">Code
examples, for instance</span>

Controls positioning and presentation of
subsequent content

<table>

summary

<table summary="This 3 by 3 table shows the
effect of accessibility on user
satisfaction."></table>

Describes table structure and content

<th>

id, headers

<th id="category1">Tutorial</th><th
headers="category1">Introduction</th>

Associates table cell content with column
and/or row headings

<th>

scope

<th scope="col">Tutorial</th>
<td>Introduction</td>

Associates table cell content with column
and/or row headings

<thead>,
<tbody>

--



Separates head and body of complex data table

<title>

--

<title>Main Page</title>

Describes web page title

Q & A

•
Stop by the CATEA and NFBGA tables at tonight’s tech fair
—
5:30

•
Be sure to attend tomorrow’s JAWS and ZoomText user panel
session!

–
8:30, International Room 5

–
Demo

–
Discussion