Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.
-
Upload
alexandrina-lawson -
Category
Documents
-
view
212 -
download
0
Transcript of Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.
![Page 1: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/1.jpg)
Web Accessibility I
Peter Mosinskis
Supervisor of Web Services
CSU Channel Islands
Rev. 2008-02-26
![Page 2: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/2.jpg)
Overview
The User Experience Legal Issues affecting CSUCI Section 508 – 16 Guidelines Accessibility Check Tools & Resources
![Page 3: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/3.jpg)
The User Experience
“Keeping Web Accessibility In Mind”
Video available online at: www.webaim.org
![Page 4: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/4.jpg)
Types of Disabilities
Visual (blindness, low vision, color-blindness) Hearing (deafness, hard of hearing) Physical/Motor (weakness, muscle control,
paralysis) Cognitive/Neurological (dyslexia, intellectual
or memory impairments) Multiple Disabilities (deaf and blind)
![Page 5: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/5.jpg)
Legal Issues
![Page 6: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/6.jpg)
Federal Accessibility Law
Americans With Disabilities Act (ADA) (1990)
Rehabilitation Act (1973) Section 504 Section 508
ADA(very broad,
public and private sector)
Section 504(broad, specific to public
sector and education)
Section 508
(more specific)
![Page 7: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/7.jpg)
State Law & CSU Policy
CA State Senate Bill 302 Applies Section 508 to CSU System
CSU Chancellor’s Office Executive Order 926 Confirms application of ADA, Section 504 and
Section 508 to CSU system Effective January 1, 2005
![Page 8: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/8.jpg)
What The Law Means to CSUCI
Disability accommodations must be provided quickly and as needed (Section 504)
Technology, web sites and any electronic documents must be accessible from their inception, not ad hoc (Section 508)
Fortunately, Section 508 gives us guidelines!
![Page 9: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/9.jpg)
Web Accessibility @ CSUCI
Phase 1: Section 508 standards In progress since August 2005
Phase 2: CSU Accessible Technology Initiative (ATI) Coded Memo AA-2006-41 (Sept. 2006) 1st Year Plan In Development All web sites and web applications created after
September 1, 2007 must meet Section 508
![Page 10: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/10.jpg)
Benefits for CSUCI
Scalability: do it once rather than coordinating accommodations each and every time
Reduces cost for retrofitting Greater return on investment: non-disabled students
will benefit from universal design Universal Design = Access for All Multiple means of access to information Way to reach “digital generation”
Manage Risk (the reactive model often does not result in timely or “as effective as” access)
![Page 11: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/11.jpg)
Prep and Review
Tools & Ground Rules
![Page 12: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/12.jpg)
Tools You’ll Need
Minimum (required) Windows Notepad (or any plain-text editor) Firefox web browser ( www.mozilla.com ) Firefox Web Developer Extension (free)
http://chrispederick.com/work/webdeveloper/ Colour Contrast Analyzer (free)
http://www.paciellogroup.com/resources/contrast-analyser.html
Recommended A WYSIWYG web page editing tool
Examples: Serena Collage or Adobe Dreamweaver
![Page 13: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/13.jpg)
Shortcuts
Web design software has shortcuts Instructions contained are generic enough to
be used with any web design software Serena Collage Adobe Dreamweaver
![Page 14: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/14.jpg)
Example Site
Mouse College Soccer Program
![Page 15: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/15.jpg)
Section 508 Compliance
The Sixteen Guidelines,
Presented in order of frequency of occurrence
![Page 16: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/16.jpg)
7 Most Frequent Checkpoints
(also the most important)
Checkpoints A, C, D, G, H, M & O
![Page 17: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/17.jpg)
(a) Text description of non-text elements
First determine if each image is meaningful or decorative
If image is meaningful Write short description (7 to 80 characters long) Add ALT attribute & description to <img> element If necessary, add long description using
LONGDESC attribute If image is decorative:
Add “empty” ALT attribute of <img> element
![Page 18: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/18.jpg)
Example Image #1 (meaningful)
![Page 19: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/19.jpg)
HTML Code for Example Image #1
WRONG: <img src=“soccer.jpg” />
WRONG: <img alt=“A baked potato” src=“soccer.jpg” />
RIGHT: <img alt=“Soccer goalie leaping for ball” src=“soccer.jpg” />
![Page 20: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/20.jpg)
Example Image #2 (decorative)
![Page 21: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/21.jpg)
HTML Code for Example Image #2
WRONG: <img src=“soccer.jpg” />
WRONG: <img alt=“Hands on soccer ball” src=“soccer.jpg” />
RIGHT: <img alt=“” src=“soccer.jpg” />
![Page 22: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/22.jpg)
(a) Using LONGDESC
When to use LONGDESC attribute When you need 80+ characters or more to
describe an image How to use LONGDESC
LONGDESC creates a link to another page which contains the long description of the image
LONGDESC is used in addition to the ALT attribute for the <img> element
![Page 23: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/23.jpg)
Example of Image and Long Description
Long Description located at: http://www.csuci.edu/alzheimer/documents/embryo_to_stem_description.txt
![Page 24: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/24.jpg)
Example Image #3
![Page 25: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/25.jpg)
HTML Code for Example Image #3
WRONG: <img src=“cellstructures.jpg” />
WRONG: <img alt=“Hands on soccer ball” src=“cellstructures.jpg” />
RIGHT: <img alt=“Beta-secretase enzyme” src=“cellstructures.jpg” />
ALSO RIGHT: <img alt=“Beta-secretase enzyme” longdesc=“http://www.csuci.edu/cs-description.htm” src=“cellstructures.jpg” />
![Page 26: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/26.jpg)
(a) Complex Images and Contexts
How (and how much) to describe? Fine art description example(s):
http://www.archimuse.com/mw2001/papers/anable/anable.html
Audio description example: http://www.joeclark.org/access/description/ad-principles.html
![Page 27: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/27.jpg)
(a) Also Applies to Video and Audio
Video clips must be captioned Audio-only clips require a text transcript
Audio-only clips don’t have to be captioned (they are not multimedia)
Contact CSUCI Academic Technology Services for assistance
![Page 28: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/28.jpg)
(c) Content can be conveyed without color
Two main issues Use of color words Color contrast of foreground/background colors
![Page 29: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/29.jpg)
(c) Issue #1 Color Words
Never depend on color alone: you can use color, but not to define sole source of information or meaning
WRONG: “Items marked in red must be completed” “Push the green button to start”
CORRECT: “Items marked with * must be completed” “Push the button titled “Start” to begin”
![Page 30: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/30.jpg)
(c) Issue #1 Color Words
Need to add emphasis? Use <strong> or <em> to add emphasis instead
of color Can I still use color?
Yes, good use of color = good design
![Page 31: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/31.jpg)
(c) Issue #2 Contrast
Check contrast of text and background colors Desktop tool: Colour Contrast Analyzer Web based:
http://juicystudio.com/services/colourcontrast.php Highest contrast color scheme?
Black Text, White background!
![Page 32: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/32.jpg)
(d) Document should be readable without style sheet
Check #1 (Firefox): Web Developer Toolbar >
CSS button >Disable Styles >All Styles
Check #1 (Internet Explorer): Use Web Accessibility
Toolbar for IE 2.0http://www.paciellogroup.com/resources/wat-ie-about.html
![Page 33: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/33.jpg)
(d) Document should be readable without style sheet
Check #1 (Firefox): Web Developer
Toolbar >Information button >View Document Outline
Page sections should be displayed in an organized, outlined form
![Page 34: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/34.jpg)
(d) Document should be readable without style sheet
Why is HTML structure important? Screen reader software reads a page based on
the HTML structure, NOT on the visual organization of page content
Checkpoints: Can the page still be read? Can the page still be navigated? Is the organization of the page still clear and
easily comprehensible?
![Page 35: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/35.jpg)
(d) Guidelines for Repair
Use HTML only for structure your content (not to apply formatting)
Use Cascading Style Sheets (CSS) to apply formatting and style and set the look of your page
Structure your content using headings (<h1>) paragraphs (<p>), lists (<ol>, <ul>, and <li>) and tables
Do not use HTML elements for purposes other than what they were intended (Example: use <blockquote> only for quotes, not to indent)
![Page 36: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/36.jpg)
(g + h) Make tables accessible
2 types of tables commonly used in HTML Layout tables
Invisible Used to design layout for web pages
Data tables Used to display a set of data in columns & rows
Accessibility guidelines only apply to data tables How to Check:
Manual check: does your table contain tabular data?
![Page 37: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/37.jpg)
(g + h) Make tables accessible
How to Fix:1. Use <th> (table heading) tags to define table
column and row headings First table row should always contain <th> tags Use <th> tag attribute “scope”
Value “col” for column headings Value “row” for row headings
Example:
<th scope=“col”>Name</th>
![Page 38: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/38.jpg)
(g + h) Make tables accessible
How to Fix (cont.): 2. “summary” attribute of the <table> tag
Provides a textual description of the table Example:
<table summary=“List of names and favorite colors”>
3. Complicated tables may require both row and column headings
“headers” attribute for <td> can be used to define heading information for any given cell
![Page 39: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/39.jpg)
(g + h) How the Sample Table Looks
![Page 40: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/40.jpg)
(g + h) Sample Table Code1. <table border="1" summary="Lists names and favorite colors">2. <thead>3. <tr>4. <th scope="col">Name</th>5. <th scope="col">Favorite Color</th>6. </tr>7. </thead>8. <tbody>9. <tr>10. <td>Pat Smith</td>11. <td>Red</td>12. </tr>13. <tr>14. <td>Tyler Zipper</td>15. <td>Green</td>16. </tr>17. </tbody>18. </table>
![Page 41: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/41.jpg)
(m) Applets, plug-ins and external content
If your web page requires other software to view the content, you must provide a link to the software
The content that you link to must pass §508 The software that you link to must also pass
§508! i.e., Microsoft Office, Adobe Acrobat, Internet
Explorer all need to be inherently accessible.
![Page 42: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/42.jpg)
(m) Applets, plug-ins and external content (continued)
How to fix: Ensure the file formats you are using are accessible Most reputable software companies will provide
instructions/tutorials on making accessible documents (Microsoft, Adobe, Macromedia, etc.)
Provide links to the software used to view/read the document Good practice: also provide file size of external content
Example: CSUCI 2005 Catalog (PDF, 2.1MB) “PDF” describes document type and links to the Adobe
web site “2.1MB” describes size of the PDF file & download time
![Page 43: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/43.jpg)
(m) Applets, plug-ins and external content (continued)
How it looks when complete:
![Page 44: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/44.jpg)
(m) Applets, plug-ins and external content (continued)
How to fix (continued): Acrobat:
http://www.adobe.com/products/acrobat/readstep2.html
Microsoft Office http://www.microsoft.com/office/
Quicktime http://www.apple.com/quicktime/
Provide link to other vendor web sites as necessary
![Page 45: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/45.jpg)
(o) Skip Navigation Links
Each page must have a link that enables a user to jump to the main body content of a page
Enables skipping of repetitive navigation links
This issue is automatically addressed for users of Collage content management system and official CSUCI templates
![Page 46: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/46.jpg)
(o) Skip Navigation Links
How to Fix:
1. Directly after <body> tag, add the following HTML:
<div id="skip"><a href=“#back_to_top” name="back_to_top" id="back_to_top"></a><a href="#skip_navigation"><img src=“http://www.csuci.edu/images/spacer.gif" width="1" height="1" border="0" alt="Skip Global Navigation"></a></div>
![Page 47: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/47.jpg)
(o) Skip Navigation Links
2. At the start of the actual page body content, add the following HTML code:
<a name="skip_navigation" id="skip_navigation"></a>
![Page 48: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/48.jpg)
(o) Skip Navigation Links
3. If you use the CSUCI template and CSS style sheet, you are complete. Otherwise, you must insert some additional CSS code into your page style sheet:
#skip a, #skip a:hover, #skip a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden; } #skip a:active { position:static; width:auto; height:auto; }
![Page 49: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/49.jpg)
(o) Skip Navigation Links
How it looks when complete (with style sheet turned off):
![Page 50: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/50.jpg)
Less Frequent Checkpoints
…but no less important…
![Page 51: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/51.jpg)
(b) Multimedia presentation alternatives and synchronization
Captioning must be done in real-time Captioning must be synchronized with
presentation (not a transcript provided later) Webcasts require real-time captioning How to Check:
Manual check required How to Fix
Captioning Software (MAGPie; HiCaption)
![Page 52: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/52.jpg)
(j) Eliminate screen flicker
Bad examples: http://www.hosanna1.com/ People with photosensitive epilepsy can have
seizures triggered by flickering or flashing Some people with cognitive or visual disabilities
can’t read moving text Moving text or images can be distracting How to fix:
Remove blinking or flashing elements on a web page Remove banner text that automatically scrolls Remove animated GIFs – they are a nuisance
![Page 53: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/53.jpg)
(k) Text-only page
If accessibility can’t be accomplished in any other way, text-only page is a possible alternative
Fact: There are virtually no instances (98%+) where this should be necessary
Fact: Text-only page by itself does not address accessibility (for example, what happens to content structure?)
![Page 54: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/54.jpg)
(k) Text-only page (continued)
Caveats to text-only page: Text-only page must be updated whenever
primary page changes Text-only page must have equivalent information
and functionality How to Fix
Design (or redesign) carefully with accessibility in mind, not as an afterthought
![Page 55: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/55.jpg)
(n) Accessible Forms
Information, field elements, and functionality of HTML forms must be accessible, including directions & cues
Users should be able to complete and submit the form using assistive technology
![Page 56: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/56.jpg)
(n) Accessible Forms
Form elements which need to be accessible Push buttons
<INPUT type="button“> or <INPUT type="submit“> Image buttons
<INPUT type="image"> and <BUTTON> Text entry fields
<INPUT type="text"> and <TEXTAREA> Radio buttons <INPUT type="radio"> Check boxes <INPUT type="checkbox"> Select (drop-down or list) menus <SELECT>
![Page 57: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/57.jpg)
(n) Accessible Forms
Push buttons: add “value” attribute <input type="submit" value=“Submit This Form">
Image buttons: add “alt” attribute <input type="image" name="Go" src="go.gif" alt="Go">
Text Entry Fields: Add “id” attribute and value to <input> tag Add <label> tag before a text field Add “for” attribute and value to <label> tag; set to “id” value
of <input> tag Example:
<label for=“firstname”>First Name:</label><input type="text" id=“firstname” name=“fn" size=20>
![Page 58: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/58.jpg)
(n) Accessible Forms
Radio buttons & Check Boxes Add <label> right after <input> tag Example:
<input type=“radio“ id=“age01” value=“Under 40”><label for=“age01”>Under 40</label>
![Page 59: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/59.jpg)
(n) Accessible Forms
Select menus Add <label> right before <select> tag Example:
<label for=“favcolor”>Favorite Color</label><select title=“Choose Your Favorite Color” name=“favoritecolor” id=“favcolor”><option value=“”>Please select one</option><option value=“”>Blue</option><option value=“”>Red</option></select>
![Page 60: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/60.jpg)
(n) Accessible Forms
How to Check Can you navigate the form using your keyboard?
Tips for Accessible Forms Use <label> tag when possible Add “title” attribute to <input>, <select>, and <textarea> tags Use <fieldset> to group sets of form elements Use <legend> to provide information on form elements Use <optgroup> to group items in <select> lists
General Tips for Enhancing Web Forms Using <label> tags you can move around where labels are
placed (e.g., label in one cell of table, form field in another) Apply style to forms using CSS
![Page 61: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/61.jpg)
Least Frequent Checkpoints
…but still required…
![Page 62: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/62.jpg)
(e + f) Image Maps
Example: http://www.csuci.edu/about/map/interactivemap/index.htm
Image maps let you create clickable, linked areas on an portion of an image in a web page
(e) You must provide links in your HTML code to all linked map areas for all server-side image maps
(f) Use client-side image maps instead of server-side image maps
![Page 63: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/63.jpg)
(e + f) Image Maps
How to Fix: Don’t use Server Side image maps (they are
deprecated). Reconfigure Server Side image maps as
client-side image maps Use ALT text on your image map link areas
![Page 64: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/64.jpg)
(i) Frame titles
Example of a frames page:http://www.tedmontgomery.com/the_eye/index.html
If HTML frames are used for layout, frame titles must be labeled clearly & related directly to frame content
Use of frames for layout is typically deprecated for layout purposes, mostly because linking can be complex
![Page 65: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/65.jpg)
(i) Frame titles (continued)
How to Fix: 1. <title> tag
Each HTML document in a frame should have a <title> tag within the <head> tag
Example:<head> <title>Navigation Bar</title></head>
2. Attributes “name” and “title” for <frame> tag Example:<frame name=“NavigationBar” title=“Navigation Bar”
src=“frame1.htm”>
![Page 66: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/66.jpg)
(i) Frame titles (continued)
Naming Examples BAD: “Left side” or “center frame” GOOD: “Navigation bar” or “Main content”
![Page 67: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/67.jpg)
(l) Scripts and functional text
Any JavaScript should have “functional text” “Functional text” is text that identifies what will happen
when a script is activated.
How to Test: Test JavaScript events without a mouse (keyboard only) Test your site on a screen reader or talking browser Turn JavaScript off, test all elements on page being
affected by JavaScript to ensure no information is lost
![Page 68: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/68.jpg)
(l) How to fix scripts Try to design your site so that it will function properly without
JavaScript Add functional text to HTML elements that incorporate Javascript
for actions (such as clickable images, image maps, etc.) via tag content or tag attributes such as “title” and “alt”
Good: <a href="javascript:myFunction();">Start myFunction</a> If you must use mouse-based event handlers (such as
onMouseOver or onMouseDown), use along with keyboard based event handlers (such as onClick, onKeyUp, onKeyPress)
Avoid some event handlers altogether (onDblClick, onChange)
![Page 69: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/69.jpg)
(p) Timed Response
When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
How to check: Manual check - does your page require a timed
response to a form? How to fix:
Your web application must have an alerting mechanism so users can request more time
![Page 70: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/70.jpg)
Check Your Work!
Remember, some checks must be done manually
![Page 71: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/71.jpg)
Accessibility Check & Repair Tools Single Page Check (free, web-based)
HiSoftware Cynthia Says - http://www.contentquality.com/ Web Accessibility Toolbar – http://www.chrispederick.com/ Watchfire WebXACT - http://webxact.watchfire.com/
Multi-Page Check (campus license) HiSoftware AccVerify + AccMonitor HiCaption To obtain, please contact the Help Desk and
open a work order Web software that can check
Dreamweaver CS3 (campus license) FrontPage 2003 (campus license) Dreamweaver LIFT accessibility checker
![Page 72: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/72.jpg)
Single Page Check (live)
1. Browse to the page in Firefox
2. On the Web Developer Toolbar, choose Tools > Validate Section 508
![Page 73: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/73.jpg)
Single Page Check (cont.)
3. A report will be displayed with information on each checkpoint (including pass/fail info)
![Page 74: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/74.jpg)
Accessibility and Collage
Serena Collage Web content management system for
www.csuci.edu Edit your www.csuci.edu and academic program
web pages online (no extra software required) Access through http://collage.csuci.edu
Collage built-in web page editor features to address accessibility issues
![Page 75: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/75.jpg)
Web Standards Reference
Section 508 Standards - http://www.access-board.gov/sec508/guide/1194.22.htm
WCAG Standards - http://www.w3.org/TR/WAI-WEBCONTENT/
Web Standards Project: http://www.webstandards.org/learn/
![Page 76: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/76.jpg)
External Resources
Tutorials Jim Thatcher - www.jimthatcher.com Dive Into Accessibility -
http://diveintoaccessibility.org/
WebAIM - http://www.webaim.org/ Techniques and Concepts
Joe Clark: http://www.joeclark.org/
![Page 77: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/77.jpg)
CSUCI Accessibility Resources
Disability Accommodation Services http://www.csuci.edu/disability
Web Accessibility @ CSUCI http://www.csuci.edu/it/web/accessibility.htm
![Page 78: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/78.jpg)
CSU Accessibility Resources
CSU Web Accessibility http://www.calstate.edu/accessibility/webaccessibility/
Other CSU Programs CATS Accessibility Mailing List
Subscribe at: http://cats.cdl.edu/cats_forums TIGERS Grant
Web Access Learning Modules (CSU Fresno)http://www.csufresno.edu/webaccess/learningmodules/
“Know Your Users” video (CSU Fresno) Available for checkout through Disability Accommodation
Services
![Page 79: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/79.jpg)
Reference Books
Accessibility “Constructing Accessible Web Sites”,
Jim Thatcher “Building Accessible Web Sites”, Joe Clark
General Web Design “Don’t Make Me Think”, Steven Krug “Designing Web Usability”, Jakob Nielsen “Designing with Web Standards”, Jeffrey Zeldman
![Page 80: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/80.jpg)
CSUCI Technology Workshops
Web Accessibility II Improving web site usability More tools for checking accessibility
Creating Accessible Word Documents Creating Accessible PDF’s (2 parts) Creating Accessible PowerPoint
![Page 81: Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2008-02-26.](https://reader038.fdocuments.us/reader038/viewer/2022110401/56649e0b5503460f94af3032/html5/thumbnails/81.jpg)
Final Thoughts
Accessibility… It’s the Law It’s the Smart Thing to do It’s the Right Thing to do
When in Doubt, Ask for Help! Presentation available online at:
http://www.csuci.edu/it/web/accessibility/