Sakai Update and JAWS Sakai Update and JAWS TutorialTutorial

Mike Elledge, Accessibility Team Lead, Sakai ProjectGonzalo 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?mode=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 AElements 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 BElements 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 CElements 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