This week we delve into the topic of Web accessibility. When we design Web pages or other digital learning materials we should be prepared to make them accessible for people who have disabilities. It is not always possible to make all things accessible to all people at all times. However, we can use practices in our Web page design that make them accessible to as many people as possible.
The external style sheets that we have been creating allow us to separate content from appearance. This type of design makes Web pages far more accessible than the old-fashioned table layouts that were common for many years and are still used by some. With the external CSS page we can turn off the styles and still have a page of content that makes sense. We can also enhance the XHTML with code that will make it easier to access the content. These are things that you will see integrated throughout the semester.
The project this week is to create a hotlinks page on Web accessibility. In this assignment, you will investigate some aspect of this topic and craft an information page with links to resources or tools that are found on the Internet. Web accessibility is complex, but I hope you find it interesting. The following resources have been collected to help you begin exploring the topic.
Accessibility Hot Links Page Project (75 Points)
In this project you will create an information page with hot links to resources on the topic of Web Accessibility. The example page provides a section to explain what Web accessibility is with links to additional information. This is followed by two groups of links that can be used to 1) test Web pages for accessibility or 2) provide tools related to Web page design for people with color blindness. (Please note the person-first language. In other words, write “people with color-blindness” rather than “color-blind people.”)
- The overall topic for this project is Web accessibility. However, that broad topic can be subdivided into many related subtopics. What I would like for you to do is select some aspect of Web accessibility and develop an informational hotlinks page. Think of this like selecting an area of emphasis in Web accessibility. In other words, you don’t have to study the entire field, just a focused piece of it. Some possible areas of emphasis that you might choose from are:
- screen readers
- accessibility features in Web browsers
- accessible Web page authoring tools (including Dreamweaver)
- assistive technology used to browse the Internet
- online website evaluation tools (automatic tools)
- online check lists for manual review of websites (done by humans)
- online simulations that demonstrate what it is like for people with disabilities to browse the Web
- using alternative input devices when browsing the Web (e.g. assistive keyboard, mouse, etc.)
- your choice: Select a topic on some facet of Web accessibility not listed above (Check with me if you are not sure about it.)
- After you have selected a topic then start to look for information on the Internet. You might want to begin with the links in the introduction section of this page. Another way to begin is to do a Google search for Web accessibility and start browsing the results to look for information.
- Collect a set of links to resources that pertain to your selected topic.
- In Dreamweaver, create a new Web page called accessibility.html. Save this page in the 502 folder for your website. Please create your page and CSS style sheet from scratch. You can use the example for ideas, but please do not copy and paste from my example to your own project.
- Create a new external CSS page called accessibility.css and save it in the styles folder as we have done in previous assignments. Link the external style sheet to the head section of the XHTML code in your accessibility.html page.
- Content requirements for the project:
- Page title
- Your name
- Learner description
- Information block to explain the topic of your hot links page (In the example this is the What is Web Accessibility? section) Your section will have a title that matches your own topic.
- One or more categories of resource links that pertain to your topic. The example has two sections: Accessibility Evaluation Tools and Color and Contrast Tools. The categorized hot links should have an introduction and each link should include a text annotation.
- Links to five or more websites that match your topic. These resources should not be part of your own site. These are external links to sites found on the Internet. Add a one or two sentence annotation to each link to explain what the link opens.
- Footer section with copyright, date, and name.
- XHTML requirements: In addition to the necessary tags required to create any Web page (e.g., html, head, body, etc.) The XHTML in your accessibility.html page should include a minimum of the following:
- page title text between the <title></title> tags
- 5 or more absolute links to external websites
- at least one named anchor link that jumps users to another part of the page. In the example there are links at the top and also one at the bottom of the page that do this.
- div tags to structure the content of the page. You can write these as needed to make your page usable without a style sheet and attractive with one applied.
- heading tags for title and subsections. Use h1 for title, then h2 for subsections. If you subdivide within subsections use h3, then h4, etc.
- link to external style sheet in the head section (Try to avoid using embedded or inline styles).
- CSS requirements: The CSS in your external style sheet should include a minimum of the following
- body, heading, color, and text styles of your choosing (Make your page pretty)
- hyperlink styles: a:link, a:visited, a:focus, a:hover, a:active (see page 146 of the HTML book)
- Your page should be attractive and adhere to the design principles in the Non-Designer’s Web Book.
- Save and upload both the accessibility.html and the accessibility.css pages to the EDTECH2 server. Try typing the address to your page to open it from the server. Your page should have an address similar to the instructor example. However, the snelsonc part of the URL will be changed to your own user name (typically last name and first initial).
- Validate your XHTML. http://validator.w3.org/
- Validate your CSS code with the W3C CSS Validation Service at: http://jigsaw.w3.org/css-validator/
- Use the W3C Link Checker tool to see if any of your external links are broken. http://validator.w3.org/checklink This tool can save a lot of time when you have a long list of external links on a page.
- Use either the Cynthia Says (http://www.contentquality.com/)or WAVE (http://wave.webaim.org/) or both to test to check your Web page for accessibility compliance. You might also try out the Dreamweaver accessibility checker and examine the report it produces.
- Correct any problems with the code or accessibility of the site. Dreamweaver produces a report that may have items you cannot fix, but your page should pass either Cynthia Says or WAVE tests.
- I would suggest spell checking your page. Click the Commands menu then Check Spelling.
- If you make any additional changes, please be sure to save your pages and upload them to the EDTECH2 server.
- Open your 502.html page and create a link to the accessibility.html page.
- Post 502.html URL on the Assignment 5 Showcase discussion board to share with the class.