Web Accessibility Guidelines, Concepts,

1
Web AccessibilityGuidelines, Concepts, Tools
www.webable.com
2
Introduction

• Mike Paciello
• WebABLE Founder
• Usability/Accessibility Professional
• ICADDWAIWebABLE

www.webable.com
3
The Program

• Introduction to Web Accessibility Issues and
  Concepts
• Introduction to Tools, Services, and Utilities
• Performing the Web Site Validation
• Creating Accessible Multimedia and PDF
• Summary, Resources, QA

www.webable.com
4
Session Objectives

• Identify the key components of Web accessibility
• Recommend specific design practices to address
  accessibility
• Perform a web site accessibility validation
  review and enhancement
• Review useful tools

www.webable.com
5
Changes In Attitude

• Change is all about attitude
• There are alternative ways to accomplish the same
  objective
• Too much focus on web accessibility techniques,
  standards, and doing it this or that way
• Not enough focus on user needs, user
  requirements, process
• Please remember that Web Design is about
  designing for the user

www.webable.com
6
The Demographics US Figures

• Approximately 50 million people with
  disabilities or
• 1-5 Americans between 15-64
• 1-2 Americans 65 years and older
• 20 of all US Citizens
• 20.3 million families (29 of all US families)
  with a member who has a disability
• 3.8 million families who have a child with a
  disability
• PWDs form the largest single minority population
  in the USA
• 1998 report to the President stated that PWDs
  control more than 175 billion in discretionary
  income!

www.webable.com
7
The Demographics International

• UN reports worldwide, 1-10 people have a
  disability or
• 37 million European citizens
• 4.5 million Canadians
• 4 million Australians
• WHO and the UN report more than 500 million
  people worldwide. Some recent statistics put that
  number closer to 750 million!
• EU committed 5.5 billion dollars to enhance
  access to people with disabilities between
  1995-1999 alone.

www.webable.com
8
Technical Hurdles

• Content (structure/presentation, images,
  multimedia)
• Usability
• Lack of clear, simplified standards.
• Client/Browser (limited user preferences)
• Publishing tools provide limited accessibility
  support
• Assistive technologies are behind technology curve

www.webable.com
9
W3C Guidelines

• W3C WAI WCAG V1.0 (whew!)
• Web Accessibility Initiative Web Content
  Accessibility Guidelines
• Three levels of compliance guidelines
• P1, P2, P3 (or A, AA AAA)
• Section 508 P1 5 additional requirements
• Standards L, M, N, O, P

www.webable.com
10
Section 508 Guidelines
www.webable.com
11
The Accessibility Browsers

• HomePage Reader (IBM self-voicing browser most
  powerful, and does a great job with Frames)
• (http//www-3.ibm.com/able/hpr.html)
• Simply Web 2000 (self-voicing and FREE)
• (http//www.econointl.com/sw/)
• EMACSpeak with/W3 browser (Unix/Linux)
• BrookesTalk (for users with mobility disabilities)

www.webable.com
12
Mainstream Browsers Supporting Accessibility

• Opera Softwares Opera (www.operasoftware.com)
• Preferences Properties
• Totally Keyboard operable
• Screen Reader Compatibility Menus
• IBM HomePage Reader Plug-in Support
• Zoom-In/Zoom-Out for Text Images
• MS Internet Explorer
• Accessibility Property Sheet (Internet Options)
• Expanded ALT text support
• Follow system caret (for screen reader support)
• Amaya (http//www.w3.org/Amaya/Amaya.html)

www.webable.com
13
Screen Readers Supporting Web Browsing

• JAWS for Windows
• Supports PDF rendering
• Window Eyes
• Supports PDF rendering
• HAL 95/98/2000
• OutSpoken Solo (Mac-only)
• SlimWare Windows Bridge
• WinVision

www.webable.com
14
3 Keys to Ensuring Web Accessibility

• Content
• Tools
• Users

www.webable.com
15
Why the Users?

• Users ARE your BEST friends!
• Test user accessibility by testing web site for 4
  key areas
• Usefulness
• Effectiveness
• Ease of use
• Learnability
• Easy to navigate and remember
• Likeability

www.webable.com
16
To Test Users, Try this Exercise

• Form small groups of 5-6 observers
• Select a web site
• Select a test participant
• Using Simply Web 2000 or HPR, watch the user
  navigate through the web site.
• Observe and take notes
• Determine findings

www.webable.com
17
2-Step Web Accessibility Remediation Process

• Perform an inspection of your site for HTML 4.0,
  Usability, and Accessibility compliance.
• Prioritize standard/legal compliance and plan a
  staged roll-out of accessibility (Nielsen, pg
  299)
• Enhance home page, critical path pages, and
  high-traffic pages for most important
  accessibility errors.
• Inspect all new pages (create accessible
  templates)
• Enhance medium-traffic pages

www.webable.com
18
HTML Validation Services/Tools

• W3C validation service
• http//validator.w3.org/
• CSE Validator tool
• http//www.htmlvalidator.com/htmlval/screenshotsv4
  5.html
• Note Many publishing tools include imbedded HTML
  validators now

www.webable.com
19
Accessibility Validation Services Tools

• Bobby (http//www.cast.org/bobby)
• AccessibilityMonitor.Com (http//www.accessibility
  monitor.com)
• WAVE (http//www.temple.edu/inst_disabilities/piat
  /wave/)
• LIFT (http//www.usablenet.com/)
• WAI Checkpoint Checker (http//rdf.pair.com/checke
  r.htm)

www.webable.com
20
Using the Bobby Validation Application
www.webable.com
21
Setting the Validation Preferences
www.webable.com
22
Setting the Report Preferences
www.webable.com
23
Conducting the Evaluation
www.webable.com
24
Viewing the Summary Report
www.webable.com
25
Using the LIFT Usability Service
www.webable.com
26
The LIFT Results Page
www.webable.com
27
Additional Accessibility Tools

• A-Prompt ToolKit (http//aprompt.snow.utoronto.ca/
  )
• HiSoftwares Tools (http//www.hisoftware.com)
• AccVerify Pro (http//www.hisoftware.com/downloads
  /acc.exe)
• AccVerify for MS FrontPage (http//www.hisoftware.
  com/downloads/accfp.exe)
• AccRepair (http//www.hisoftware.com/downloads/acc
  rep.exe)
• AccRepair for MS FrontPage (http//www.hisoftware.
  com/downloads/accrepfp.exe)
• SSB Technologies (http//www.ssbtechnologies.com)
• InSight 508/WAI Report Generator
• InFocus 508 site HTML code repair tool
• Clarity 508 reporting service
• NetConversions (http//www.508compliant.com/tools.
  htm)
• Crunchy Technologies PageScreamer 3.0
  (http//www.crunchy.com/tools/index.html)

www.webable.com
28
Additional Accessibility Testing Tools

• Site Validation/Auditing
• WatchFires Metabot (http//www.watchfire.com)
• Mercury Interactive Systems (QuickTest
  Pro/TestDirector) (http//www.mercuryinteractive.c
  om)
• COAST WebMaster Site Reporter (statistical
  analysis)
• Rational TestStudio (http//www.rational.com/produ
  cts/tstudio/index.jsp)
• Color Blindness/Contrast Tools
• Colorfield Digital Medias Insight Color
  Blindness Tool (http//www.colorfield.com/insight.
  html)
• Colour Tester for Accessibility (UK Non-Profit)
  (http//www.tesspub.com/colours.html)
• VisChecks Online Colour Blindness Simulator
  (http//www.vischeck.com/index.shtml
• Now available as standalone, desktop tool.
• NetConversions Grayscale Page Tool

www.webable.com
29
Recommended Inspection Process

• Validate HTML
• Validate accessibility
• Validate usability
• Use tools
• Test users
• For good measure, do a code review

www.webable.com
30
Frequent Accessibility Errors

• Incoherent or lack of image ALT text
• Unrecognized or incompatible script and/or
  programming code.
• Poorly labeled forms and frames
• Improperly coded Tables/Frames
• PDF files
• Poor use of colors
• Streaming media that contains no captioning or
  text transcript

www.webable.com
31
Simplified Techniques for Web Accessibility

• Images and animations Use the ALT attribute to
  describe the function of all visuals. Another
  practice is to use TITLE attribute. This is also
  a good technique.
• Image maps General policy is not to use Image
  Maps. Good practice (particularly for usability)
• Graphs and charts Treat like images and use ALT
  text to describe. If its a table, use the
  caption and summary tags to label and summarize
  the data.
• Multimedia -- Provide text descriptions and
  equivalents for visual and audio information

www.webable.com
32
More Techniques

• Hypertext links Use text that makes sense when
  read out of context. Click Here (Where is it
  taking me?)
• Page organization Use headings, lists, and
  consistent structure. Use CSS for layout and
  style where supported.
• Frames Label with the Title or Name attribute.
  (Some orgs have a no Frames policy Great!)
• Tables Make line by line reading sensible.
  Linearize and Summarize.
• Forms Include labels, ensure keyboard access
  and tab order. Group information. Label Controls.

www.webable.com
33
Code Examples of Alt Text
www.webable.com
34
Hypertext Links Code Examples
www.webable.com
35
Forms Accessibility Keyboard Order
www.webable.com
36
Forms Accessibility Tab Index
www.webable.com
37
Forms Accessibility Group with FIELDSET and
LEGEND
www.webable.com
38
Forms Accessibility Group with OPTGROUP
www.webable.com
39
Forms Accessibility Label Controls
www.webable.com
40
Tables Accessibility Simple Example
www.webable.com
41
Tables Accessibility Complex Data

• Its very long, but nicely illustrates, how to
  organize content in a data table
• The effect is to match Column Heads with Row Data
  
• Facilitates easier screen reader rendering

www.webable.com
42
Additional Tools

• MSN Linearization Demo
• (http//www.msn.com/default2.asp)
• Tablin Linearization Service
• http//www.w3.org/WAI/Resources/Tablin/
• LynxViewer Service
• http//www.delorie.com/web/lynxview.html
• BlackBoard
• For educational systems, enhanced for
  accessibility
• (http//products.blackboard.com/cp/bb5/access/inde
  x.cgi)

www.webable.com
43
Web Publishing Tools

• DreamWeaver/UltraDev (Mac/PC)
• Now includes validator
• New Accessibility Extensions
• (http//www.macromedia.com/macromedia/accessibilit
  y/tools/)
• FrontPage with AccVerify Plug-in
• Reports 508/WAI compliance errors
• Fixes on the spot
• Tidy HTML Cleaner
• Available for most operating systems
• Works nicely in UltraEdit and HTML-Kit

www.webable.com
44
DreamWeaver

• Built in validator
• Accessibility fixing
• Supports W3C WAI WCAG 1.0 and Section 508
• Usability validation service (Usablenet)

www.webable.com
45
Front Page

• AccVerify/AccRepair validation plug-ins
• Found in Custom Menu
• Run Verify on the file(s)
• Supports W3C WAI WCAG 1.0 and Section 508

www.webable.com
46
HoTMetal Pro

• Built in validator
• Accessibility prompting
• Visual Dynamic Keyboard (VDK)
• NewsFlash
• SoftQuad bought by Corel
• Corel has core accessibility team perhaps will
  include HoTMetaL functionality into Corel Suite

www.webable.com
47
Content Management Tools

• Reef Software
• EveryWare 1.0
• Transcoding engine
• Includes accessibility templates (screen reader,
  large text)
• WebABLE licenses the engine to enhance it for
  accessibility
• InternetSuite 3.0 Content Management Suite
• Will include EveryWare engine (available next
  Winter)
• IBM WebSphere
• WBI (prononced, webbie) technology to support
  accessibility transcoding
• IBM partnering with WebABLE to develop the
  transcoding templates
• Availability (likely Summer 2002)
• Others
• Information Architects (RDF-based)
• Vignette

www.webable.com
48
Creating Accessible Streaming Media

• Multimedia -- Provide text descriptions and
  equivalents for visual and audio information
• To include captioning, use MagPie (for streaming
  video/digital multimedia)
• QuickTime and SAMI also create captioned media
• Make sure that the user understands that the
  plug-in is required
• All images on a page need to be described unless
  they are insignificant

www.webable.com
49
About MagPie

• Download from WGBH/NCAM
• (www.wgbh.org/wgbh/pages/ncam/webaccess/magindex.h
  tml)
• PC-based editor for creating captions and
  subtitles for digital multimedia
• Supports media output for the following players
• MS Windows Media
• Apples Quicktime
• RealNetworks Family of Players

www.webable.com
50
MagPie File OutPut Support

• Support for 3 file output types
• W3C's SMIL (Synchronized Multimedia Integration
  Language)
• Microsofts SAMI (Synchronized Accessible Media
  Interchange)
• Apples Quicktime

www.webable.com
51
Entering MagPie Captions

• 3 editing columns
• Timecode, Speaker, Caption
• Create captions by
• Import transcribed text (must be a standard text
  file
• Transcribe own captions

www.webable.com
52
Adobe PDF

• Access Adobe PDF transformation service and
  Plug-In
• (http//access.adobe.com)
• Can create accessible PDF with Acrobat 5.0
• Acrobat includes a new Accessibility Checker
• Can test PDF files with screen readers (Window
  Eyes and Jaws)
• Can transform old PDF to accessible PDF with
  Acrobat Capture

www.webable.com
53
Final Recommendations

• Be sure to test your site with a variety of
  people (clients) with disabilities
• Use the WAI Content Accessibility Guidelines as a
  resource
• Develop templates that increase accessibility and
  are easy to modify

www.webable.com
54
Key Resources

• For Section 508 and Web Accessibility
• Access Board (www.access-board.gov)
• Section 508 Site (www.section508.gov)
• ITTATC (www.ittatc.org)
• W3C/WAI (www.w3c.org/WAI)
• Trace Research (www.trace.wisc.edu)
• NCAM (www.wgbh.org/NCAM)
• WebABLE, Inc. (www.webable.com)
• WebAIM (www.webaim.org)

www.webable.com
55
Summary

• Web accessibility barriers narrowed through
  focused mandates, increased awareness, enhanced
  technology
• The 3 key components to increasing web
  accessibility are Content, Tools, and Users
• Follow the 2-step accessibility design strategy

www.webable.com
56
2-Step Web Accessibility Strategy

• Perform an inspection of your site for HTML 4.0,
  Usability, and Accessibility compliance.
• Prioritize standard/legal compliance and plan a
  staged roll-out of accessibility (Nielsen, pg
  299)
• Enhance home page, critical path pages, and
  high-traffic pages for most important
  accessibility errors.
• Inspect all new pages (create accessible
  templates)
• Enhance medium-traffic pages

www.webable.com
57
Questions Answers

• Thanks for Attending! ?
• Contact me anytime
• paciello_at_webable.com

www.webable.com