Required Preparation

• Read three sections of Introduction to Web Accessibility “Introduction”, “People with Disabilities on the Web”,  and “Principles of Accessible Design”
• Watch the two videos in the section “People with Disabilities on the Web”

Overview

Most accessibility barriers on the web can be fixed easily if developers keep good, universal design principles in mind from the beginning and test their pages early and often.  The key word to keep in mind is “flexibility”!  Users of your website should be able to increase the size of the font, change the colors (by overriding your stylesheet), and display the page on different sizes of screens. They should also be able to get key information in multiple ways, such as having “alt” tags for images or a transcript for audio content.  

The last thing you want to hear, after you have developed a whole website is that your pages have major issues with color contrast, document structure, empty links, or text size.  Going back to edit a large site is daunting, but thinking ahead and developing an accessible, generally usable site from the beginning takes just a little planning and a few consistent practices.  And, as the first video points out, making sites that present information in a multiple formats and can adjust size and layout to meet the needs of users with sensory or motor limitations often also means that it can adapt gracefully to different sizes of screens, including smart phones.  

In general, I recommend that you test your pages as soon as you have something deployed to Heroku, even if it is only “Hello, World!” and keep testing them every time you make a major change that impacts how the pages look or function.  If you are following good web design principles, most of the appearance should be driven by the CSS style sheets, and you will be using templates and partials (covered in a couple of assignments) to create consistent views. This will reduce the number of places where you will need to make a correction if you find one, and once a fix has been made it, will improve multiple pages.  

If you cannot get your full website deployed for some technical reason, create a mock up page that you can get uploaded to a web server and use that for accessibility testing.

Resources

• Introduction to Web Accessibility by WebAIM
• WAVE Web Accessibility Evaluation Tool
• Making  Your Website Accessible by W3C
• Designing for Accessibility
• Designing Accessible Color Systems by Daryl Koopersmith and Wilson Miner on Stripe (technical)
• Colorblinding Chrome Extension

What to Do

1. Your website must have a coherent purpose as well as coherent and attractive look and feel.  The entire website must have a consistent navigation bar or system.  It may have some errors (such as broken links), but you should be obviously working toward a functional website that you would show a prospective employer or grad school admissions committee as evidence of what you can do.
2. Access the Wave Web Accessibility Evaluation Tool
3. Using at least one of your individual project’s pages, enter the web page address
4. Review the report and identify all errors (the red flags) and the alerts (yellow flags) and fix the code that generated these errors and alerts, if possible.  
5. Also, in the summary, you should receive a report regarding any contrast errors.  Make a note of the current color values. As you review the summary, you can lighten and darken the colors until they pass the AA and AAA standards.  Make note of the new values. Consider changing your style sheet to these new values or making other adjustments to improve the color contrast ratios.  

What to Hand In

Submit a document that includes:

1. The URLs of the web pages you submitted to the evaluation website.  
2. List the errors it found for each page
3. List the alerts it found for each page
4. Explain how you fixed your pages to eliminate these errors and alerts
5. Did you have color contrast warnings?  If you adjust the colors to pass the standards, what are the new values? 
6. Based on your reading, what potential barriers might not be flagged by an online tool such as this one? 

Scoring Rubric (10 Points)

1. List the URLs of the pages checked 
2. List the errors the Wave Web Accessibility Evaluation Tool identified for each page
3. List the alerts it found for each page
4. Explain how you fixed the pages to eliminate these errors and alerts
5. Identify color contrast warnings, if any, and how they should be fiexed
6. Considers what potential barriers might not be flagged by an online tool such as this one
7. Can a user tab to all links without using the mouse?
8. Can the font be resized?
9. Can the size of the page be changed?
10. Is it looking like a real, polished website?