Before and After Considering Accessibility


Introduction:

This ADE will provide you with a quick introduction to computer accessibility. Since one common experience among all of us is the use of the Web, we will explore website accessibility for practical examples of technology access.

At the end of this ADE, you will have gained some awareness on the issue of accessibility and you should be able to explain why accessibility is important.

Note: This ADE is intended to be completed using Windows.

Note: Please use the alternate version of "Before and After Considering Accessibility" only in circumstances where vision cannot be used.


What to Do:

  1. To begin, please view the "Web Sites That Work!" (QuickTime) video. A captioned version of this video (QuickTime) is also available.  (Local copies are used with permission.)

  2. Using the Mozilla/Firefox browser, explore the "WAI Before and After Demo".
    Note: Side-by-side comparisons using two open browser windows may help you.
    1. Click on the link "Inaccessible Web Site". Visually, each webpage looks like a reasonable website. Explore them, look around.

      On the "Home Page"

      • Turn off the images. Can you still find your way around?

      • Note the use of links labelled "click here". These link texts are quite ambiguous. There is no sense of where they are going. There is no sense that any one link is distinct from another.

      • Change the size of the text to as large as possible. Look around. Reset back to 100%. You may have noticed that some text disappeared when the font size was increased and some disappeared when the font size was restored.

        Try out these exercises on the other webpages.

    2. Click on the link "Accessible Web Site". Visually, each webpage looks exactly like they did before. Explore them, look around.

      On the "Home Page"

      • Turn off the images. Can you still find your way around?

      • Are the link texts still ambiguous? Can you tell one link from another?

      • Change the size of the text to 200%. Look around. Change back to 100%. Does any text disappear?



    Try these exercises on the other webpages.

  3. Instead of using Mozilla/Firefox, use Internet Explorer and try Step 2 again.
  4. Instead of using Mozilla/Firefox, use Chrome (or using any broswer on a smart phone or small tablet) and try Step 2 again


    What to Hand-in:

    Answer the following questions:

    Visually, there are few differences between the "inaccessible" and "accessible" versions of the demonstration websites:

    1. List five (5) things that happened on the "Inaccessible Website" when images were "turned off" in your browser for each of the three browsers you tried
    2. List any differences you foound between using the different browsers
    3. How can designers inadvertently disenfranchise people and what could be done about it
    4. Feedback
      1. What were your expectations of this ADE?
      2. Did this ADE meet your expectations? Provide a rating between 1 and 7, where 1 means not at all, 4 means somewhat, and 7 means absolutely. Please explain your choice.
      3. Did you feel that the video(s) for this ADE was appropriate? Why or why not? Provide a rating between 1 and 7, where 1 means not at all, 4 means somewhat, and 7 means absolutely. Please explain your choice.
      4. Do you have any suggestions for other possible videos?
      5. Did you feel that the questions above got you to think about the real and serious issues regarding this ADE? Provide a rating between 1 and 7, where 1 means not at all, 4 means somewhat, and 7 means absolutely. Please explain your choice.
      6. If you have any suggestions on how to improve this ADE, please include it here.