Sakai Update and JAWS Tutorial

erminerebelΤεχνίτη Νοημοσύνη και Ρομποτική

15 Νοε 2013 (πριν από 3 χρόνια και 11 μήνες)

154 εμφανίσεις

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