web accessibility i peter mosinskis supervisor of web services csu channel islands rev. 2008-02-26

Web Accessibility I

Peter Mosinskis

Supervisor of Web Services

CSU Channel Islands

Rev. 2008-02-26

Overview

The User Experience Legal Issues affecting CSUCI Section 508 – 16 Guidelines Accessibility Check Tools & Resources

The User Experience

“Keeping Web Accessibility In Mind”

Video available online at: www.webaim.org

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)

Legal Issues

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)

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

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!

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

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)

Prep and Review

Tools & Ground Rules

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

Shortcuts

Web design software has shortcuts Instructions contained are generic enough to

be used with any web design software Serena Collage Adobe Dreamweaver

Example Site

Mouse College Soccer Program

Section 508 Compliance

The Sixteen Guidelines,

Presented in order of frequency of occurrence

7 Most Frequent Checkpoints

(also the most important)

Checkpoints A, C, D, G, H, M & O

(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

Example Image #1 (meaningful)

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” />

Example Image #2 (decorative)


WRONG: <img src=“soccer.jpg” />

WRONG: <img alt=“Hands on soccer ball” src=“soccer.jpg” />

RIGHT: <img alt=“” src=“soccer.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

Example of Image and Long Description

Long Description located at: http://www.csuci.edu/alzheimer/documents/embryo_to_stem_description.txt

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” />

(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

(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

(c) Content can be conveyed without color

Two main issues Use of color words Color contrast of foreground/background colors

(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”

(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

(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!

(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


Check #1 (Firefox): Web Developer

Toolbar >Information button >View Document Outline

Page sections should be displayed in an organized, outlined form


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?

(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)

(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?


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>


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

(g + h) How the Sample Table Looks

(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>

(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.

(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


How it looks when complete:


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

(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


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>


2. At the start of the actual page body content, add the following HTML code:

<a name="skip_navigation" id="skip_navigation"></a>


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; }


How it looks when complete (with style sheet turned off):

Less Frequent Checkpoints

…but no less important…

(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)

(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

(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?)

(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

(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


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>


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>


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>


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>


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

Least Frequent Checkpoints

…but still required…

(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

(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

(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

(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”>

(i) Frame titles (continued)

Naming Examples BAD: “Left side” or “center frame” GOOD: “Navigation bar” or “Main content”

(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

(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)

(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

Check Your Work!

Remember, some checks must be done manually

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

Single Page Check (live)

1. Browse to the page in Firefox

2. On the Web Developer Toolbar, choose Tools > Validate Section 508

Single Page Check (cont.)

3. A report will be displayed with information on each checkpoint (including pass/fail info)

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

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/

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/

CSUCI Accessibility Resources

Disability Accommodation Services http://www.csuci.edu/disability

Web Accessibility @ CSUCI http://www.csuci.edu/it/web/accessibility.htm

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

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

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

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/

Questions

Contact the Help Desk

[email protected]

805-437-8552

web accessibility i peter mosinskis supervisor of web services csu channel islands rev. 2008-02-26

Documents

access slide

specific slide

csuci section

blind slide

o slide

occurrence slide

web accessibility

education section