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
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο