Web accessibility i
Download
1 / 86

- PowerPoint PPT Presentation


  • 329 Views
  • Updated On :

Web Accessibility I Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2009-04-09 Overview The User Experience Legal Issues affecting CSUCI Section 508 – 16 Guidelines Accessibility Check Tools & Resources The User Experience “Keeping Web Accessibility In Mind”

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '' - bernad


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Web accessibility i l.jpg

Web Accessibility I

Peter Mosinskis

Supervisor of Web Services

CSU Channel Islands

Rev. 2009-04-09


Overview l.jpg
Overview

  • The User Experience

  • Legal Issues affecting CSUCI

  • Section 508 – 16 Guidelines

  • Accessibility Check Tools & Resources


The user experience l.jpg

The User Experience

“Keeping Web Accessibility In Mind”

Video available online at: www.webaim.org


Types of disabilities l.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)



Federal accessibility law l.jpg

Section 508(more specific)

Section 504(broad, specific to publicsector and education)

ADA(very broad,public and private sector)

Federal Accessibility Law

  • Americans With Disabilities Act (ADA) (1990)

  • Rehabilitation Act (1973)

    • Section 504

    • Section 508


State law csu policy l.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


What the law means to csuci l.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!


Web accessibility @ csuci l.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


Benefits for csuci l.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)


Prep and review l.jpg

Prep and Review

Tools & Ground Rules


Tools you ll need l.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


Shortcuts l.jpg
Shortcuts

  • All web design software has shortcuts

  • Shortcuts make it easier to create good HTML code

  • All software has different shortcuts, but they are similar

    • Serena Collage

    • Adobe Dreamweaver


Example site l.jpg
Example Site

Mouse College Soccer Program


Section 508 compliance l.jpg

Section 508 Compliance

The Sixteen Guidelines,

Presented in order of frequency of occurrence


7 most frequent checkpoints l.jpg

7 Most Frequent Checkpoints

(also the most important)

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


A text description of non text elements l.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



Html code for example image 1 l.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” />



Html code for example image 2 l.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” />


A using longdesc l.jpg
(a) Using LONGDESC

  • What LONGDESC is

    • An attribute of the <img> element

  • When to use it

    • When you need 80+ characters or more to describe an image

    • Probably <5% of all images

  • How it’s used

    • <img alt=“My short description” longdesc=“URL to my description” />


Example of image and long description l.jpg

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

Example of Image and Long Description



Html code for example image 3 l.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” longdesc=“http://www.csuci.edu/cs-description.htm” src=“cellstructures.jpg” />


A complex images and contexts l.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 l.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


C content can be conveyed without color l.jpg
(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 l.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”


C issue 1 color words30 l.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


C issue 2 contrast l.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!


D document should be readable without style sheet l.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


D document should be readable without style sheet33 l.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


D document should be readable without style sheet34 l.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?


D guidelines for repair l.jpg
(d) Guidelines for Repair

  • Use HTML only for structure your content (not to apply formatting)

  • Structure your content using headings (<h1>) paragraphs (<p>), lists (<ol>, <ul>, and <li>) and tables

  • Use Cascading Style Sheets (CSS) to apply formatting and set the look of your page

  • 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 l.jpg
(g + h) Make tables accessible

  • Two common table types

    • Layout tables

      • Invisible

      • Used to design layout for (older) web pages

    • Data tables

      • Used to display a set of data in columns & rows

  • Accessibility guidelines apply only todata tables

  • Check and repair: 4 steps



G h sample table code l.jpg
(g + h) Sample Table Code

  • <table border="1" summary="Lists names and favorite colors">

  • <thead>

  • <tr>

  • <th scope="col">Name</th>

  • <th scope="col">Favorite Color</th>

  • </tr>

  • </thead>

  • <tbody>

  • <tr>

  • <td>Pat Smith</td>

  • <td>Red</td>

  • </tr>

  • <tr>

  • <td>Tyler Zipper</td>

  • <td>Green</td>

  • </tr>

  • </tbody>

  • </table>


G h fixing tables step 1 l.jpg
(g + h) Fixing tables – Step 1

  • First, remove non-table data from the table


G h fixing tables step 2 l.jpg
(g + h) Fixing tables – Step 2

  • Use <th> (table heading) tags for column and row headings

    • First data table row should always contain <th> tags

  • Example:

    • <th scope=“col”>Name</th>


G h fixing tables step 3 l.jpg
(g + h) Fixing tables – Step 3

  • Set “scope” attribute for <th> tags

    • scope=“col” for column headings

    • scope=“row” for row headings

  • Examples:

    • <th scope=“col”>Name</th>

    • <th scope=“row”>2007-2008</th>


  • G h fixing tables step 4 l.jpg
    (g + h) Fixing tables – Step 4

    • Add a table summary using “summary” attribute

      • Provides a textual description of the table

    • Example:<table summary=“List of names and favorite colors”>


    G h complicated tables l.jpg

    1

    3

    2

    (g + h) Complicated tables

    • If more than 2 levels of logical structure, use “headers” and “id” attributes



    M applets plug ins and external content step 1 l.jpg
    (m) Applets, plug-ins and external content – Step 1

    • Make your PDF, Word, Excel, PowerPoint, Flash accessible

    • Similar accessibility techniques apply to these file formats


    M applets plug ins and external content step 2 l.jpg
    (m) Applets, plug-ins and external content – Step 2

    • Provide links to the software used to view/read the document

    • Examples

      • PDF

        • Adobe Acrobat Reader

      • Word/Excel/PowerPoint

        • Microsoft Office

        • OpenOffice

        • Free Microsoft Office reader



    M applets plug ins and external content step 2 cont48 l.jpg
    (m) Applets, plug-ins and external content – Step 2 (cont)

    • Links to common “readers”

      • 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 l.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

    • If you use Serena Collage or the CSUCI templates, this issue is resolved


    O skip navigation links50 l.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>


    O skip navigation links51 l.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>


    O skip navigation links52 l.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;

    }


    O skip navigation links53 l.jpg
    (o) Skip Navigation Links

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


    Less frequent checkpoints l.jpg

    Less Frequent Checkpoints

    …but no less important…


    B multimedia presentation alternatives and synchronization l.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)


    J eliminate screen flicker l.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


    K text only page l.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?)


    K text only page continued l.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


    N accessible forms l.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


    N accessible forms60 l.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>


    N accessible forms61 l.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>


    N accessible forms62 l.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>


    N accessible forms63 l.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>


    N accessible forms64 l.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


    Least frequent checkpoints l.jpg

    Least Frequent Checkpoints

    …but still required…


    E f image maps l.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


    E f image maps67 l.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


    I frame titles l.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


    I frame titles continued l.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”>


    I frame titles continued70 l.jpg
    (i) Frame titles (continued)

    • Naming Examples

      • BAD: “Left side” or “center frame”

      • GOOD: “Navigation bar” or “Main content”


    L scripts and functional text l.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


    L how to fix scripts l.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)


  • P timed response l.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


    Check your work l.jpg

    Check Your Work!

    Remember, some checks must be done manually


    Accessibility check repair tools l.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


    Single page check live l.jpg
    Single Page Check (live)

    • Browse to the page in Firefox

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


    Single page check cont l.jpg
    Single Page Check (cont.)

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


    Accessibility and collage l.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


    Web standards reference l.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/


    External resources l.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/


    Csuci accessibility resources l.jpg
    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 l.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


    Reference books l.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


    Csuci technology workshops l.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


    Final thoughts l.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/


    Questions l.jpg

    Questions

    Contact the Help Desk

    [email protected]

    805-437-8552


    ad