Retrofitting Web Sites for Accessibility

-- Sarah Brittain and Patricia Anderson

Example Site

Before:

http://web.archive.org/web/20040607092635/www.brown.edu/Divisions/Graduate_School/home/index.php

After:

http://gradschool.brown.edu/

Discussion: http://www.webpagesthatsuck.com/brown.html

Steps in Retrofitting Websites for Accessibility

Overview the Site

Visual Elements

• Layout
• Right-side / left-side navbar
• Table layout vs. div-based layout
• Vertical vs. horizontal layout
• Centering
• Font size - User controlled?
• Text buttons in font or graphics?
• Colors - User controlled?
• Graybit.com; Vischeck.com
• Webdeveloper, by Chris Pederick.

Content Elements to Consider Including

• Accessibility Page
• Skip Tags / Jump to Content
• Contact Information

Elements to Consider Before Including

• Non-text content elements (audio, video, images, animations, etc.)
• Coding elements:
• Tables versus frames
• Scripts, applets
• RSS feeds to page (only with link to source of feed)

More about Multimedia

• For audio or video provide a transcription, text track or captioning.
• TOOL: National Center for Accessible Media (NCAM): Media Access Generator (MAGpie): http://ncam.wgbh.org/webaccess/magpie/

More about RSS Feeds

• How to, period
  • So, What is "Feed to Javascript"?: http://feed2js.org/
  • Other RSS Tools:
  • MAGpie RSS: http://magpierss.sourceforge.net/
  • Yahoo Pipes: http://pipes.yahoo.com/
• How to, accessibly
  • Include link to source of feed.
  • Guidelines and examples at:
    National Center on Disability and Access to Education: Accessibility in the News: http://ncdae.org/rss/
• Read more about this
  • Reading and Subscribing to Blogs Through RSS: How accessible is this world to people with vision loss? http://www.afb.org/Section.asp?SectionID=57&TopicID=167&DocumentID=2916
  • Government Information Locator Service (GILS): RSS Workshop: http://rssgov.com/rssworkshop.html

Checklists Etc.

• National Center on Disability & Access to Education (NCDAE): NCDAE Tips & Tools: Principles of Accessible Design: http://ncdae.org/tools/factsheets/principles.cfm
• UW-Madison Web Accessibility Checklist: http://helpdesk.wisc.edu/accessibility/checklist.php

Process Elements

• Define vision, message, standards to be followed, target audience, etc.
• Prioritize functions desired.
• "Blink" -- look over the site quickly with accessibility and usability in mind.
• Detailed look
  Read, try to actually use the site, and consider readability test or evaluation. Note items of concern.
• Test with tools
• Test with people. Close coupled testing (Bruce Tognazzini) [Find what's broken, fix it; find what's broken, fix it; ... repeat.] or "Guerilla Testing".
• Prioritize problems
• Prioritize solutions
• Rebuild what's quick, easy, or inexpensive first.
• REPEAT

Examples

• Let's Face It
• LFI Original
• LFI Now

Test Site With Tools

• What is WCAG?
• World Wide Web Consortium (W3C): Web Content Accessibility Guidelines 2.0 (WCAG): http://www.w3.org/TR/WCAG20/
• JimThatcher.com: Side by Side 508 and WCAG 2.0: http://www.jimthatcher.com/sidebyside.htm
• Web Standards Project: Interview with Judy Brewer and the WCAG Working Group (Jared Smith): http://www.webstandards.org/learn/articles/askw3c/may2007/
• Working with Watchfire:
  • WebXACT: http://webxact.watchfire.com/
• Validators and More
• The W3C Markup Validation Service: http://validator.w3.org/

Test Site With People

• Irish National Disability Authority IT Accessibility Guidelines: http://accessit.nda.ie/about_user_testing.html
• Jakob Nielsen's Alertbox, March 19, 2000: Why You Only Need to Test With 5 Users: http://www.useit.com/alertbox/20000319.html
• Jakob Nielsen's Alertbox, August 5, 2001: First Rule of Usability? Don't Listen to Users: http://www.useit.com/alertbox/20010805.html
• READ MORE
  • Human Factors International. UI Design Newsletter: http://www.humanfactors.com/downloads/usability-newsletter.asp
  • Measuring Usability: http://www.measuringusability.com/ [Includes Sample Size Calculator for Discovering Problems in a User Interface Oct. 2006]
  • Usability.gov: http://usability.gov/ [1. "Plan, Analyse, Design, Test & Refine"; 2. Online book has chapter on usability testing (PDF), giving level so evidence for each type of testing modality.]
  • Usability SIG Newsletter: http://www.stcsig.org/usability/newsletter/index.html. [Barnum, Carol M. "What's in a Number?" http://www.stcsig.org/usability/newsletter/0301-number.html]
  • W3C: On the Number of Usability Test Participants: http://www.w3.org/WAI/EO/Drafts/UCD/ut.html

Code with CSS

• CSS Resources:
• A List Apart: http://www.alistapart.com/
• BrainJar: http://www.brainjar.com/
• CSS Vault: http://www.cssvault.com/
• CSS Zen Garden: http://www.csszengarden.com/
• Max Design: http://css.maxdesign.com.au/
• Position is Everything: http://www.positioniseverything.net/
• SitePoint: http://www.sitepoint.com/subcat/90/
• W3C: Cascading Style Sheets: http://www.w3.org/Style/CSS/
• WestCiv: Stylemaster CSS Editor: http://www.westciv.com/style_master/
and CSS Tutorial: http://westciv.com/style_master/house/index.html
• CSS Blogs
  • 456 Berea Street: http://www.456bereastreet.com/
  • Eric Meyer: http://www.meyerweb.com/
  • Mezzoblue: http://www.mezzoblue.com/
  • Web Standards Project: http://webstandards.org/
  • WestCiv: Redemption Through Standards: http://blogs.westciv.com/standards/
• CSS for Site Layout
• Yahoo: Grids: http://developer.yahoo.com/yui/grids/
• Yahoo: Menus: http://developer.yahoo.com/yui/menu/
• Yahoo: User Interface Library: http://developer.yahoo.com/yui/
• CSS Disabled
• Is your CSS perfect? How do browsers handle invalid CSS? Take the ACID2 test.
  Web Standards Project: ACID2 Test: http://www.webstandards.org/action/acid2
• CSS Naked Day: http://naked.dustindiaz.com/
• WHY: "How structured is your page? Do you have the guts to show it all off? I do! So, once again, I'm participating in CSS Naked Day. Why am I doing this? Well, everyone knows that I'm a proponent of Web Standards and Accessibility. I also have some pretty good CSS skills. One thing I've found is that a strong HTML structure supports all these things. So I'm not afraid to take it all off. I'm proud of my 'structure'." Sandy Clark

READ MORE

• Dive Into Accessibility, 30 days to a more accessible web site (Mark Pilgrim, 2002): http://diveintoaccessibility.org/
• Equal Access to Software and Information (EASI): Science and Math Resources, Accessible IT Through Podcasts, Webinars and Online Courses: http://www.rit.edu/%7Eeasi/easisem.htm
• National Center for Accessible Information Technology in Education (AccessIT): http://www.washington.edu/accessit/index.php
• National Center on Disability & Access to Education (NCDAE): http://ncdae.org/
• UK Disability Rights Commission: The Web, Access and Inclusion for Disabled People (4/04): http://www.drc-gb.org/publicationsandreports/2.pdf
• Web Accessibility for Health Websites / by P. F. Anderson: http://www-personal.umich.edu/~pfa/pro/accessibility.html
• WebAIM (Accessibility In Mind): Techniques and Concepts: http://www.webaim.org/techniques/
• World Wide Web Consortium (W3C): Web Content Accessibility Guidelines 2.0 (WCAG): http://www.w3.org/TR/WCAG20/

Tools for Website Accessibility

Highlighted in Class | Code Testing and Validation | Color and Vision Checking | Conversion | Other Tools

Highlighted in Class:

• Chris Pederick: Web Developer Extension: http://chrispederick.com/work/webdeveloper/
• Freedom Scientific: JAWS (download, $): http://www.freedomscientific.com/fs_downloads/jaws.asp
• Graybit (color contrast simulator): http://www.graybit.com/
• IBM Home Page Reader (download, $): http://www-3.ibm.com/able/hpr.html
• MozDev.org: Welcome to the Accessibar Project: http://accessibar.mozdev.org/
• SourceForge.net: Fangs - Screen Reader Emulator: http://sourceforge.net/projects/fangs
• University of Illinois at Urbana/Champaign: Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES): Accessibility Extensions for Mozilla/Firefox: http://cita.rehab.uiuc.edu/software/mozilla/index.php
• Vischeck (color blindness simulator): http://www.vischeck.com/
• Watchfire: WebXact: http://webxact.watchfire.com/

Code Testing and Validation Tools

• A-Prompt (download, $): http://aprompt.snow.utoronto.ca/
• Cynthia Says: http://cynthia.contentquality.com/
• Tech Dis: UsableNet: Online Accessibility Tool (LIFT Online): The UsableNet (LIFT) On-line Web Accessibility Tool: http://www.techdis.ac.uk/usablenet/
• STEP508 Tool: http://www.section508.gov/step/
• W3C Markup Validator: http://validator.w3.org/
• W3C Checklink: http://validator.w3.org/checklink/
• W3C: Quality Assurance: QA Toolbox: Validators: http://www.w3.org/QA/Tools/#validators
• WebAIM: WAVE: http://wave.webaim.org/

Color and Vision Checking Tools:

• BT Exact: Safe Web Colours for Colour-Deficient Vision: http://more.btexact.com/people/rigdence/colours/
• Colorblind Web Page Filter: http://colorfilter.wickline.org/
• Color Schemer Online v.2: http://www.colorschemer.com/online.html
• Lynda.com (Lynda Weinman): Non-Dithering Colors by Hue: http://www.lynda.com/hexh.html
• Lynda.com (Lynda Weinman): Non-Dithering Colors by Value: http://www.lynda.com/hexv.html
• O'Reilly: Color Name Samples: http://www.oreilly.com/catalog/wdnut/excerpt/color_names.html
• Thrifty Web Sites: Colour Safe Palette: Colours and textures for your web page designs: http://www.thriftywebsites.co.uk/palette.htm

Conversion Tool:

• RustyParts.com: HTML To PDF Conversion (HTML_ToPDF): http://www.rustyparts.com/pdf.php

Other Tools

• BBC: Education: About Betsie: BBC Education Text to Speech Internet Enhancer (BETSIE): http://www.bbc.co.uk/education/betsie/
• P. F. Anderson: Evaluation Tool for Patient-Oriented Web Sites: http://www-personal.umich.edu/~pfa/pro/courses/EvalPtEd.pdf
• P. F. Anderson: Evaluation Tool for Clinician-Oriented Web Sites: http://www-personal.umich.edu/~pfa/pro/courses/EvalClin.pdf
• Web Page Backward Compatibility Viewer: http://www.delorie.com/web/wpbcv.html

The End

Want to find more resources? Look here:
Web Accessibility for Health websites: http://www-personal.umich.edu/~pfa/pro/accessibility.html

Don't forget the course evaluation! Enriching Scholarship

(c)1995-2006, P. F. Anderson, pfa@umich.edu, all text, images, code, etcetera. Please request permission. Last Update: Wednesday, 09-May-2007 19:56:52 EDT
URL of current page: http://www-personal.umich.edu/~pfa/pro/retrofit.html