Accessible Web Page Design

1
Accessible Web Page DesignMaking Libraries
AccessibleIts the right thing to do

• WNY ACRL Fall Conference
• The Evolving LibraryExpressing Ourselves With
  Technology
• October 15, 2004
• Nora Dimmock and Terry Martin

2
Accessible Web Page Design

• Proliferation of online library services and
  resources
• Need for accessible web pages
• Web Standards
• W3C/WCAG 1.0 Guidelines
• Free Validation Tools and Other Resources
• Quick checklist for accessibility

3
Proliferation of online library services and
resources
4
Online Library Resources

• Web pages
• Subject guides
• Electronic reserves
• Course pages
• OPACs
• Journal Article and Image Databases
• Digital Repositories

• Government Documents
• Online/e-journals
• Statistical Resources
• Community Information
• Course Management Software

5
Librarians Growing Skill Set

• HTML
• XML
• FRBR
• D-SPACE
• SQL
• COLDFUSION
• STREAMED AUDIO AND VIDEO
• SMIL

6
Knowledge of HTML is Essential

• The WWW was designed to be accessible
• "The power of the Web is in its universality.
  Access by everyone regardless of disability is an
  essential aspect."
• Tim Berners-Lee, W3C Director

7
Need for accessible web pages
8
9 of College students have a disability
National council on education annual survey of
college freshman http//www.heath.gwu.edu/PDFs/col
legefreshmen.pdf
9
Americans With Disabilities Act

• The Americans with Disabilities Act of 1970
  prohibits discrimination based on disability in
  both public and private institutions and protects
  the civil rights of disabled individuals.
• Section 504 of the Rehabilitation Act states that
  "no qualified individual with a disability in the
  United States shall be excluded from, denied the
  benefits of, or be subjected to discrimination
  under" any program or activity that receives
  Federal financial assistance- this includes most
  Colleges and Universities.

10
Americans with Disabilities Act of 1990

• census data, national polls, and other studies
  have documented that people with disabilities, as
  a group, occupy an inferior status in our
  society, and are severely disadvantaged socially,
  vocationally, economically, and educationally
• the continuing existence of unfair and
  unnecessary discrimination and prejudice denies
  people with disabilities the opportunity to
  compete on an equal basis and to pursue those
  opportunities for which our free society is
  justifiably famous
• http//www.usdoj.gov/crt/ada/statute.html

11
Canadian Legislation

• Every individual is equal before and under the
  law and has the right to the equal protection and
  equal benefit of the law without discrimination
  and, in particular, without discrimination based
  on race, national or ethnic origin, colour,
  religion, sex, age or mental or physical
  disability.
• The Canadian Charter of Rights and Freedoms.
• http//canada.justice.gc.ca/Loireg/charte/const_en
  .html

12
Web Standards
13
Federal Web Standards

• CLF (Common Look and Feel) adopted by the GoC for
  Canadian Government Websites gives 7 guidelines
  for design including accessibility.
• http//www.cio-dpi.gc.ca/clf-nsi/index_e.asp
• Section 508I of the Rehabilitation Act of the
  Americans with Disabilities Act focuses on
  website accessibility for U.S. Government
  websites and is based on W3C/WCAIG 1.0
• http//www.access-board.gov/sec508/508standards.ht
  m

14
W3C/WCAG 1.0

• Web Content Accessibility Guidelines from the WWW
  Consortium.
• a reference document for accessibility
  principles and design ideas
• Less restrictive than 508I standards but fairly
  comparable
• Most widely used Standards
• http//www.w3.org/TR/WCAG10/

15
W3C/WCAG 1.0 Guidelines
16
Guideline 1

• Provide equivalent alternatives to auditory and
  visual content
• Use ltaltgt tags for IMG, INPUT, and APPLET
  elements
• Use ltlongdescgt for complex descriptions
• For image maps use ltaltgt attribute with ltareagt
• Use synchronized audio description and captioning
  with multimedia content.

17
Guideline 2

• Dont rely on color alone.
• Make sure that information conveyed by color is
  available in markup or context, i.e. surrounded
  by heading tags or surrounded by a border.
• Try printing your site in grayscale and see what
  elements you lose

18
Guideline 3

• Use markup and style sheets and do so properly
• Use ltblockquotegt for quotes only- not for layout
• Use CSS stylesheets to control font, format and
  layout of text elements
• Dont use structural markup for text formatting,
  i.e. use lttext aligncentergt instead of ltcentergt
• Use relative instead of absolute units for
  attribute values in markup and CSS use instead
  of pixels so pages can be viewed on any size
  monitor and resized easily.

19
Guideline 4

• Clarify Natural Language Usage
• Mark up abbreviations and acronyms with the
  following tags ltACRONYM titlegtlt/ACRONYMgt AND
  ltABBR titlegtlt/ABBRgt
• Use the ltspan lang gtlt/spangt to surround quotes
  in other languages
• Declare the language of a document in the html
  tag lthtml langgtlt/htmlgt

20
Guideline 5

• Create Tables that transform gracefully.
• In a data table dont use markup to identify row
  and column information as well as differentiating
  between column headers and data labels.
• If the table is used for formatting dont use
  data table markup for visual effects, i.e. dont
  use the ltTHgt tag to make text centered and bold,
  use style sheets.
• Make sure the table order makes sense- can you
  tab through the information in a logical order?

21
Guideline 6

• Ensure pages using new technologies transform
  gracefully
• Make sure the page is laid out logically and
  makes sense when graphics, stylesheets, etc., are
  turned off.
• Make sure elements that are delivered by dynamic
  content have their alt tags or other important
  text elements updated.

22
Guideline 7

• Ensure user control of time sensitive elements
• Dont create periodically refreshing pages, or if
  you must, allow the user to stop it.
• Allow the user to pause, rewind multimedia
  elements.
• Configure your server to perform redirects- dont
  use scripts to redirect a page.

23
Guideline 8

• Ensure direct accessibility of embedded user
  interfaces.
• Make scripts and applets directly accessible or
  compatible with assistive technologies, i.e.
• Use application-level event triggers rather than
  user interaction-level triggers, i.e. use
  onselect instead of onclick to trigger an
  event.

24
Guideline 9

• Design for device-independence
• Design your pages so any input device can be used
  to navigate dont make it mouse-dependant.
• Navigate your site by keyboard alone- if you can
  do it and it works logically it will work well
  with a screen reading device.

25
Guideline 10

• Use interim accessibility solutions so that
  assistive technologies and older browsers will
  operate correctly
• When adopting new technologies and links be sure
  to check them out on older systems.

26
Guideline 11

• Use W3C technologies and guidelines
• W3C technologies and guidelines have
  accessibility built in.
• HTML, XML and CSS are examples of the most common
  W3C technologies
• When using non-W3C technologies make sure they
  transform gracefully.

27
Guideline 12

• Provide Context and Orientation Information
• Title frames and tables to orient users
• Chunk information in logical groups
• Label form controls
• ltLABEL for"firstname"gtFirst name
• ltINPUT type"text" id"firstname" tabindex"1"gt
• lt/LABELgt

28
Guideline 13

• Provide clear navigation mechanisms
• Use navigation elements consistently
• Identify the target destination of links
• Use metadata to describe the page.
• Provide a sitemap or table of contents for
  navigational purposes.

29
Guideline 14

• Ensure that documents are clear and simple
• Clear language, logical and simple navigation and
  consistent page layout benefits everyone, but can
  be particularly helpful for users with learning
  disabilities.
• Supplement text with graphics or audio
  presentations only when they will enhance
  comprehension of the page.

30
Free Validation Tools and Other Resources
31
Validation

• Free online tools for validating html pages
• Bobby
• ARTC Accessibility Checker
• Torquemada WebbxTutti
• Site Valet

32
Bobbyhttp//bobby.watchfire.com/bobby/html/en/ind
ex.jsp
33
Bobby
34
ATRC Accessibility Checkerhttp//checker.atrc.uto
ronto.ca/index.html
35
ATRC Accessibility Checker
36
Torquemada WebxTuttihttp//www.webxtutti.it/testa
_en.htm
37
Torquemada WebxTutti
38
Site Valethttp//valet.webthing.com/
39
Site Valet
40
Other Resources

• Opera
• Web browser you can use to check accessibility
  http//www.webaim.org/techniques/articles/opera
• WAVE 3.0
• This one has a repair tool
• http//www.webaim.org/products/

41
Quick Checklist for Accessibility
42
Quick Checks

• Print a copy of your pages in grayscale
• Resize your browsers text size- how does it
  look?
• View your page with graphics turned off- does it
  make sense?
• View your page Style Sheets turned off.
• Tab through your page- is the tab order logical?

43
Now what?Here is where technology(and Terry)
takes over
44
The Technology Plan

• 4 Steps to a Successful Technology Plan
• Laying the Foundation
• Identifying your User
• Putting Together the Technology Plan
• Implementing the Technology Plan

45
Laying the Foundation

• Where do the students with special needs go for
  services?
• Contact the disability coordinator on campus
• Get the facts about the students on your campus
  and their needs- be specific

46
Laying the Foundation

• Find out what the DSS is providing to each of
  these groups, i.e. blind, learning disabled, etc.
• What technology and services are being provided
• What resources are utilized
• Find out specifics who is the contact person for
  equipment or technologies

47
Identifying your Users

• Determine the highest concentration of students
  with disabilities
• Learning disabled students are probably the most
  common
• Pay close attention to blind, visually impaired
  and physically challenged students
• Be aware of deaf and hearing impaired students

48
Identifying your Users

• Other disabilities to be aware of
• Communication problems
• May have technology to assist them in
  communicating
• May not need as much assistance as blind or
  hearing impaired students but still need to be
  considered

49
Identifying your Users

• Gain an understanding of how they access
  computers and information
• What types of tools and services are used to gain
  access to your technology and information?
• What type of technology can be used to address
  the needs of these special users?

50
Putting Together the Technology Plan

• On Campus Resources
• DSS Office
• Students with disabilities

• Off Campus Resources
• Local Advocate Agencies
• Regional and National Groups and associations
• State agencies
• Manufacturers and Vendors
• State rehabilitation agencies
• State Education Department

51
Putting Together the Technology Plan

• Prioritize groups and trouble cases
• What are their most important needs, i.e.
  accessing print material, etc.
• What are the needs of your trouble cases
• What are the needs of the other disabled students

52
Putting Together the Technology Plan

• Call in the Troops- the Vendors
• Get to know the vendors
• See the technology in action- have them
  demonstrate it for you
• Determine what equipment you need
• Ask for a written quote
• Dont forget to calculate in training and support

53
Putting Together the Technology Plan

• Choose your products and services
• Make a wish list
• Come up with a budget
• Locate funding sources
• Re-evaluate your budget
• Order the products and services

54
Implementing the Technology Plan

• Be organized
• Assemble the key people vendors and staff people
• Make sure everyone knows their part
• Install the equipment
• Get the right people trained
• Understand how to get technical support
• Advertise the services

55
Implementing the Technology Plan

• Maintaining the technology and services plan
• The second most important part of the plan and
  often forgotten
• Constantly monitor it to meet student needs- so
  keep meeting students!
• Going through the previous steps will help you
  maintain it
• It will take less time and money in the future

56
Resources

• VOILA Technology, Inc.http//www.webstitute.netE
  mail voila_at_eznet.net
• American Foundation for the Blindhttp//www.afb.o
  rg
• Learning Disabled Associationhttp//www.ldanatl.o
  rg

57
Resources

• Recordings for the Blind Dyslexichttp//www.rfb
  d.org
• Bookshare Programhttp//www.bookshare.org
• National Organization on Disabilityhttp//www.nod
  .org

58
Resources

• Americans with Disabilities Act of 1990
  http//www.usdoj.gov/crt/ada/statute.html
• W3C/WCAG 1.0
• http//www.w3.org/TR/WAI-WEBCONTENT/

59
Works Cited

• Berners-Lee, T. (1997) Web Accessibility
  Initiative Online. Available
  http//www.w3.org/wai Accessed 10th October 2004
• Chisholm, W., Vanderheiden, G. Eds. W3C/WCAG 1.0.
  1999. http//www.w3.org/TR/WAI-WEBCONTENT/

60
Works Cited

• Henderson, C. 2001 College Freshmen with
  Disabilities a Biennial Statistical
  ProfileOnline. Heath Resource Center/ American
  Council on Education 2001. http//www.heath.gwu.ed
  u/PDFs/collegefreshmen.pdf Accessed 5 October
  2004.