Computational Thinking on the Internet
Chapter 10: Web Accessibility
After completing Chapter 10, you will know how to:
- Define the concept of Web accessibility and list applicable guidelines and standards for making websites accessible.
- List the coding practices you must follow in making a website meet the Web Content Accessibility Guidelines (WCAG).
- Make style sheets follow accessibility guidelines for font selection, character spacing, color, and contrast.
- List the tools you can use to assess the extent to which a site follows Web accessibility standards.
Access to the Internet is vitally important for anyone who plans to participate in the 21st century information economy. So essential is the Web that to be denied access is to become disenfranchised. To help ensure that all Americans have access, the U.S. government has enacted laws mandating that certain accessibility features must be built in to any website that receives public funding or serves constituents of federally funded programs. Because the need is worldwide, the W3C has initiated a Web Accessibility Initiative (WAI) that works with organizations around the world to coordinate efforts to enable all users to access the Web, regardless of disability or special needs. Making the Web truly accessible to everyone is a great challenge, because there are many different kinds of disabilities. This chapter begins by making you aware of guidelines you can follow to make your Web pages accessible. Tutorial exercises will step you through the process of implementing HTML coding practices that bring a website into compliance with federally mandated accessibility standards. Because a website can include many kinds of multimedia documents, however, accessibility goes beyond HTML. In order for a site to be truly accessible, all of its printed, audio, and video formats must also comply with accessibility rules. That is why this chapter will identify multimedia accessibility guidelines that are emerging for non-HTML resources in addition to the HTML pages comprised by the Web. Then the chapter will conclude by providing tools you can use to evaluate the extent to which a website follows the guidelines currently in force.
End of Chapter Labs
Lab Project 10.1: Evaluating Website Accessibility
Imagine that your employer has heard about Web accessibility tools that can automatically scan all of the pages at a website and report violations of Section 508 or WCAG accessibility guidelines. Your employer wants to get one of these tools to help insure that the pages at your school or company website are compliant. The stakes are high because of the federal funding that your organization stands to lose if the site violates the Section 508 rules. Your employer has asked you to recommend which tool your organization should adopt for periodically scanning the site for accessibility violations. Use your word processor to write an essay in which you discuss the alternatives and recommend how your organization should go about evaluating website accessibility. In developing this recommendation, consider the following issues:
- Accessibility Tools. There are dozens of tools for assessing the accessibility of a website. The W3C keeps track of these tools at www.w3.org/WAI/ER/tools. Go there to read the summaries of what these tools do, and make a list of the tools you want to consider. In your essay, list the tools you considered, explain why you chose the tool you decided to recommend, and state the reasons why you rejected the others.
- Authoring Environments. Some of the accessibility tools plug in to work with certain Web development tools. Read the tool summaries at www.w3.org/WAI/ER/tools to find out whether there are accessibility tools that plug in to your organization’s Web development environments. If there are plug-ins for the Web authoring tools used at your site, include them on your list of alternatives to be considered
- Trial Versions. Find out whether trial versions exist for the alternatives you are considering. In your recommendation, consider proposing a trial period during which you test the tool before adopting it for production use at your website.
- Prioritizing Errors. Use the WAVE online service to check some of the Web pages you created while working through this book’s tutorials. This will uncover accessibility issues you need to be aware of. In your essay, mention the kinds of Web accessibility issues that WAVE uncovered and suggest how your organization should go about addressing these issues in your Web designs.
If your instructor asked you to hand in the recommendation, make sure you put your name at the top of the essay, then save it on your computer and follow any other instructions you may have been given for submitting this assignment.
Lab Project 10.2: Web Page Color Blindness Simulator
In this computational thinking module, you will accomplish the following learning objectives:
- Experience how computers can run simulations enabling you to model on your computer how things will work in the real world.
- Gain an appreciation for the problem of color blindness that one out of every twenty users experiences out on the Web today.
- Know how to check your web pages to make sure people who are color blind can view them onscreen.
- Think about how computer models and simulations can impact your own school or workplace or future field or career.
Coblis is a color blindness tool that simulates human vision. The simulation models three kinds of color blindness, namely, Protanopia, which is a red color deficit; Deuteranopia, which is a green color deficit; and Tritanopia, which is a very rare blue color deficit. To run the Coblis simulation and see how your Web page will appear to users with Protanopia, Deuteranopia, or Tritanopia, follow these steps:
- Make a screen grab of the Web page you want to simulate.
- Go to www.color-blindness.com/ and choose the option to run the Coblis color blindness simulator.
- You will see a colorful image sample in the color blindness window. Use the controls to view the sample with Protanopia, Deuteranopia, or Tritanopia, and observe the color differences you will see.
- Drag-and-drop the screen grab you made in step 1 onto the sample image you simulated in step 3. Your screen grab replaces the sample, thereby enabling you to run the simulation on your screen grab.
- To see how the page appears to someone with a green color deficit, use the controls to view how your screen grab appears to users with Deuteranopia.
- Repeat this process for the other two forms of color blindness, namely, Protanopia and Tritanopia. You will probably observe some striking differences. Figure 10-5, for example, shows how the Smithsonian home page appears through the eyes of a user with Deuteranopia. Notice the lack of greens as compared to Figure 10-6, which pictures the original page in full color.
Use a word processor to write a report explaining what you did in this lab. Begin by providing a link to the Web page you chose. Then show four screenshots comparing how that Web page appears to users with (1) normal vision, (2) Protanopia, (3) Deuteranopia, and (4) Tritanopia. Then write a paragraph explaining what you think needs to be done in order to help users with these kinds of color blindness. For example, can you think of Web design principles developers could use when deciding what colors to use on Web pages? Then write another paragraph about the value of having simulation tools like this color blindness simulator. What other simulation tools are you aware of on the Internet? Explain whether and how you use any simulation tools in your own work. If your instructor asked you to hand in this assignment, make sure you put your name at the top, then save it on your computer and follow any other instructions you may have been given for submitting this assignment.
