No Student Left Behind:

1
No Student Left Behind

• Increasing Website Usability for All

2
Presented by Cath Stager-KilcommonsAssistive
Technology Resource Center (ATRC), Department of
Occupational Therapy,College of Applied Humans
Sciences
3
Workshop Objectives

• 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
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.

5
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.

6
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.

7
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.

8
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 .

9
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

10
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.

11
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.

12
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.

13
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.

14
C.S.U. Quick Tips 1. Page Organization
15
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

16
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

17
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

18
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/

19
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

20
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

21
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.

22
C.S.U. Quicktips 2. Hypertext Links and Image
Maps
23
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

24
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.

25
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

26
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

27
Named anchor in DreamWeaver
28
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.

29
C.S.U. Quicktips 3. Graphics
30
Graphics Requirements a. Use alt attribute to
describe all graphics.

• HTML code 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.

31
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" hspace100 vspace10
  altgt
• Tip use a nonsense string e.g. zxzxzx, and then
  use Search and Replace to replace it with the
  empty tag.

32
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.

33
C.S.U. Quicktips - 4. Multi-Media
34
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.

35
C.S.U. Quicktips 5. Plug-ins, PDF and other
Applications Requirements
36
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).

37
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/

38
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.

39
C.S.U. Quicktips 6. Online Forms Requirements
40
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.

41
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.

42
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.

43
C.S.U. Quicktips-7. Scripting Language
Requirements
44
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!
  

45
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 expec!

46
C.S.U. Quicktips-8. Test Your Work
47

• 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
48
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.

49
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).
50
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/

51
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 when scripting is disabled your page
  is still be completely usable.
• Test your page for accessibility.

52
For More Information and Resources

• ATRC
• (Assistive Technology Resource Center)
• Marla Roll, Director
• Marla.Roll_at_ColoState.edu
• Phone [phone]
• Cath.Stager-Kilcommons_at_ColoState.edu
• Phone [phone]
• WWW http//www.colostate.edu/Depts/ATRC/