Web Programming for Non-Programmers

DCI 110

Winter 2019

Credits: 4

Requirements Met: SC, DCI Minor Core Elective

GitHub Site: https://github.com/dci110w19

Class Meeting Metadata
Meets: M
W (lab)
2:45 - 4:15pm
3:15 - 4:45pm
2:45 - 4:15pm
Classroom: CGL 212
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 11:00 - 12:00
T 11:00 - 12:00
W 1:00 - 2:00
Or by appointment

Exercise #3: Assessing Accessibility50 points

Due Tuesday, March 26 @ 11:55pm


It's easy for us to take for granted that we receive the fully intended experience of a web site. But, consider what would the web would be like if:

  • You couldn't see it due to: Color contrast, Color blindness, Complete blindness
  • You couldn't hear media playing due to: Difficulty distinguishing sound, Complete deafness
  • You couldn't navigate it easily due to: Motor deficiency reduces or eliminates use of a mouse, touchpad, or touchscreen; You needed additional time to react
  • You couldn't easily understand it due to: Easily distracted, Cognitive difficulties

Web technologies allow developers to provide equivalent alternate ability. Some of the pieces that scratch the surface:

  • alt attributes on images
  • Semantic tags in HTML
  • Tags like section, header, footer, article, etc.
  • Ensuring heading tags h1 - h6 are in the proper order
  • Closed captioning on videos
  • Transcripts for audio and video

Smaller organizations often lack resources for accessibility testing, and they often rely on fully capable designers/developers to check for compatibility. There is no perfect solution or magic pill — only diligence and awareness. Regardless of the resources an organization has, it is still the law in the US to make efforts to be compliant. There are some additional tools available to test sites:

  • Screen Readers — Software that reads aloud what is on the screen to help those with visual impairment to navigate what's available
    • ChromeVox — Extension for the Chrome browser that reads the screen and allows keyboard-only navigation
    • MacOS has a similar tool called "VoiceOver" that performs the same tasks in the entire operating system, not just in Chrome.
    • Windows 10 has a similar tool to VoiceOver called "Narrator".
  • Site Analyzers &mdash Websites that scan your HTML and CSS to check for accessibility issues such as improper or missing tags/attributes and for poor color contrast. They aren't perfect, but they provide insight into common problems.

This assignment is two-fold. First, your project group will perform an analysis of the quality of accessibility of various web sites. Then, you will re-examine the HTML and CSS that your team submitted for Deliverable #3 and improve the accessibility features of those pages.

Steps to Complete the Assignment

  1. Get together in your project groups. You will complete and submit this assignment together.
  2. Visit the Accessibility folder under "Resources" in Sakai. Read the two articles available and the information about ChromeVox.
  3. Download and install ChromeVox. If you regularly use another browser, you'll need to use Chrome for this assignment.
  4. View the following websites' home pages and a few of each one's underlying pages:
    1. Lexington Tourism (https://lexingtonvirginia.com)
    2. Staunton Tourism (https://visitstaunton.com/)
    3. Harrisonburg Tourism (https://www.visitharrisonburgva.com/)
    4. Roanoke Tourism (https://www.visitroanokeva.com/)
  5. Without the use of any additional tools, assess how accessible each site seems to be.
    • What issues might occur?
    • Have they done anything outwardly to indicate that their site is accessible?
    • Is there media that someone who cannot see or hear will not be able to access?
    • What are the font and color choices? Are they easily readable?
    • Does the labeling of menu items and links accurately describe what is on the pages that they take you to?
    • Add any additional observations your group makes
  6. Now attempt to navigate the home page of each site using ChromeVox.
    • Was the order of navigation logical?
    • Were the links read out accurately to what is seen on the screen?
    • What happened with media?
    • Add any additional observations your group makes
  7. Run each site through the various site analysis tools.
    • What errors did each site report? Did the different tools report different problems?
    • What issues with color contrast were reported?
    • Add any additional observations your group makes
  8. Rank the four sites from best to worst for accessibility and provide your reasoning for this ranking. What could each site do to improve its accessibility?
  9. Having seen the issues that these sites faced, revisit your own group's HTML/CSS and make improvements. Check the navigation of your site using ChromeVox, and test your pages using the site analysis tools.
  10. Describe your testing results and what changes you made based on those results.
  11. Submit the report (see Expectations below) of your findings and analysis to Sakai under "Exercise #3". Only one submission is required per group.


Your group will submit a 750 - 1,000 word report based on your analysis of the four tourism sites as well as the changes made to your own site as a result of testing.

Grading Specifications

You will be graded on:

  1. Thoroughness of your analysis of the tourism sites
  2. Quality of your reflection upon changes needed for your group's site

The lab will begin with a full score of 50 points and deductions will be made according to the amount and severity of errors.