Web Accessibility I

1
Web Accessibility I

• Peter Mosinskis
• Supervisor of Web Services
• CSU Channel Islands
• Rev. 2009-04-09

2
Overview

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

3
The User Experience

• Keeping Web Accessibility In Mind
• Video available online at www.webaim.org

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

5
Legal Issues
6
Federal Accessibility Law

• Americans With Disabilities Act (ADA) (1990)
• Rehabilitation Act (1973)
• Section 504
• Section 508

7
State Law CSU Policy

• CA State Senate Bill 302
• Applies Section 508 to CSU System
• CSU Chancellors Office Executive Order 926
• Confirms application of ADA, Section 504 and
  Section 508 to CSU system
• Effective January 1, 2005

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

9
Web Accessibility _at_ 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

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

11
Prep and Review

• Tools Ground Rules

12
Tools Youll 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.paciell
  ogroup.com/resources/contrast-analyser.html
• Recommended
• A WYSIWYG web page editing tool
• Examples Serena Collage or Adobe Dreamweaver

13
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

14
Example Site

• Mouse College Soccer Program

15
Section 508 Compliance

• The Sixteen Guidelines,
• Presented in order of frequency of occurrence

16
7 Most Frequent Checkpoints

• (also the most important)
• Checkpoints A, C, D, G, H, M O

17
(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 ltimggt element
• If necessary, add long description using LONGDESC
  attribute
• If image is decorative
• Add empty ALT attribute of ltimggt element

18
Example Image 1 (meaningful)
19
HTML Code for Example Image 1

• WRONG ltimg srcsoccer.jpg /gt
• WRONG ltimg altA baked potato
  srcsoccer.jpg /gt
• RIGHT ltimg altSoccer goalie leaping for ball
  srcsoccer.jpg /gt

20
Example Image 2 (decorative)
21
HTML Code for Example Image 2

• WRONG ltimg srcsoccer.jpg /gt
• WRONG ltimg altHands on soccer ball
  srcsoccer.jpg /gt
• RIGHT ltimg alt srcsoccer.jpg /gt

22
(a) Using LONGDESC

• What LONGDESC is
• An attribute of the ltimggt element
• When to use it
• When you need 80 characters or more to describe
  an image
• Probably lt5 of all images
• How its used
• ltimg altMy short description longdescURL to
  my description /gt

23
Example of Image and Long Description

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

24
Example Image 3
25
HTML Code for Example Image 3

• WRONG ltimg srccellstructures.jpg /gt
• WRONG ltimg altHands on soccer ball
  srccellstructures.jpg /gt
• RIGHT ltimg altBeta-secretase enzyme
  longdeschttp//www.csuci.edu/cs-description.htm
  srccellstructures.jpg /gt

26
(a) Complex Images and Contexts

• How (and how much) to describe?
• Fine art description example(s)http//www.archim
  use.com/mw2001/papers/anable/anable.html
• Audio description example http//www.joeclark.org
  /access/description/ad-principles.html

27
(a) Also Applies to Video and Audio

• Video clips must be captioned
• Audio-only clips require a text transcript
• Audio-only clips dont have to be captioned (they
  are not multimedia)
• Contact CSUCI Academic Technology Services for
  assistance

28
(c) Content can be conveyed without color

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

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

30
(c) Issue 1 Color Words

• Need to add emphasis?
• Use ltstronggt or ltemgt to add emphasis instead of
  color
• Can I still use color?
• Yes, good use of color good design

31
(c) Issue 2 Contrast

• Check contrast of text and background colors
• Desktop tool Colour Contrast Analyzer
• Web based http//juicystudio.com/services/colourc
  ontrast.php
• Highest contrast color scheme?
• Black Text, White background!

32
(d) Document should be readable without style
sheet

• Check 1 (Firefox)
• Web Developer Toolbar gtCSS button gtDisable
  Styles gtAll Styles
• Check 1 (Internet Explorer)
• Use Web Accessibility Toolbar for IE
  2.0http//www.paciellogroup.com/resources/wat-ie-
  about.html

33
(d) Document should be readable without style
sheet

• Check 1 (Firefox)
• Web Developer Toolbar gtInformation button gtView
  Document Outline
• Page sections should be displayed in an
  organized, outlined form

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

35
(d) Guidelines for Repair

• Use HTML only for structure your content (not to
  apply formatting)
• Structure your content using headings (lth1gt)
  paragraphs (ltpgt), lists (ltolgt, ltulgt, and ltligt)
  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
  ltblockquotegt only for quotes, not to indent)

36
(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 to data
  tables
• Check and repair 4 steps

37
(g h) How the Sample Table Looks
38
(g h) Sample Table Code

• lttable border"1" summary"Lists names and
  favorite colors"gt
• lttheadgt
• lttrgt
• ltth scope"col"gtNamelt/thgt
• ltth scope"col"gtFavorite Colorlt/thgt
• lt/trgt
• lt/theadgt
• lttbodygt
• lttrgt
• lttdgtPat Smithlt/tdgt
• lttdgtRedlt/tdgt
• lt/trgt
• lttrgt
• lttdgtTyler Zipperlt/tdgt
• lttdgtGreenlt/tdgt
• lt/trgt
• lt/tbodygt
• lt/tablegt

39
(g h) Fixing tables Step 1

• First, remove non-table data from the table

40
(g h) Fixing tables Step 2

• Use ltthgt (table heading) tags for column and row
  headings
• First data table row should always contain ltthgt
  tags
• Example
• ltth scopecolgtNamelt/thgt

41
(g h) Fixing tables Step 3

• Set scope attribute for ltthgt tags
• scopecol for column headings
• scoperow for row headings
• Examples
• ltth scopecolgtNamelt/thgt
• ltth scoperowgt2007-2008lt/thgt

42
(g h) Fixing tables Step 4

• Add a table summary using summary attribute
• Provides a textual description of the table
• Examplelttable summaryList of names and
  favorite colorsgt

43
(g h) Complicated tables

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

44
(g h) Complicated tables (cont.)
45
(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

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

47
(m) Applets, plug-ins and external content Step
2 (cont)

• How it looks when complete

48
(m) Applets, plug-ins and external content Step
2 (cont)

• Links to common readers
• Acrobat
• http//www.adobe.com/products/acrobat/readstep2.ht
  ml
• Microsoft Office
• http//www.microsoft.com/office/
• Quicktime
• http//www.apple.com/quicktime/
• Provide link to other vendor web sites as
  necessary

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

50
(o) Skip Navigation Links

• How to Fix
• 1. Directly after ltbodygt tag, add the following
  HTML
• ltdiv id"skip"gtlta hrefback_to_top
  name"back_to_top" id"back_to_top"gtlt/agtlta
  href"skip_navigation"gtltimg srchttp//www.csuci
  .edu/images/spacer.gif" width"1" height"1"
  border"0" alt"Skip Global Navigation"gtlt/agtlt/div
  gt

51
(o) Skip Navigation Links

• 2. At the start of the actual page body content,
  add the following HTML code
• lta name"skip_navigation" id"skip_navigation"gtlt/a
  gt

52
(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 ahover, skip avisited
• positionabsolute
• left0px
• top-500px
• width1px
• height1px
• overflowhidden
• skip aactive
• positionstatic
• widthauto
• heightauto

53
(o) Skip Navigation Links

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

54
Less Frequent Checkpoints

• but no less important

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

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

57
(k) Text-only page

• If accessibility cant 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?)

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

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

60
(n) Accessible Forms

• Form elements which need to be accessible
• Push buttons ltINPUT type"buttongt or ltINPUT
  type"submitgt
• Image buttons ltINPUT type"image"gt and ltBUTTONgt
• Text entry fieldsltINPUT type"text"gt and
  ltTEXTAREAgt
• Radio buttons ltINPUT type"radio"gt
• Check boxes ltINPUT type"checkbox"gt
• Select (drop-down or list) menus ltSELECTgt

61
(n) Accessible Forms

• Push buttons add value attribute
• ltinput type"submit" valueSubmit This Form"gt
• Image buttons add alt attribute
• ltinput type"image" name"Go" src"go.gif"
  alt"Go"gt
• Text Entry Fields
• Add id attribute and value to ltinputgt tag
• Add ltlabelgt tag before a text field
• Add for attribute and value to ltlabelgt tag set
  to id value of ltinputgt tag
• Exampleltlabel forfirstnamegtFirst
  Namelt/labelgtltinput type"text" idfirstname
  namefn" size20gt

62
(n) Accessible Forms

• Radio buttons Check Boxes
• Add ltlabelgt right after ltinputgt tag
• Exampleltinput typeradio idage01
  valueUnder 40gtltlabel forage01gtUnder
  40lt/labelgt

63
(n) Accessible Forms

• Select menus
• Add ltlabelgt right before ltselectgt tag
• Exampleltlabel forfavcolorgtFavorite
  Colorlt/labelgtltselect titleChoose Your Favorite
  Color namefavoritecolor idfavcolorgtltoption
  valuegtPlease select onelt/optiongtltoption
  valuegtBluelt/optiongtltoption valuegtRedlt/optio
  ngtlt/selectgt

64
(n) Accessible Forms

• How to Check
• Can you navigate the form using your keyboard?
• Tips for Accessible Forms
• Use ltlabelgt tag when possible
• Add title attribute to ltinputgt, ltselectgt, and
  lttextareagt tags
• Use ltfieldsetgt to group sets of form elements
• Use ltlegendgt to provide information on form
  elements
• Use ltoptgroupgt to group items in ltselectgt lists
• General Tips for Enhancing Web Forms
• Using ltlabelgt 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

65
Least Frequent Checkpoints

• but still required

66
(e f) Image Maps

• Example http//www.csuci.edu/about/map/interactiv
  emap/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

67
(e f) Image Maps

• How to Fix
• Dont 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

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

69
(i) Frame titles (continued)

• How to Fix
• 1. lttitlegt tag
• Each HTML document in a frame should have a
  lttitlegt tag within the ltheadgt tag
• Example
• ltheadgt lttitlegtNavigation Barlt/titlegt
• lt/headgt
• 2. Attributes name and title for ltframegt tag
• Example
• ltframe nameNavigationBar titleNavigation
  Bar srcframe1.htmgt

70
(i) Frame titles (continued)

• Naming Examples
• BAD Left side or center frame
• GOOD Navigation bar or Main content

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

72
(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 lta href"javascriptmyFunction()"gtStart
  myFunctionlt/agt
• 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)

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

74
Check Your Work!

• Remember, some checks must be done manually

75
Accessibility Check Repair Tools

• Single Page Check (free, web-based)
• HiSoftware Cynthia Says - http//www.contentqualit
  y.com/
• Web Accessibility Toolbar http//www.chrispederi
  ck.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

76
Single Page Check (live)

• Browse to the page in Firefox
• On the Web Developer Toolbar, choose Tools gt
  Validate Section 508

77
Single Page Check (cont.)

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

78
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

79
Web Standards Reference

• Section 508 Standards - http//www.access-board.go
  v/sec508/guide/1194.22.htm
• WCAG Standards - http//www.w3.org/TR/WAI-WEBCONTE
  NT/
• Web Standards Project http//www.webstandards.org
  /learn/

80
External Resources

• Tutorials
• Jim Thatcher - www.jimthatcher.com
• Dive Into Accessibility - http//diveintoaccessibi
  lity.org/
• WebAIM - http//www.webaim.org/
• Techniques and Concepts
• Joe Clark http//www.joeclark.org/

81
CSUCI Accessibility Resources

• Disability Accommodation Services
• http//www.csuci.edu/disability
• Web Accessibility _at_ CSUCI
• http//www.csuci.edu/it/web/accessibility.htm

82
CSU Accessibility Resources

• CSU Web Accessibility
• http//www.calstate.edu/accessibility/webaccessibi
  lity/
• 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/learnin
  gmodules/
• Know Your Users video (CSU Fresno)
• Available for checkout through Disability
  Accommodation Services

83
Reference Books

• Accessibility
• Constructing Accessible Web Sites, Jim
  Thatcher
• Building Accessible Web Sites, Joe Clark
• General Web Design
• Dont Make Me Think, Steven Krug
• Designing Web Usability, Jakob Nielsen
• Designing with Web Standards, Jeffrey Zeldman

84
CSUCI Technology Workshops

• Web Accessibility II
• Improving web site usability
• More tools for checking accessibility
• Creating Accessible Word Documents
• Creating Accessible PDFs (2 parts)
• Creating Accessible PowerPoint

85
Final Thoughts

• Accessibility
• Its the Law
• Its the Smart Thing to do
• Its the Right Thing to do
• When in Doubt, Ask for Help!
• Presentation available online at
  http//www.csuci.edu/it/web/accessibility/

86
Questions

• Contact the Help Desk
• helpdesk_at_csuci.edu
• 805-437-8552