sakai update and jaws tutorial mike elledge, accessibility team lead, sakai project gonzalo...
TRANSCRIPT
![Page 1: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/1.jpg)
Sakai Update and JAWS Sakai Update and JAWS TutorialTutorial
Mike Elledge, Accessibility Team Lead, Sakai ProjectGonzalo Silverio, User Interface Developer, Sakai Foundation
![Page 2: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/2.jpg)
Topics• Chronology• Current Accessibility• What’s Next• JAWS Tutorial—Have you installed JAWS?
![Page 3: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/3.jpg)
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)
![Page 4: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/4.jpg)
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.
![Page 5: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/5.jpg)
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
![Page 6: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/6.jpg)
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.
![Page 7: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/7.jpg)
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
![Page 8: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/8.jpg)
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
![Page 9: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/9.jpg)
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”)
![Page 10: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/10.jpg)
Beyond 2.4• What’s left over from 2.4 wish list • FLUID interface• Accessible AJAX• Frameless portal and tools• Sakai accessibility checker
![Page 11: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/11.jpg)
JAWS Tutorial• What is JAWS?• How people use JAWS• Download JAWS• JAWS Exercise
![Page 12: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/12.jpg)
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
![Page 13: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/13.jpg)
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
![Page 14: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/14.jpg)
Video Clip of Blind JAWS User
www.webaim.org/media/video/kyle/kyle.asx
![Page 15: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/15.jpg)
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)
![Page 16: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/16.jpg)
JAWS Installation• Freedom Scientific demo page(http://www.freedomscientific.com/fs_downloads/jaws.asp)
![Page 17: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/17.jpg)
JAWS Start-up• Close your browser• Close your mail program• Open JAWS• Open Internet Explorer• Surf to this address:
http://usability.msu.edu
![Page 18: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/18.jpg)
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
![Page 19: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/19.jpg)
JAWS Exercise #2• Go to a site of your choosing and repeat the exercise
![Page 20: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/20.jpg)
What Do You Think?
![Page 21: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/21.jpg)
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
![Page 22: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/22.jpg)
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
![Page 23: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/23.jpg)
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
![Page 24: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/24.jpg)
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
![Page 25: Sakai Update and JAWS Tutorial Mike Elledge, Accessibility Team Lead, Sakai Project Gonzalo Silverio, User Interface Developer, Sakai Foundation](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dc55503460f94ab92bf/html5/thumbnails/25.jpg)
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