Course Description
This course provides the student with a foundation in designing accessible web sites, which apply Universal Design concepts to accommodate individuals with visual, auditory, speech, motor control, and cognitive disabilities. Students will design, and test web pages for compliance with accessibility guidelines (such as WCAG 2.0), and legal requirements (such as Section 508). Coding techniques for accessible (X)HTML and CSS are emphasized. Other topics include accessibility issues related to Adobe PDF, Adobe Flash, scripting, mobile devices, and rich media captioning.
Prerequisites
Recommended Textbook(s)
- Thatcher, Jim, Andrew Kirkpatrick, Mark Urban, Bruce Lawson, Shawn Lawton Henry, Michael R. Burks, Cynthia Waddell, Christian Heilmann, Richard Rutter, Bob Regan, and Patrick H. Lauke. Web Accessibility: Web Standards and Regulatory Compliance. Berkeley, CA: Apress, 2006.
- Henry, Shawn Lawton. Just Ask: Integrating Accessibility Throughout Design. Madison, WI: ET\Lawton, 2007.
Recommended Reading
- Hawkes-Lewis, Benjamin. "26: Accessibility testing - Opera Developer Community." Dev.Opera. 26 Sep 2008. Opera Software. 24 Oct 2008.
- Hughes-Croucher, Tom. "25: Accessibility basics: Opera Developer Community." Dev.Opera. 26 Sep 2008. Opera Software. 24 Oct 2008.
- Pilgrim, Mark. "Dive Into Accessibility." Dive Into Accessibility. 2002. 24 Oct 2008.
- Thatcher, Jim. "Web Accessibility - Section 508." JimThatcher.com. 2008. 24 Oct 2008.
- "The Accessibility Institute: How-tos and Demos." The Accessibility Institute. 2008. The University of Texas at Austin. 24 Oct 2008.
- "Web Accessibility 101." Web Accessibility 101: Policy, Standards, and Design Techniques. 2003. University of Wisconsin-Madison. 24 Oct 2008.
Technologies Required
- Students will need their own web server to post their assignments
- Mac or PC computers with internet connection
- Web Browsers (Firefox, Opera, Safari, Internet Explorer)
- Firefox Browser Addons
- Internet Explorer Browser Toolbars
- Web page editor that fosters the development of valid (X)HTML and CSS code
- Screen Reader Demo Software
Note: The Accessibility & PDFs Module requires use of a word processor and Adobe Reader. Optionally, Adobe Acrobat may also be used in this module.
Competencies
The table below contains a list of suggested course topics competencies (learning outcomes) and evaluation methods. This can be used as a guide when you select topics to include in your course.
Topic | Competency | Evaluation Methods |
---|---|---|
Universal Design | Describe principles of universal design |
|
Discuss benefits of universally designed content for everyone |
|
|
Recognize and apply universal design principles in web page design |
|
|
Usability | Define usability |
|
Accessibility | Define accessibility |
|
Identify forms of disability that should be considered when designing accessible web sites |
|
|
Describe national regional and international legal requirements for accessibility for the Web. |
|
|
Explain the business benefits of an accessible web site |
|
|
Describe the WCAG 2.0 POUR Framework (perceivable operable understandable robust) principles of accessibility |
|
|
Assistive Technology |
Describe issues encountered when using screen readers and other assistive technolgogies |
|
XHTML & CSS Accessibility Techniques | Code usable accessible and standards-compliant (X)HTML and CSS markup for the following page design components: headings images tables forms multimedia navigation color and page layout |
|
Describe and apply W3C WCAG or Section 508 recommendations in creating accessible web content |
|
|
Accessibility Testing |
Identify methods of verifying compliance with accessibility guidelines |
|
Utilize assessment tools and techniques to verify the compliance of web content with accessibility guidelines and laws |
|
|
Evaluate the compliance of a web site with accessibility guidelines and laws |
|
|
Accessible Adobe PDF | Describe techniques to provide for accessibility when using Adobe PDF |
|
Create accessible Adobe PDF content |
|
|
Accessible Multimedia | Describe techniques to provide for accessibility when using multimedia such as video audio and Adobe Flash |
|
Explain the benefits of alternate text content including audio transcription video captioning and video descriptions to potentially all individuals |
|
|
Accessible Scripting | Describe techniques to provide for accessibility when using JavaScript |
|
Describe the purpose of ARIA |
|
|
Accessibility and Mobile Devices | Describe barriers common to mobile device users and individuals with disabilities |
|
Identify techniques to provide for accessibility on mobile devices |
|
Assignments
- Accessibility Blog Entry
- Awareness Lab
- Simulation Lab
- Accessible Content Design And Test Lab
- Accessible Data Table Lab Exercises
- Accessible Form Lab Exercise
- Accessibility Test Lab
- Accessibility Evaluation
- PDF Lab
- Discussion Questions
Accessibility Assignment Rubrics
Accessibility Blog Entry
You'll keep a journal of your exploration of accessibility topics in your blog. Note: If you do not already have a blog, either sign up for a free blog on http://blogger.com or http://wordpress.com OR download WordPress from http://wordpress.org and install it on your server (you will need to create an account first at http://wordpress.com).
Use the markup strategies discussed in this course design your own blog template to make your content more accessible. Feel free to modify the design of your blog during the course as you increase your knowledge of accessibility. You should update the blog each week. Each post should be at least 200 words in length and must be in your own words. Be sure to cite all sources.
Below are topics you might explore on your blog:
- Universal Design
- Benefits of Universal Design
- Who benefits from accessible web sites?
- Web Accessibility Initiative recent activities
- WCAG 2.0
- Section 508
- Reflection about the Simulation Lab
- Accessibility assessment of a popular web site
- (X)HTML coding techniques to provide for accessibility
- CSS coding techniques to increase accessibility
- Accessibility techniques for Adobe PDFs
- Accessibility techniques for Adobe Flash and other multimedia
- Scripting techniques to provide for accessibility
- Legal issues related to accessibility
- Accessibility and mobile devices
- Related books, magazines, or podcasts
Recommended: Subscribe to your classmates' blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.
Criteria | Performance Quality | Score | |||
---|---|---|---|---|---|
0 points | 1 point | 2 points | 3 points | ||
Blog Posts (evaluated weekly) | Blog post was not published on time, is poorly written, does not contain content relevant to the course, or does not meet the post length requirement. | Blog post was published on time, contains some spelling and/or grammatical errors, meets the post length requirement, but content is not very relevant to the course, or does not expand upon course topics. | Blog post was published on time, contains no spelling and/or grammatical errors, meets the post length requirement, and the content expands upon course topics. | Blog post is published on time, is very well written with no typos, grammar, or spelling errors, expands upon course topics, and exceeds the minimum post length. Post contains images where relevant to the content, and links to plenty of sources and resources. |
Awareness Lab
In your experience visiting web sites at one time or another you've probably encountered a web page that is difficult or frustrating to use. You also may have noticed web pages with accessibility issues. In this activity you will describe a web page that is either difficult to use of has one or more of the accessibility issues described in the World Wide Access: Accessible Web Design video. Write a one or two paragraphs that include the URL of the web page, the goal of the web site, the target audience of the web site, and three to five sentences about the accessibility and/or usability issues of the page.
Criteria | Performance Quality | Score | ||
---|---|---|---|---|
0 points | 1 point | 2 points | ||
Content | Description was of the website was incomplete or had inaccuracies, or there are three or more grammatical errors. | Content is complete, accurate, and addresses relevant accessibilty/usuabilty issues encountered by the student. There are three or fewer grammatical errors. | Content is complete, accurate and addresses relevant accessibilty/usability issues encountered by the student. There are no grammatical errors. | |
Critical Thinking | Lacking critical thinking or lacking relevance. | Some critical thinking (application, analysis, synthesis, and evaluation) evident. | Clear evidence of critical thinking (application, analysis, synthesis, and evaluation). |
Simulation Lab
Complete one of the simulations listed below. Take notes about your experiences during the simulation because you will be writing a few paragraphs about your experiences. Also identify ways that the design of the site could be improved to create a better experience for all users.
- WebAim Screen Reader Simulation
Can you complete the tasks using the screen reader? If you need a hint or two, "i" will give you a peek at the web page screen shot. Don't be surprised if you get a little frustrated during this simulation — think of how it would be to always access the Web in this manner!
http://www.webaim.org/simulations/screenreader
OR
- Low Vision Simulation
http://www.webaim.org/simulations/lowvis.html
OR
- Mobility Impairment Simulation
In this simulation you will gain an understanding of limitations of computer use for people with limited use of their hands. Some people must rely on a mouthstick or a single finger for computer input.
- Choose a web site to try out.
- Place your mouse where you cannot reach it.
- Use one finger on the the keyboard to navigate a web site. Use the tab, page up, page down, and enter keys.
For all simulations:
Include the following information in your report.
- List the simulation option you completed.
- If you completed the Mobility Impairment Simulation, copy and paste the URL of the web site you visited.
- Write a few paragraphs about your experiences using the simulation. Describe any surprises you encountered or frustrations that you felt.
- Suggest three ways that the design of the web pages could be improved.
Criteria | Performance Quality | Score | ||
---|---|---|---|---|
0 point | 1 point | 2 points | ||
Content | Description of the simulation was incomplete or had inaccuracies, or there are five or more grammatical errors. | Content is complete, accurate, and addresses the surprises or frustrations encountered by the student. There are three or more grammatical errors. | Content is complete, accurate and and addresses the surprises or frustrations encountered by the student. There are no grammatical errors. | |
Critical Thinking | Lacking critical thinking. Three relevant recommendations for improvement were not provided. | Some critical thinking (application, analysis, synthesis, and evaluation) evident. Three relevant recommendations for improvement were provided. | Clear evidence of critical thinking (application, analysis, synthesis, and evaluation). Three relevant recommendations for improvement were provided. |
Accessible Content Design and Test Lab
Create a web page with accessible content and accessible navigation. Verify your skills when you test your page with an online accessibility testing tool.
Create a Web Page
Create a web page document about ONE of the following topics:
- accessibility
- web design
- a hobby
- a vacation destination
- your resume
The page must include the following components:
- a navigation area with five hyperlinks
- at least one paragraph
- one h1 element
- at least one h2 element
- an unordered list
- at least one image
- The CSS page layout should be centered with two columns and take up no more than 80% of the browser window.
Your document must use valid (X)HTML and CSS syntax. Publish your page to the Web.
Test for Accessibility
Choose ONE of the following accessibility testing tools to check your page:
Review the results and modify your page until you believe that you have satisfied the requirements. Add a reflection to your web page document that includes responses to the following questions:
- What is the name and URL of the testing tool you choose to use?
- What accessibility guidelines does the tool follow?
- Describe the modifications you needed to make to your page in order to pass the test.
- Would you recommend using this tool to verify compliance with accessibility guidelines? Why or why not?
Criteria | Performance Quality | Score | ||
---|---|---|---|---|
0 points | 1 point | 2 points | ||
Design | Does not demonstrate a consistent design aesthetic, does not exhibit all princples of design, or has a poor information hierarchy. | Demonstrates a basic but consistent aesthetic that exhibits principles of design and communicates information hierarchy. | Demonstrates a unique, professional, consistent aesthetic that exhibits principles of design and clearly communicates information hierarchy. | |
Required Components | One or more required page components are missing. | All required page components are included but are deficient in some way. | All required page components are included in a manner that follows best practices. | |
(X)HTML | Markup is not semantic, fails W3C validation, is poorly organized, mixes presentation with structure, fails to meet Section 508 accessibility requirements, or fails to meet WCAG 2.0 Level A guidelines. | Markup makes basic use of semantics, passes W3C validation, meets Section 508 accessiblity requirements, meets WCAG 2.0 Level A requirements, and is satisfactorily organized. | Markup is exemplary in its semantics, passes W3C validation, meets Section 508 accessibility requirements, meets WCAG 2.0 Level AA requiremetns, is exceptionally well organized, and uses classes and IDs only as necessary. | |
CSS | CSS fails W3C validation, contains errata, is overly verbose, is poorly organized, is uncommented, renders inconsistently between target browsers, or is not kept eternally in a global style sheet. | CSS passes W3C validation, uses some CSS shorthand to keep code brief, is some what organized, renders relatively consistently in all target browsers, and is kept external in a global style sheet separate from markup. | CSS passes W3C validation, is exceptionally well organized, uses CSS shorthand to keep code brief, renders consistently or gracefully degrades in all target browsers, and is kept external and separate from markup, and CSS is used creatively to solve design problems. | |
Assignment Requirements | Lab exercises are incomplete and/or do not meet respective requirements. | Lab exercises are complete but do not meet all respective requirements. | Lab exercises are complete and meet respective requirements. | |
URL & Testing Tool | Missing URL or testing tool name | The URL of the page tested and the name of the testing tool are listed. | N/A | |
Accessibility Guidelines followed by chosen tool | The written description is missing or was copied and pasted into the assignment or there were inaccuracies in the report, or there are three or more grammatical errors in the written description. | The written description (not just copy and paste) is somewhat unclear or contains slight inaccuracies or has fewer than three grammatical errors. | The written description (not just copy and paste) is clear, concise, accurate, and free of grammatical errors. | |
Modifications Needed | The written description of the modifications needed is missing or is unclear or innacurate or incomplete or has three or more grammatical errors. | The written description of the modifications needed is in some way is unclear, slightly inaccurate or incomplete, or has fewer than three grammatical errors. | The written description of the modifications needed is detailed, accurate, complete, and free of grammatical errors. | |
Recommendations | Lacking critical thinking. Recommendations are not practical or not relevant. Accommodations for providing accessibility for only one type of disability is addressed. | Some critical thinking (application, analysis, synthesis, and evaluation) evident. Recommendations are for the most part practical and relevant. Accommodations for providing accessibility for vision, hearing, and motor disabilities are not all addressed. | Clear evidence of critical thinking (application, analysis, synthesis, and evaluation). Recommendations are characterized by practicality and relevance to the accessibility issue. Accommodations for providing accessibility for vision, hearing, and motor disabilities are addressed. |
Accessible Data Table Lab Exercise
Create a web page that contains an accessible data table and a reflection about this assignment. Use Table 6a (page 10) in the PDF at http://www.nps.gov/romo/parkmgmt/upload/current_inventories_c.pdf as a guide for the content and layout of your (X)HTML table. Include attributes needed to meet W3C and Section 508 accessibility guidelines. Your document must use valid (X)HTML and CSS syntax. Your reflection should include a paragraph that describes the design/coding accessibility techniques you used, the purpose of the accessibility techniques used, and any challenges that you overcame as you completed this activity. Publish your page to the Web.
Accessible Form Lab Exercise
Create a web page that contains an accessible form and a reflection about this assignment. Use the form on http://www.grants.gov/section910/OutreachRequestForm.doc as the source for the type of information that the form should collect. Include attributes needed to meet W3C and Section 508 accessibility guidelines. Your document must use valid (X)HTML and CSS syntax. Your reflection should include a paragraph that describes the design/coding accessibility techniques you used, the purpose of the accessibility techniques used, and any challenges that you overcame as you completed this activity. Publish your page to the Web.
Criteria | Performance Quality | Score | ||
---|---|---|---|---|
0 points | 1 point | 2 points | ||
Design | Lab exercises are not presented with a consistent aesthetic and have a poor information hierarchy. | Lab exercises have a basic but consistent aesthetic that communicates information hierarchy. | Lab exercises have a unique, professional, consistent aesthetic that clearly communicates information hierarchy. | |
(X)HTML | Markup is not semantic, fails W3C validation, is poorly organized, mixes presentation with structure, fails to meet Section 508 accessibility requirements, or fails to meet WCAG 2.0 Level A guidelines. | Markup makes basic use of semantics, passes W3C validation, meets Section 508 accessiblity requirements, meets WCAG 2.0 Level A requirements, and is satisfactorily organized. | Markup is exemplary in its semantics, passes W3C validation, meets Section 508 accessibility requirements, meets WCAG 2.0 Level AA requiremetns, is exceptionally well organized, and uses classes and IDs only as necessary. | |
CSS | CSS fails W3C validation, contains errata, is overly verbose, is poorly organized, is uncommented, renders inconsistently between target browsers, or is not kept eternally in a global style sheet. | CSS passes W3C validation, uses some CSS shorthand to keep code brief, is some what organized, renders relatively consistently in all target browsers, and is kept external in a global style sheet separate from markup. | CSS passes W3C validation, is exceptionally well organized, uses CSS shorthand to keep code brief, renders consistently or gracefully degrades in all target browsers, and is kept external and separate from markup, and CSS is used creatively to solve design problems. | |
Assignment Requirements | Lab exercises are incomplete and/or do not meet respective requirements. | Lab exercises are complete but do not meet all respective requirements. | Lab exercises are complete and meet respective requirements. | |
Reflection | Reflection is missing, unorganized, lacks critical thinking, or has three or more grammatical errors. | Reflection demonstrates some critical thinking (application, analysis, synthesis, and evaluation) and has fewer than three grammatical errors. | Reflection demonstrates clear evidence of critical thinking (application, analysis, synthesis, and evaluation). No grammatical errors. |
Accessibility Test Lab
You will be assigned a web page to test. Use three of the accessibility testing tools listed in the resources area to test the page. Note any issues. Also note manual checks. Write a two-to-three page report that lists the following:
- The URL of the web page you tested
- The name of each accessibility testing tool you used along with a written description of issues or manual checks noted by the tool
- The results of your manual checks
- Recommendation for improvements to the page
Criteria | Performance Quality | Score | ||
---|---|---|---|---|
0 points | 1 point | 2 points | ||
Design | Lab exercises are not presented with a consistent aesthetic and have a poor information hierarchy. | Lab exercises have a basic but consistent aesthetic that communicates information hierarchy. | Lab exercises have a unique, professional, consistent aesthetic that clearly communicates information hierarchy. | |
(X)HTML | Markup is not semantic, fails W3C validation, is poorly organized, mixes presentation with structure, fails to meet Section 508 accessibility requirements, or fails to meet WCAG 2.0 Level A guidelines. | Markup makes basic use of semantics, passes W3C validation, meets Section 508 accessiblity requirements, meets WCAG 2.0 Level A requirements, and is satisfactorily organized. | Markup is exemplary in its semantics, passes W3C validation, meets Section 508 accessibility requirements, meets WCAG 2.0 Level AA requiremetns, is exceptionally well organized, and uses classes and IDs only as necessary. | |
CSS | CSS fails W3C validation, contains errata, is overly verbose, is poorly organized, is uncommented, renders inconsistently between target browsers, or is not kept eternally in a global style sheet. | CSS passes W3C validation, uses some CSS shorthand to keep code brief, is some what organized, renders relatively consistently in all target browsers, and is kept external in a global style sheet separate from markup. | CSS passes W3C validation, is exceptionally well organized, uses CSS shorthand to keep code brief, renders consistently or gracefully degrades in all target browsers, and is kept external and separate from markup, and CSS is used creatively to solve design problems. | |
Assignment Requirements | Lab exercises are incomplete and/or do not meet respective requirements. | Lab exercises are complete but do not meet all respective requirements. | Lab exercises are complete and meet respective requirements. |
Accessibility Evaluation
The purpose of this activity is to evaluate a web site for compliance with accessibility guidelines. Choose a web site to use as a case study. You will focus on the home page and your choice of three content pages.
Syntax Validation
Conduct the tests listed below for EACH of the FOUR web pages you have chosen for your project and suggest improvements for the site. For each test listed below, write a report of the test results and your suggestions for improvement.
- Web Standards W3C XHTML Validation Report
Summarize and analyze the test results for each of the four pages. Describe and justify your recommendations for improvement.
- Web Standards W3C CSS Validation Report
http://jigsaw.w3.org/css-validator
Summarize and analyze the test results. Describe and justify your recommendations for improvement.
Accessibility Testing
Choose one or more accessibility testing tools to check the FOUR web pages you have chosen for your project for their compliance with the accessibility guidelines listed below. Follow the directions provided below.
- Evaluate Compliance with Section 508
Conduct a test to verify compliance with Section 508 Guidelines. Write a one to two page report (double spaced) that includes the following: URL of each page
- Name of each testing tool
- Description of the testing procedure (include a description of any manual checks)
- Description of the test results
- Suggested improvements. Justify your suggestions.
- Evaluate Compliance with WCAG 1.0 Priority 1
Conduct a test to verify compliance with WCAG 1.0 Priority 1 Guidelines. Write a one to two page report (doublespaced) that includes the following:
- URL of each page
- Name of each testing tool
- Description of the testing procedure (include a description of any manual checks)
- Description of the test results
- Suggested improvements. Justify your suggestions.
- Justify why WCAG 1.0 was used rather than WCAG 2.0.
- Evaluate Compliance with WCAG 2.0 Level A Success Criteria
Conduct a test to verify compliance with WCAG 2.0 Level A Success Criteria Guidelines. Write a one to two page report (double spaced) that includes the following:
- URL of each page
- Name of each testing tool
- Description of the testing procedure (include a description of any manual checks)
- Description of the test results
- Suggested improvements. Justify your suggestions.
- Evaluate Compliance with your choice of a regional or international accessibility guideline.
For example, Conduct a test to verify compliance with IITAA Guidelines. Use the document at http://www.dhs.state.il.us/iitaa/iitaawebdevelopertestingchecklist.html as a starting point to write a one-to-two page (single-spaced) accessibility report each of your four web pages. Include your suggestions for improvement. Justify your suggestions.
Criteria | Performance Quality | Score | ||
---|---|---|---|---|
0 points | 1 point | 2 points | ||
Syntax Validation: W3C XHTML Validation Report Results |
The written description is missing or was copied and pasted into the assignment or there were inaccuracies in the report, or there are five or more grammatical errors in the written description. | The written description (not just copy and paste) of the issues found during automated testing is somewhat unclear or contains slight inaccuracies or has three or fewer grammatical errors. | The written description (not just copy and paste) of the issues found during automated testing is clear, concise, accurate, and free of grammatical errors. | |
Syntax Validation: W3C CSS Validation Report Results |
The written description is missing or was copied and pasted into the assignment or there were inaccuracies in the report, or there are five or more grammatical errors in the written description. | The written description (not just copy and paste) of the issues found during automated testing is somewhat unclear or contains slight inaccuracies or has three or fewer grammatical errors. | The written description (not just copy and paste) of the issues found during automated testing is clear, concise, accurate, and free of grammatical errors. | |
Accessibility Testing (for each tool assigned) | The written description is missing or is unclear or innacurate or incomplete or has five or more grammatical errors. | The written description includes the URL of each page, name of the testing tool, description of the testing procedure (including manual checks performed) and a description of the test results but is in some say unclear, slightly inaccurate or incomplete, or has three or feweror grammatical errors. | The written description includes the URL of each page, name of the testing tool, description of the testing procedure (including manual checks performed) and a description of the test results is detailed, accurate, complete, and free of grammatical errors. | |
Recommendations for Improvement | Lacking critical thinking. Recommendations are not practical or not relevant. Accommodations for providing accessibility for only one type of disability is addressed. | Some critical thinking (application, analysis, synthesis, and evaluation) evident. Recommendations are for the most part practical and relevant. Accommodations for providing accessibility for vision, hearing, and motor disabilities are not all addressed. | Clear evidence of critical thinking (application, analysis, synthesis, and evaluation). Recommendations are characterized by practicality and relevance to the accessibility issue. Accommodations for providing accessibility for vision, hearing, and motor disabilities are addressed. |
PDF Lab
Create a one-page accessible PDF document that uses a Microsoft Word document as a starting point. The contents of the document will be a resume — either your own resume or resume of a fictional person. The Word document should include the following objects:
- heading
- subheadings
- bullet lists
- one image
- at least one hyperlink
Convert your Word document to a PDF. Review the PDF and verify accessibility features. Listen to the PDF and tab through the various parts. Adobe Reader versions 6 and higher will "read" a PDF out loud. Adobe Reader Keyboard shortcuts:
- Ctrl+shift+b - to listen to the entire document
- Ctrl+shift+v - to listen to the page
- Ctrl+shift+c - to resume
- Ctrl+shift+e - to stop
Modify your PDF as needed. Publish your PDF to the Web.
Criteria | Performance Quality | Score | ||
---|---|---|---|---|
0 point | 1 point | 2 points | ||
PDF was not created. | PDF was created, includes appropriate headings and, when read aloud, the order is understandable. | PDF was created, includes appropriate headings and, when read aloud, the order is understandable. | ||
Required Components | Two or more required components are not present | All required components are present but could be more accessible. | All required components are present and contribute to the accessibility of the document. |
Discussion Questions
The Discussion Questions (DQs) are written in a format for an online course. However, they can be adapted to classroom discussion, group activities, and/or lab activities.
Discussion Question 1
Universal Design
Take a moment to view Universal Design for the Web. This suggests that while usability does not necessarily increase accessibility, increased accessibility tends to increase usability. Do you agree? Why or why not? Find at least one web resource that supports your opinion.
Reply to this message by MM/DD:
- Change the subject of your reply from "DQ 1 - Accessibility & Usability" to "your name" and "agree" or "disagree" (For example: "Sparky - disagree")
- State your opinion and write two or three sentences that justify your opinion - include the URL(s) of web resource(s) that support your opinion.
Read the replies of the other students and respond to at least two students by MM/DD with a substantial response that extends the discussion. For example, when you respond to the message either pose a specific question or comment on something that surprised/interested you when you visited the URL provided by the student.
Discussion Question 2
Accessible Technologies
Choose ONE of the following technologies:
- HTML or XHTML
- CSS
- Scripting
- Mobile access
Search the Web for a tutorial or article that provides two or more useful tips for improving the accessibility of the technology you chose to explore.
Reply to this message by MM/DD:
- Change the subject of your reply from "Accessible Technologies" to "your name -- Technology" (For example: "Maya - Flash")
- Include the following in your message:
- A description of a tip or hint to help increase the accessibility of the technology
- the exact URL of your resource
- the reason why you believe this tip is useful
Read the other students' messages and reply to two students (by MM/DD) with a constructive comment or suggestion.
Discussion Question 3
Simulation Lab
Reflect on your experiences in the Simulation Lab. Was there something that surprised you, frustrated you, or inspired you? Reply to this message by MM/DD:
- Change the subject of your reply from "Simulation" to "your name" and the type of simulation you completed (either WebAim Screen Reader Simulation, Low Vision Simulation, or Mobility Impairment Simulation) (For example: "Karen - Low Vision Simulation")
- Write three to five sentences that describe your experience and something that surprised, frustrated, or inspired you.
Read the replies of the other students and respond to at least two students by MM/DD with a substantial response that extends the discussion.
Discussion Question 4
Apply Your New Accessibility Knowledge
This discussion question is different from the others. You are assigned to a small group to discuss ways to improve the accessibility of a specific web site. Look in the message in this thread with your name in the subject. This is your group. Read the message and view your assignment web site.
Reply to this message by MM/DD:
- Change the subject of your reply to "your name" and the accessibility issue you are addressing. (For example, "Jamal - Missing Alt Text")
- Write three to five sentences that describe at least one area where the accessibility of this site could be improved and your suggestions for improvement. Cite the URL or page number of a resource that supports your suggestion.
Read the replies of the other students in your group and respond to at least two students by MM/DD with a substantial response that extends the discussion.
Discussion Question 5
Exploring the Accessibility of CAPTCHAs
Watch the video at http://www.youtube.com/watch?v=4jrgMlufa7w for an introduction to accessibility issues related to CAPTCHAs.
Learn more about CAPTCHAs at:
- http://recaptcha.net/learnmore.html
- http://webaxe.blogspot.com/2007/02/podcast-40-about-captcha-and.html
- http://www.w3.org/WAI/intro/captcha.php
- http://www.w3.org/TR/turingtest/
- http://www.w3.org/2004/Talks/0319-csun-m3m/
- http://www.standards-schmandards.com/2005/captcha/
- http://accessability.blogspot.com/2007/07/yahoo-continues-to-employ-captcha.html
Reply to this message by MM/DD:
Change the subject of your reply from “CAPTCHAs” to “your name - For - Against - It Depends” (For example: “Ashita - Against”).
The message of your reply should contain the following:
- One or two sentences describing your opinion.
- Two or three sentences that provide justification for your opinion (include URLs of resources).
- Your recommendation for a web site that wants to use CAPTCHAs. Justify your recommendation (provide URLs of resources).
Read the replies of the other students and respond to at least two students by MM/DD with a substantial response that extends the discussion.
Discussion Question 6
Accessibility Testing Mini-Review
We are taking a very broad view of accessibility in this Discussion Question and considering a wide variety of testing tools/applications — not only applications that specifically test for Section 508 or W3C WCAG compliance. Choose ONE of the accessibility checkers, screen readers, text-browser simulators, reading level testers, or color blindness simulation tools introduced in the Accessibility Testing Module.
Reply to this message by MM/DD: Change the subject of your reply from “Accessibility Testing Application Mini-Review” to “your name — The Application Name” For example, “Poindexter - Hera 2.0”
Include the following in your message:
- The name of the application
- The purpose of the application
- Ease of download and installation (if applicable)
- Cost (if applicable)
- Ease of use
- Type of report provided. As a starting point, consider any of the following — only use those that are applicable: text-based, graphic-based, code errors highlighted, line numbers of errors listed, simulation, and so on.
- If applicable, indicate whether Section 508, WC3 WCAG 1.0 or W3C WCAG 2.0 standard compliance are reported on.
- State your recommendation and justify it.
NOTE: EACH STUDENT MUST REPORT ON A DIFFERENT TOOL — students who answer this Discussion Question earlier have more choices than students who answer this Discussion Question later.
Read the replies of the other students and respond by MM/DD with a comment that furthers the discussion by either making an observation and asking a question OR describing your own experiences with this application.
Discussion Question 7
Reflecting on your Accessibility Journey
You've jumped headfirst into web design accessibility topics in this course. Let's take a few moments in this DQ to reflect on your journey into accessibility. This DQ provides an opportunity for you to reflect and think about your exploration of web accessibility in this course.
Reply to this message MM/DD: Change the subject of your reply from “Reflecting on your Accessibility Journey” to “your name - your Aha! moment” (For example: “Beatrice - headings make a difference”)
Read the questions below. Spend a few minutes thinking about the questions and how you plan to answer the questions. In your message, answer EACH of the following questions with two to four sentences that provide examples/justification/etc. As you explored the topic of web accessibility…
- At what point did you feel most engaged with what was happening?
- At what point did you feel most distanced from what was happening?
- What action that anyone (teacher or student) took did you find most affirming and helpful?
- What action that anyone (teacher or student) took did you find most puzzling or confusing?
- What surprised you the most? (This could be something about your own reactions to what went on, or something that someone did, or anything else that occurs to you.)
- Any additional thoughts?
Read the other students' messages. Reply to at least two students with a constructive comment, suggestion, or question that furthers the discussion by MM/DD.
Sample Discussion Question Rubric
This rubric could be used in an online course to evaluate student discussion question participation. Note: this is a generic rubric that could be used for any discussion question — therefore it does not correspond to a specific course content competency.Discussion Question Participation Tips:
A total of 12 points is available for each mandatory discussion question. It's a good idea to login to the course three times per week to keep up with the discussion.
- Participate EARLIER in the WEEK rather than at the last possible moment.
- Reply to others EARLIER in the WEEK rather than at the last possible moment.
- Check in and participate in the discussion three separate days per week.
Your participation in the discussion question is assessed using the rubric shown below.
Criteria | Performance Quality | Score | |||
---|---|---|---|---|---|
0 points | 1 point | 2 points | 3 points | ||
Content | Response was not applicable to the discussion or did not follow Netiquette. | Ideas were incomplete or had inaccuracies, or there are two or more opinions are presented without supporting facts. | Content is complete and accurate, but lacking in new ideas, or there may be one areas an opinion is presented without supporting facts or references. Content generally doesn't invite further discussion or investigation. |
Content is complete, accurate and offers new ideas. The discussion is well supported with details that explain the participant’s conclusions. Content encourages further discussion on topic. |
|
Critical Thinking | Lacking critical thinking. Postings tend to be inaccurate or unclear. | Lacking critical thinking. Postings tend to address peripheral issues. Generally accurate, but with omissions or clear recitation. | Some critical thinking (application, analysis, synthesis, and evaluation) evident, but posting may not directly address the issue. | Clear evidence of critical thinking (application, analysis, synthesis, and evaluation). Postings are characterized by originality and relevance to the topic. | |
Timeliness | Did not participate in the discussion. | Participant’s response and replies to others is after the due date. | Initial response is after the due date. Replies to other students on or before the due date. | Initial response is on or before the due date. Replies to other students on or before the due date. | |
Involvement and Responsiveness | Does not participate in the discussion during the week and/or fails to respond to others. | Participates in discussion two or fewer days per week and/or fails to responds to others. Interaction is best described as "good idea ..." and of little substance to continue discussion. | Participates in discussion at least three days per week and responds to other students. Some communication encourages further responses, raises questions or politely offers alternative perspectives but other interactions do not continue or add value to the discussion. | Participates in discussion at least three days per week and responds to other students. Communication adds value to the discussion and encourages further responses, raises questions or politely offers alternative perspectives. |
Examination Questions
Universal Design
- Describe principles of universal design.
- Discuss benefits of universally designed content for everyone.
Usability
- Define usability.
- Agree or Disagree with the following statement, “An accessible web page is more usable.” Explain your opinion.
Accessibility
- Define accessibility.
- Identify at least three forms of disability that should be considered when designing accessible web sites.
- Describe national, regional, and international legal requirements for accessibility for the Web.
- List the WCAG 2.0 POUR Framework principles of accessibility.
- State three reasons why it is important for a web site to be accessible.
- Describe the purpose of text equivalents and their benefits.
- Explain the business benefits of an accessible web site.
- Describe the purpose of an accessibility law (such as Section 508 in the United States) and under what circumstances the law applies.
- Describe two reasons to comply with W3C Web Content Accessibility Guidelines even though not compelled by law.
- Agree or Disagree with the following statement, “An accessible web page is more usable.” Explain and your opinion.
- Agree or Disagree with the following statement, “An accessible accessible web site helps search engine optimization.” Justify your opinion.
- Agree or Disagree with the following statement, “An accessible accessible web site is useful to visitors using mobile devices.” Justify your opinion.
XHTML & CSS Accessibility Techniques
- Describe a method to code heading tags to increase the accessibility of a web page.
- Describe attributes that can increase the accessibility of an image.
- Describe two issues related to the use of images for main navigation and explain how to provide for accessibility.
- Describe the placement and purpose of the “skip to content” hyperlink.
- List three attributes that can be used to improve the accessibility of a data table and describe the purpose or each attribute.
- Describe the use of the label tag in forms and how this technique can improve accessibility.
- Describe the use of fieldset and legend tags in forms and how this technique can improve the accessibility of a form.
- Explain why using CSS for page layout can help create more accessible web pages.
- List three accessibility requirements of the Section 508 guidelines.
- Explain the WCAG 2.0 “perceivable” requirement and provide an example of how to meet it when coding a web page.
- Explain the WCAG 2.0 “operable” requirement and provide an example of how to meet it when coding a web page.
- Explain the WCAG 2.0 “understandable” requirement and provide an example of how to meet it when coding a web page.
- Explain the WCAG 2.0 “robust” requirement and provide an example of how to meet it when coding a web page.
Accessibility Testing
- List three accessibility testing tools.
- List one accessibility testing tool and describe the guidelines used and the format of the test report.
- Do you agree or disagree with the following statement, “An automated testing tool will determine all the accessibility issues in a web page.” Explain and justify your opinion.
Accessible Adobe PDF
- Describe two techniques to increase the accessibility of a PDF.
- Explain how an accessible PDF can be easier to use for everyone.
Accessible Multimedia
- Describe how the use of alternate text and captioning for multimedia is beneficial for everyone.
- Describe one accessibility issue related to the use of Flash and how to accommodate it.
- Describe techniques to provide for accessibility when using multimedia such as video, audio, and Adobe Flash.
Accessible Scripting
- Describe one accessibility issue related to the use of JavaScript and how to provide accommodations for it.
- Describe the purpose of ARIA and explain when it should be used.
Accessibility and Mobile Devices
- List three barriers common to mobile device users and individuals with disabilities.
- Describe one accessibility issue related to the use of mobile devices and how to accommodate it.
Quiz Questions
The following resources provide examples of quiz questions.
- UW-Madison Web Accessibility 101 Pre-test
- UW-Madison Web Accessibility 101 Post-test
- Hartford Community College Accessibility Quiz
Resources
Universal Design Resources
Usability Resources
- Steven Krug, Don’t Make Me Think
- Jakob Nielsen, Usability 101
- Usability Basics
- What is Usability?
- Web Design References: Usability
Accessibility Resources
- WebAIM: Web Accessibility In Mind
- UI Access
- Adobe - Accessibility Resource Center
- WAI Resources
- Web Accessibility for All
- Web Design References: Accessibility
Accessible/Inaccessible Web Page Demos
Web Accessibility Initiative (WAI)
- WAI Resources
- WCAG 1.0 Checkpoints
- WCAG 1.0
- WCAG 2.0 At a Glance
- Constructing a POUR Website
- WCAG 2.0
- WAI-ARIA Primer
Section 508
Other Accessibility Guidelines
- Illinois Information Technology Accessibility Act
- International Policies
- BSI British Standards DPC BS 8878:2009 Web accessibility — Building accessible experiences for disabled people — Code of Practice
Web Resources on Browser Accessibility
- Accessibility Features of Firefox
- Internet Explorer 6 Accessibility Features
- Internet Explorer 8 Accessibility Features
- Accessibility in Google Chrome beta
How Individuals with Disabilities Experience the Web
- Overview of Disabilities
- How People with Disabilities use the Web
- Accessible Web Design Video Presentation
- A collection of videos that demonstrate people using assistive technology
- Another collection of videos that demonstrate people using assistive technology
- Introduction to the Screen Reader
- Charts over the telephone
Assistive Technology
- JAWS
- Window-Eyes
- Connect OutLoud
- Fangs text-reader simulation for Firefox
- WebAnywhere - a self-voicing, web browsing web application
The Business Case for Accessibility
- Optimizing Your Chances with Accessibility
- Developing a Web Accessibility Business Case
- Accessibility helping business: the case of Legal & General in United Kingdom
- High Accessibility is Effective Search Engine Optimization
- SEO - Accessibility's Best Friend
Accessible Page Content
- iCITA: Unique Title Overview
- iCITA: Subheading Overview
- iCITA: Linearization Overview
- iCITA: Language Overview
- iCITA: Link Overview
- iCITA: List Overview
- iCITA: Accesskey Overivew
- Color Contrast
Accessible XHTML Images
- Web Accessibility 101: Creating Accessible Images
- The Accessibility Institute
- iCITA: Text Equvalents Best Practices
Accessible XHTML Tables
- Web Accessibility 101: Data and Layout Tables
- Creating Accessible Data Tables
- iCITA: Data Table Overview
- The Accessibility Institute: Accessible Tables
Accessible Navigation
- Web Accessibility - Navigation
- Designing Accessible Navigation
- Navigation & Hyperlinks
- iCITA: Navigaton Bar Overview
Accessible XHTML Forms
- Accessible HTML/XHTML Forms
- Web Accessibility 101: Accessible Data Forms
- Accessible Forms
- iCITA: Form Labeling Overview
- The Accessibility Institute: Accessible Forms
CSS Accessible Techniques
- Building Accessible Static Navigation with CSS
- Creating Accessible CSS
- Optional: Max Design Sample CSS Page Layouts
- iCITA: Styling Best Practices
Accessibility & Color
Accessible Multimedia
- Accessible Multimedia
- Flash & Accessibility Case Study — JK Rowling Flash website - Case study - Web Access Centre
- Flash CS3 Accessibility Overview
- Flash CS3 Accessibility Design Guidelines
- Video with Closed Captions and Audio Description
- Educational non interactive Flash animation - opens a new window
- Creating Accessible Multimedia
- Captioned Media Program (CMP): Guidelines and preferred techniques
- Synchronized Accessible Multimedia Interchange (SAMI)
- Synchronized Multimedia Integration Language (SMIL)
- Media Access Generator (MAGpie)
- Captioning & YouTube
- MovCaptioner (Mac only)
Accessible PDFs
- Web Accessibility for All: Create an Accessible PDF from a MS Word document
- Tutorial: PDF from Word 2003 and/or PDF from Word 2007
- Word to PDF Quick Reference Card (pdf)
- Optional: Adobe PDF Tutorial 1 (audio required)
- Optional: Adobe PDF Tutorial 2 (audio required)
- Accessible PDF WebCast
- Accessible PDFs and Word Documents (54 minutes long)
- First PDF Example, Second PDF Example, Third PDF Example, and Word Document Example
- Listen to Your PDF
Accessible Scripting
- Replacing <noscript> with accessible, unobtrusive DOM/JavaScript
- Accessible Context-sensitive Help with Unobtrusive DOM Scripting
- Google's Gmail: Accessible ARIA Example
Accessibility Testing Checklist
- WebAIM Quick Reference: Web Accessibility Principles
- WebAIM Quick Reference: Testing Web Content for Accessibility
Accessibility Testing Tools
- W3C WAI Annotated List of Testing Tools
- Cynthia Says from HiSoftware
An online tool that checks for either WCAG 1.0 and/or Section 508 compliance and can emulate one of a list of specified browsers.
- Worldspace Online
An online accessibility analysis tool designed to identify errors with Section 508, and the Web Content Accessibility Guidelines.
- Wave 4.0 beta from WebAIM
A new version of the popular WAVE. The beta seems to be quite reliable. The report is the web page displayed with icons — quite a visual tool. Firefox Extension Available.
- ATRC Web Accessibility Checker
An online tool that checks for WCAG 2.0 compliance.
- Hera 2.0
An online tool that checks for WCAG 1.0 compliance.
- Firefox Web Developer Extension
Download and install this extension in your FireFox Browser. From the Extension Toolbar select Tools > Validate WAI > Validate Section 508 (or Validate WAI). WebAIM Evaluating Web Sites for Accessibility with the Firefox Web Developer Extension.
- Color Contrast Analyser Firefox Extension
Download and install this extension in your FireFox Browser. This tool identifies color characteristics including the background color, text color, and luminosity contrast ratio.
- Accessibility Color Wheel
This online tool checks for color contrast.
- Adobe Dreamweaver built-in Accessibility Validator
To check a single page, open the page in Dreamweaver and select File > Check Page > Accessibility. To create a report for an entire Dreamweaver site, select Site > Reports > select your report options > Run.
- Web Accessibility Toolbar for Internet Explorer
Download and install this toolbar in your Internet Explorer Browser
- AIS Web Accessibility Toolbar for Internet Explorer
Download and install this toolbar in your Internet Explorer Browser
- FAE — Illinois Functional Accessibility Evaluator (FAE)
Developers can use the tool to test their web resources for functional accessibility features based on the iCITA HTML Best Practices — which are designed to verify that web resources functionally accessible to people with disabilities and comply with the Illinois Web Accessibility Standards, Section 508 Information Technology Accessibility Standards and the W3C Web Content Accessibility Guidelines (WCAG) 1.0 accessibility guidelines.
- Illinois Firefox Accessibility Extension
Download and install this extension in your Firefox browser to test web pages for functional accessibility features based on the iCITA HTML Best Practices.
- Accessibility Tools
A comprehensive listing of Accessibility Tools provided by the University of Minnesota at Duluth
.
Accessibility Testing Tools - Enterprise Class
- WorldSpace
- IBM Rational Policy Tester - Accessibility Edition
- InFocus Suite
- NetCentric CommonLook for the Web
Accessibility & Mobile Web
- Making a Web Site Accessible Both for People with Disabilities and for Mobile Devices
- Mobile Web Best Practices (MWBP)
Audio and Video Transcription Services
Learning Modules
- Web Accessibility Overview
- Assistive Technology: Screen Readers and Browsers
- Section 508, WCAG 1.0, WCAG 2.0
- Accessible Content & Navigation with CSS
- Accessible Data Tables
- Accessible Forms
- Accessibility Testing
- Accessibility & PDFs
- Accessibility & Multimedia
- Accessibility & Scripting Overview
- Accessibility & Mobile Devices Overview
- Accessibility Evaluation Activity
Overview | This module provides an introduction to universal design, web usability, and web accessibility. The focus of the module is to provide an overview of web accessibility, including its essential role in providing equal opportunity for people with disabilities, additional benefits to others, myths surrounding web accessibility, and examples of web page coding techniques that improve the accessibility of web pages. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | Individuals with a wide range of physical challenges use assistive technologies ranging from screen readers to browser plug-ins. The purpose of this module is to introduce you to assistive technologies and to begin to utilize a browser as an accessibility checker. In the Simulation Lab you'll explore what it is like to try to visit a web page while experiencing a physical challenge. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | In this module you'll explore the similarities and differences between WCAG 1.0, WCAG 2.0 and Section 508. Optionally, you'll take a look at other web accessibility guidelines chosen by your instructor, such as the Illinois Information Technology Accessibility Act (IITAA) Guidelines. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | In this module you'll focus on methods and techniques to configure accessible content on Web pages. |
---|---|
Objectives |
|
Length | Note to Instructors: Students with a strong background in standards-based XHTML and CSS should complete this module in one week (nine hours for an online course). However, depending on the prerequisites you set and the background of your students, you may need to allow up to two weeks for this module.
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | In this module you'll focus on methods and techniques to configure accessible data tables on Web pages. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | In this module you'll focus on methods and techniques to configure accessible forms on Web pages. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | You'll focus on testing for accessibility in this module. There are a number of manual checks that you can do to check a web page to determine if it is accessible. You'll also explore a variety of applications that can perform testing. As you try out these tools, explore web sites that you may want to consider for your project. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | Adobe Portable Document Format (PDF) is a popular format for publishing and delivering documents on the Web. In this module you'll discover how to create an accessible PDF from Microsoft Word documents. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | Multimedia seems to be everywhere on the Web these days. Adobe Flash is a popular format for interactive multimedia on the Web. You'll explore issues related to the use of Flash, some tips for accessible Flash in this module, and methods for captioning videos uploaded to YouTube. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | This module will introduce you to accessibility issues related to the use of script on web pages. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | This module will introduce you to accessibility issues related to the use of mobile devices. |
---|---|
Objectives |
|
Length |
|
Content Delivery | |
Assessment Activities |
|
Wrap-Up/Feedback |
|
Overview | You'll apply the skills and knowledge you've developed during this course as you complete an accessibility evaluation activity in this module. |
---|---|
Objectives |
|
Length |
|
Content Delivery |
|
Assessment Activities |
|
Wrap-Up/Feedback |
|
Help us develop our living curriculum. Contribute a learning module.
Contributors
Primary Course Developer: Terry Morris, Harper College
Course Reviewers:
- Glenda Sims
- John F. Croston III
- Virginia DeBolt
- Mark DuBois, Illinois Central College
- Jon Gunderson, University of Illinois Urbana-Champaign