No Student Left Behind: - PowerPoint PPT Presentation

1 / 56
About This Presentation
Title:

No Student Left Behind:

Description:

Review the legal mandates affecting accessible web design. ... Example: http://www.winamp.com/player/ Page Organization Suggestions: ... – PowerPoint PPT presentation

Number of Views:181
Avg rating:3.0/5.0
Slides: 57
Provided by: asstivetec
Category:
Tags: behind | left | student | winamp

less

Transcript and Presenter's Notes

Title: No Student Left Behind:


1
No Student Left Behind
  • The new Colorado State UniversityWeb Access
    Policy and
  • Using Quick Tips for Web Site Accessibilityto
    increase website Usability for All

2
Presented by Marla Roll andCath
Stager-KilcommonsAssistive Technology
Resource Center (ATRC), Department of
Occupational Therapy,College of Applied Humans
Sciences
3
Workshop Objectives
  • Learn about the new CSU Web Accessibility Policy
  • Learn what Universal Design is and why use it.
  • Review the legal mandates affecting accessible
    web design.
  • Find out about Colorado State University
    Quicktips and how they can help your web page
    reach more people more effectively.
  • Learn what a web accessibility review is.

4
Evolution of a Web Access Policy for CSU
  • It begins with students.
  • The Assistive Technology Resource Center ( ATRC)
    began receiving complaints about a lack of access
    to web content from students with disabilities.

5
Formation of Web Access Committee
  • The ATRC advisory board appointed a committee to
    begin development of guidelines.
  • Members Kevin Nolan, chair (ACNS), Marla Roll
    and Cath Kilcommons ( ATRC), Dana Hiatt (ADA),
    Rose Kreston and Jackie Charlesworth (Resources
    for Disabled Students), Jill Lenz and Jamie
    Bethel (CVMBS), Lindsey Wess and Erik Meakins
    (Morgan Library), Craig Spooner ( Dept of OT),
    Chris Weller (PR).

6
Next Step changing perspectives
  • Web Access Guidelines were seen as nice but
    optional for web designers.
  • Web Access Committee began development of a
    policy and a push for implementation with the
    assistance of Pat Burns, ACNS.

7
APPROVAL!!!
  • Web Accessibility Policy was approved by ITEC on
    October 29th, 2004.
  • http//accessibility.colostate.edu/policy/webacces
    spolicy.html
  • Remember current and prospective students and
    employees are at the heart of this policy

8
Universal Design
  • The design of products and environments to be
    usable by all people, to the greatest extent
    possible, without the need for adaptation or
    specialized design.
  • e.g. Curbcuts make life easier for everyone.
  • e.g. Suitcases with wheels were designed with
    universal design.
  • REMOVING BARRIERS
  • Ramps provide access to buildings.
  • Adaptive technology provides access to computers.
  • Universal design provides access to the web and
    all the world.

9
Universal Design (cont)
  • Universal, in universal design, does not imply
    one optimal solution for everyone, but rather it
    underscores the need for inherently flexible
    customizable content, assignments, and
    activities.
  •  
  • The principles of universal design for learning
    are
  • multiple representations of information,
  • multiple means of expression,
  • and multiple means of engagement.

10
Universally designed curriculum offers more ways
to do the same things.
  • The same principles that increase understanding
    for students with diverse learning styles and
    needs, help students with disabilities.

11
more ways to do the same things.
  • Something as simple as a paper syllabus, becomes
    an access barrier to students who are blind, and
    to those with dyslexia.
  • The same syllabus in electronic format can be
    read aloud by a computer or screen reader,
    translated into Braille and printed on a Braille
    printer. It can be offered in spoken or written
    translation, and/or with highlighted main points
    and organizational supports.

12
Why use Universal Design?
  • Creating one flexible object that benefits all
    people makes sense.
  • For the web, most aspects of Universal Design are
    simply good web design.
  • What works for different abilities also works for
    different learning styles, and different
    technologies increasing overall usability.
  • 30 million US citizens have disabilities, many
    disabilities are hidden .

13
Examples of Disabilities that Affect Web Access
  • Physical Disabilities arthritis, MS, CP, MD,
    spinal cord injury, repetitive motion injuries,
    seizure disorders, amputations.
  • Auditory Disabilities deafness and hearing
    impairments
  • Visual Disabilities congenital and acquired
    disabilities ranging from low vision to blindness
  • Cognitive Disabilities brain injury, stroke
  • Learning Disabilities Central Processing
    Disorders, ADD, ADHD, Dyslexia, Scotopic
    Sensitivity Syndrome

14
Legal Mandates
  • Americans with Disabilities Act- states, No
    qualified individual with a disability shall, by
    reason of such disability, be excluded from
    participation in or be denied the benefits of the
    services, programs, or activities of a public
    entity, or be subjected to discrimination by any
    such entity.

15
Legal Mandates (cont)
  • Rehabilitation Act, Section 508- Section 508
    states that electronic and information technology
    be developed, procured, maintained, or used by
    the federal government be accessible to people
    with disabilities.

16
Legal Mandates (cont)
  • Telecom Act, Section 255- states, A provider of
    telecommunication services shall ensure that the
    service is accessible to and usable by
    individuals with disabilities, if readily
    achievable.

17
Colorado State University Guidelines
  • Complete guidelines and new policy posted at
  • http//accessibility.colostate.edu/
  • By following these guidelines in the design and
    coding of HTML, the University can insure that we
    have not inadvertently raised access barriers for
    some members of our community. These goals can
    be accomplished without compromising the
    aesthetics and functionality of University web
    pages.

18
C.S.U. Quick Tips 1. Page Organization
19
Page Organization Requirements
a. HTML/XHTML should be used to mark up
content, while design and presentation
should be achieved through style sheets.
  • Use HTML to encode meaning and structure rather
    than the visual presentation and layout. Keep
    the structure clear.
  • Cascading Style Sheets (CSS) allow you to
    customize the presentation without changing the
    web pages content. CSS allows control over the
    style of a hypertext document.
  • How to http//www.webaim.org/techniques/
    http//w3c.org/Style/css/
  • Examples http//www.csszengarden.com

20
Page Organization Requirements b. If
color is used to convey pertinent
information (e.g. a bar chart or an
instruction to click on a blue button), make
sure the information is also available in
another format.
  • Add textual, positional or other cues- Click the
    square blue button or Click the blue button on
    the left.
  • Use asterisks. New information appears in
    red

21
Page Organization Requirements c.
Tables and frames should use titles, headers
and descriptive field names to facilitate
identification and navigation.
  • Title frames with contextual titles (Navigation
    Frame) that will help orient users to purpose.
    The noframes content should indicate what the
    contents of the frames are and provide links to
    individual frame pages if appropriate.
  • Table description can be included in the text of
    the page or should be added through use of the
    displayed CAPTION element and the non-visual
    SUMMARY attribute.
  • How to http//www.webaim.org/techniques/
  • Example http/jobs.colostate.edu

22
Page Organization Suggestions Start with a
text version and then fill in web components.
  • Organize your information and increase your
    usability for all people.
  • If you dont know what you want to say how could
    you make sure the important information is read?
  • Try turning off the graphics on a page to test if
    all pertinent content is still conveyed.
  • Use the Opera (http//www.opera.com) browser to
    do this easily (view gt images gt no
    images)Example http//www.winamp.com/player/

23
Page Organization Suggestions Use consistent
format - layout (templates,
Cascading Style Sheets- CSS), fonts, and "white
space".
  • Consistency allows predictability which leads to
    comfort of use and people re-visiting your page!
  • CSS offers high maintainability for your site,
    quicker loading speeds, and is accessible.
  • How to
  • http//www.w3.org/Style/LieBos2e/enter/
  • http//www.w3c.org/Style/CSS/
  • http//www.jimthatcher.com

24
Page Organization Suggestions Use relative
fonts.
  • Allow users to decide what they can read
    comfortably! Display sizes are changing both
    larger, with better monitors, and smaller, with
    cell phones and PDAs. Use ems or keywords
    rather than pixels.
  • How to
  • http//www.dejeu.com/web/tools/tech/css/variablefo
    ntsizes.asp
  • CSS for Mobile devices
  • http//www.westciv.com/style_master/academy/css_t
    utorial/advanced/mobile_profile.html

25
Page Organization Suggestions Provide good
contrast between background and text colors.
  • Twenty percent of males are colorblind Use high
    contrast. Avoid red or green on brown or gray,
    red and green together.
  • Test what your site would look like at
    http//www.vischeck.com
  • Avoid complex backgrounds many make it hard to
    read the text.
  • Avoid blinking and scrolling text. Do not use
    the BLINK or MARQUEE elements.

26
C.S.U. Quicktips 2. Hypertext Links and Image
Maps
27
Hypertext Link and Image Map Requirements
a. Links should make sense if read out of
context not "click here".
  • Make your links descriptive yet simple Assistive
    Technology Resource Center (ATRC) Home page.
  • Convey the pertinent element in the first word of
    your link, so alphabetized lists make sense
    Research Department rather than Department of
    Research

28
Hypertext Link and Image Map Requirements
b. Use Client-side rather than Server-side
Image maps.
  • Client-side Image maps support alt text tags for
    users who cannot view the image.lta
    href"/world/" title"Designing a More Usable
    World for All" class"homelink"
    id"homelink2"gtltimg src"pics/navbar/navbar_03.gif
    " width"264" height"30" alt"Designing a More
    Usable World" border"0"gtlt/agt
  • For server-side image maps, the client browser
    just sends the coordinates of a mouse click to
    the server where calculations are made and the
    appropriate page sent back to the client. Because
    of this essentially visual (and mouse driven)
    method of selecting a new page, there is no way
    to make server-side image maps accessible.

29
Hypertext Link and Image Map Requirements
c. Image map links need to be duplicated as
text links to ensure accessibility.
  • Text links are accessible to all users and to
    all devices.
  • Consider using the LONGDESC attribute or a d
    link to provide the necessary text links as well
    as to provide a further description of your
    graphic. ltimg src"images/bannerA_640.jpg"
    alt"Assistive Technology Resource Center
    (ATRC)." longdesc"banner.htm" width"640"
    height"141"/gt
  • LONGDESC or a d link links to a separate page
    that generally contains additional information
    about a graphic. The separate page is often very
    simple.
  • http//www.trace.wisc.edu

30
Hypertext Links Suggestions Provide a method
that allows users to skip repetitive navigation
links.
  • Repetitive links refer to links that are listed
    more than one on a page or occur consistantly
    throughout the website.
  • Use a link to an embedded or named anchor
  • lta hrefmain-contentgtSkip navigational
    linkslt/agt . . .
  • . . . lta namemain-contentgtlt/agt
  • http//www.cnn.com

31
Named anchor in DreamWeaver (CTRLALTA)
32
Hypertext Links Suggestions Use large enough
navigation buttons to ensure they are easily read
and manipulated.
  • Try mousing with your non-dominant hand to test
    the ease of use for your links!
  • If you are using a picture of text make sure the
    alt text provides the same information.
  • Ensure that your site can be navigated by the
    keyboard alone - try tabbing through your site.
    Shift tab will go backwards.

33
C.S.U. Quicktips 3. Graphics
34
Graphics Requirements a. Use alt attribute to
describe all graphics.
  • HTML ltIMG SRC"/images/morgan.jpg" altMorgan
    Library Photogt
  • DreamWeaver Select the image. Properties window
    should appear, (or go to Window gtProperties). On
    the bottom right side of window is the word "Alt"
    with a blank text box beneath. Type in the
    alternate text that will appear as a tool tip on
    the web page. Select empty from pull down if
    image does not add to pages content (if image is
    eye-candy).
  • Front Page Right click on an image and select
    properties. Under the General Tab, under
    Alternative representations, is the Text box.
    Fill in alt text here.

35
Content Null Graphics
  • If you have used graphics as spacers, bullets, or
    in other ways that do not give added meaning to
    the page, use an empty Alt tag.
  • ltIMG src"spacer.gif" altgt
  • Tip If your program does not support an empty
    tag, use a nonsense string e.g. zxzxzx, and then
    use Search and Replace to replace it with the
    empty tag.

36
Content Rich Graphics
  • If your graphic cannot be described in less than
    sixty characters, use LONGDESC or one of two
    following strategies
  • D or d Descriptive link- link to a text
    description on a separate HTML page.
    http//colostate.edu/Depts/ATRC
  • WOW (white on white)- include a textual
    description right on the page in the same color
    as your background. It will not distract sighted
    users, nor detract from your overall layout, but
    will be available to screen readers.

37
C.S.U. Quicktips - 4. Multi-Media
38
a. Equivalent alternatives for content
rich (informative vs. decorative) multimedia
presentations should be synchronized with the
presentation. For video, the soundtrack should
be captioned and pertinent video described.
Audio should be captioned and transcribed.
Additional information on accessibility and
multi-media can be found at http//ncam.wgbh.org/
richmedia/.
Multimedia Requirements
  • Remember how heavy multi-media can be. Video
    and Audio create huge files which can create long
    load times.

39
C.S.U. Quicktips 5. Plug-ins, PDF and other
Applications Requirements
40
Plug-ins, PDF and other Applications
Requirements a. When a plug-in, player or
viewer is required to view pertinent web content,
provide a link to download the plug-in. If you
are unsure if the plug-in meets accessibility
standards, provide the information in an
alternative format.
  • Common applications can be made accessible in
    several ways.
  • How to http//www.catea.org/grade/
  • Always alert users if they are going to be
    opening a non-HTML document. Simple text
    statements are appropriate. History Syllabus
    (syllabus.doc).

41
Plug-ins, PDF and other Applications
Requirements b. When using PDFs, also provide
the information in an HTML format.
  • Adobe provides accessibility tools and
    information at http//access.adobe.com/
  • The new Acrobat 7.0 (Standard or Professional)
    has the built-in capacity to export text to HTML!

42
Plug-ins, PDF and other Applications
Requirements c. Information on JAVA
programming applets and accessibility at
http//www.sun.com/access/.
  • Sun has an API (Application Programming
    Interface) that allows a screen reader user to
    access the content of a JAVA application or
    applet if the accessibility factors have been
    included by the programmer.
  • Consider a longdesc or descriptive link if
    content not accessible.

43
C.S.U. Quicktips 6. Online Forms Requirements
44
Online Forms Requirements a. Ensure logical
navigation TAB key should flow sequentially
through form all fields and boxes should be
properly labeled with labels preceding the input
box.
  • Position prompts immediately adjacent to input
    controls.
  • Associates prompts with the corresponding INPUT
    element using the LABEL element with the FOR
    attribute.
  • Be sure to note required fields in a manner that
    does not rely only on color.

45
Online Forms Requirements b. Provide text
alternative or another way for people to
provide the required information.
  • Do not use forms that are presented as images.
  • Provide an email address, a phone number, or some
    other manor to submit the information.

46
Online Forms Requirements c. Use text to alert
users of time restrictions. If the time
restriction cannot be met or extended, provide
users with an alternative.
  • If you have a time limit, be willing to provide
    the information in another manner, whether it be
    by phone or mail or email.
  • If possible, provide users who need it with a way
    to extend the time limit.

47
C.S.U. Quicktips-7. Scripting Language
Requirements
48
Scripting Language Requirements a. Use
HTML/XHTML whenever possible. When scripting is
disabled a page should still be completely
usable.
  • Allow your scripting to be the icing on the cake!
  • Internet Explorer 6.0 has a script blocking
    toolbar that disables JavaScript and Active X
    components.

49
Scripting Language Suggestions When scripts
convey additional information or perform a
function that affects the users interface, a
text description should be provided before the
script executes.
  • Dont start a movie or whisk users off to another
    site without telling them what to expect!

50
C.S.U. Quicktips-8. Test Your Work
51
  • a. View your pages with different browsers, e.g.
    Netscape, Internet Explorer, Safari, Lynx. The
    Opera browser has an Accessibility View which
    shows a helpful text only view of a web page.

Make use of the F12 and CTRL F12 Preview in
Browser feature if you are using DreamWeaver. Try
to see how your page reads on the text browser
LYNX Emulator http//www.delorie.com/web/lynxview.
html, or on the Backwards Compatibility Viewer
http//www.delorie.com/web/wpbcv.html
52
b. See how your page displays using different
operating systems.
  • View your page on a Mac in the Student Center and
    try viewing it on an older Windows machine.

53
c. Check your page against an accessibility
tester such as WAVE (http//wave.webaim.org/inde
x.jsp) or Cynthia Says (http//www.cynthiasays.c
om/ ), or Bobby (http//bobby.watchfire.com).
54
Additional Validation Services and Tools
  • The World Wide Web Consortium (W3c) offers many
    valuable resources including validators for HTML
    and CSShttp//validator.w3.org/
    http//jigsaw.w3.org/css-validator/
  • Lift http//www.useablenet.com/
  • TIDY http//www.aprompt.ca/Tidy/index.html
  • an HTML checker
  • A-Prompt - http//aprompt.snow.utoronto.ca/

55
Summary
  • 95 of most accessibility issues will be
    addressed if you
  • Label all non-text with meaningful Alt tags even
    an empty ALT tag means the graphic has no
    pertinent meaning.
  • Ensure that your page is still completely usable
    without its CSS, JavaScript or FLASH components.
  • Test your page for accessibility.

56
For More Information and Resources
  • ATRC
  • (Assistive Technology Resource Center)
  • Marla Roll, Director
  • Marla.Roll_at_ColoState.edu
  • Phone 970-491-2016
  • Cath.Stager-Kilcommons_at_ColoState.edu
  • Phone 970-491-6258
  • WWW http//www.colostate.edu/Depts/ATRC/
Write a Comment
User Comments (0)
About PowerShow.com