Accessible Web Page Design - PowerPoint PPT Presentation

1 / 60
About This Presentation
Title:

Accessible Web Page Design

Description:

Electronic reserves. Course pages. OPACs. Journal Article and Image Databases. Digital Repositories ... For image maps use alt attribute with area ... – PowerPoint PPT presentation

Number of Views:59
Avg rating:3.0/5.0
Slides: 61
Provided by: nor82
Category:
Tags: accessible | design | page | web

less

Transcript and Presenter's Notes

Title: 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.
Write a Comment
User Comments (0)
About PowerShow.com