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 ( ?pageId=7825) ?pageId=7825 –JavaScript must be enabled –Scale > 200% not useable –JSF “Accessibility” –Content collapse (CSS) –Miscellaneous “Bugs” ( de=hide&requestId=10254) 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

JAWS As Evaluation Tool Accessibility evaluation components –XHTML/CSS validation –Section 508/WCAG 1.0 evaluation –Manual review –JAWS Protocol: (

JAWS Installation Freedom Scientific demo page (

JAWS Start-up Close your browser Close your mail program Open JAWS Open Internet Explorer Surf to this address:

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 ElementsAttributesExamplePurpose title, name, accesskey, tabindex Skip Navigation Welcome… Provides additional information about links, creates anchor tag, provides keyboard- based navigation, sets tab order -- wksp Defines abbreviation -- W3C Defines acronym -- Accessibility and User Satisfaction Provides table heading id, class Various news items Delineates page structure, -- Delineates form structure

Common Code Elements B ElementsAttributesExamplePurpose title, name Describes frame content, Top heading Second level heading Creates page content hierarchy and navigation alt, longdesc Use alt="" for images that do not present information. Provides image descriptions, for, id First name: Associates form input with form labels prev, next, stylesheet Provides alternative navigation in Opera(?) browser keywords, author, description Describes web page content for search engines

Common Code Elements C ElementsAttributesExamplePurpose --Page content rendered without framesProvides alternative content when frames are present class Code examples, for instance Controls positioning and presentation of subsequent content summary Describes table structure and content id, headers Tutorial Introduction Associates table cell content with column and/or row headings scope Tutorial Introduction Associates table cell content with column and/or row headings, -- Separates head and body of complex data table -- Main Page 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