jump to content

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.

Recommended Textbook(s)

Recommended Reading

Technologies Required

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
  • Accessibility Blog Entry
  • Discussion Question 1
  • Final Exam
Discuss benefits of universally designed content for everyone
  • Accessibility Blog Entry
  • Awareness Lab
  • Discussion Question 1
  • Final Exam
Recognize and apply universal design principles in web page design
  • Discussion Question 1
  • Accessibility Evaluation
Usability Define usability
  • Discussion Question 1
  • Awareness Lab
  • Accessibility Blog Entry
  • Final Exam
Accessibility Define accessibility
  • Discussion Question 1
  • Awareness Lab
  • Accessibility Blog Entry
  • Final Exam
Identify forms of disability that should be considered when designing accessible web sites
  • Accessibility Blog Entry
  • Simulation Lab
  • Discussion Question 3
  • Final Exam
Describe national regional and international legal requirements for accessibility for the Web.
  • Accessibility Blog Entry
  • Final Exam
Explain the business benefits of an accessible web site
  • Accessibility Blog Entry
  • Final Exam
Describe the WCAG 2.0 POUR Framework (perceivable operable understandable robust) principles of accessibility
  • Accessibility Blog Entry
  • Final Exam

Assistive Technology

Describe issues encountered when using screen readers and other assistive technolgogies
  • Accessibility Blog Entry
  • Simulation Lab
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

  • Accessible Content Design and Test Lab
  • Accessible Data Table Lab Exercise
  • Accessible Form Lab Exercise
  • Accessibility Evaluation
  • Final Exam
Describe and apply W3C WCAG or Section 508 recommendations in creating accessible web content
  • Accessible Content Design and Test Lab
  • Accessible Data Table Lab Exercise
  • Accessible Form Lab Exercise
  • Accessibility Evaluation
  • Accessibility Blog Entry
  • Discussion Question 2
  • Discussion Question 4
  • Final Exam

Accessibility Testing

Identify methods of verifying compliance with accessibility guidelines
  • Accessibility Blog Entry
  • Discussion Question 6
  • Final Exam
Utilize assessment tools and techniques to verify the compliance of web content with accessibility guidelines and laws
  • Accessible Content Design and Test Lab
  • Accessibility Test Lab
  • Accessibility Evaluation
  • Accessibility Blog Entry
Evaluate the compliance of a web site with accessibility guidelines and laws
  • Accessibility Test Lab
  • Accessibility Evaluation
  • Accessibility Blog Entry
Accessible Adobe PDF Describe techniques to provide for accessibility when using Adobe PDF
  • Discussion Question 2
  • Accessibility Blog Entry
  • Final Exam
Create accessible Adobe PDF content
  • PDF Lab
  • Accessibility Blog Entry
  • Final Exam
Accessible Multimedia Describe techniques to provide for accessibility when using multimedia such as video audio and Adobe Flash
  • Discussion Question 2
  • Accessibility Blog Entry
  • Final Exam
Explain the benefits of alternate text content including audio transcription video captioning and video descriptions to potentially all individuals
  • Discussion Question 5
  • Accessibility Blog Entry
  • Final Exam
Accessible Scripting Describe techniques to provide for accessibility when using JavaScript
  • Discussion Question 2
  • Accessibility Blog Entry
  • Final Exam
Describe the purpose of ARIA
  • Accessibility Blog Entry
  • Final Exam
Accessibility and Mobile Devices Describe barriers common to mobile device users and individuals with disabilities
  • Discussion Question 2
  • Accessibility Blog Entry
  • Final Exam
Identify techniques to provide for accessibility on mobile devices
  • Accessibility Blog Entry
  • Final Exam

Assignments

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.

Course Blog Assignment Rubric
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.

Awareness Lab Rubric
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.

    1. Choose a web site to try out.
    2. Place your mouse where you cannot reach it.
    3. 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.
Simulation Lab Rubric
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:

  1. What is the name and URL of the testing tool you choose to use?
  2. What accessibility guidelines does the tool follow?
  3. Describe the modifications you needed to make to your page in order to pass the test.
  4. Would you recommend using this tool to verify compliance with accessibility guidelines? Why or why not?
Accessible Content Design and Test Lab Rubric
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.

Lab Exercise Grading Rubric
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
Accessibility Test Lab Rubric
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.

  1. Web Standards W3C XHTML Validation Report

    http://validator.w3.org

    Summarize and analyze the test results for each of the four pages. Describe and justify your recommendations for improvement.

  2. 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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Accessibility Evaluation Rubric
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.

PDF Lab Rubric
Criteria Performance Quality Score
0 point 1 point 2 points
PDF 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:

  1. Change the subject of your reply from "DQ 1 - Accessibility & Usability" to "your name" and "agree" or "disagree" (For example: "Sparky - disagree")
  2. 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
  • PDF
  • 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:

  1. Change the subject of your reply from "Accessible Technologies" to "your name -- Technology" (For example: "Maya - Flash")
  2. 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:

  1. 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")
  2. 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:

  1. Change the subject of your reply to "your name" and the accessibility issue you are addressing. (For example, "Jamal - Missing Alt Text")
  2. 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:

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:

  1. One or two sentences describing your opinion.
  2. Two or three sentences that provide justification for your opinion (include URLs of resources).
  3. 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:

  1. The name of the application
  2. The purpose of the application
  3. Ease of download and installation (if applicable)
  4. Cost (if applicable)
  5. Ease of use
  6. 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.
  7. If applicable, indicate whether Section 508, WC3 WCAG 1.0 or W3C WCAG 2.0 standard compliance are reported on.
  8. 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…

  1. At what point did you feel most engaged with what was happening?
  2. At what point did you feel most distanced from what was happening?
  3. What action that anyone (teacher or student) took did you find most affirming and helpful?
  4. What action that anyone (teacher or student) took did you find most puzzling or confusing?
  5. 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.)
  6. 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.

Discussion Question Rubric
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.

Resources

Universal Design Resources

Usability Resources

Accessibility Resources

Accessible/Inaccessible Web Page Demos

Web Accessibility Initiative (WAI)

Section 508

Other Accessibility Guidelines

Web Resources on Browser Accessibility

How Individuals with Disabilities Experience the Web

Assistive Technology

The Business Case for Accessibility

Accessible Page Content

Accessible XHTML Images

Accessible XHTML Tables

Accessible Navigation

Accessible XHTML Forms

CSS Accessible Techniques

Accessibility & Color

Accessible Multimedia

Accessible PDFs

Accessible Scripting

Accessibility Testing Checklist

Accessibility Testing Tools

Accessibility Testing Tools - Enterprise Class

Accessibility & Mobile Web

Audio and Video Transcription Services

Learning Modules

Web Accessibility Overview
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
  • Describe principles of universal design
  • Discuss benefits of universally designed content for everyone
  • Define usability
  • Define accessibility
  • Describe how accessibility benefits users without disabilities
  • Identify forms of disability that should be considered when designing accessible web sites
  • Identify and describe a web page with accessibility / usability issues
Length
  • Online Course:
    • This module will take the learner approximately nine hours to complete.
  • Classroom Course:
    • This module will take approximately one three hour class session or two 1 hour 30 minute class sessions (in a computer lab classroom).
    • Students are expected to spend six hours outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Discussion Question (or blog posting)
    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.
  • Lab Assignment: Awareness Lab
Wrap-Up/Feedback
  • Discussion Question (or blog) Wrap-Up and evaluation (see Discussion Question rubric)
  • Lab Assignment written feedback and evaluation

Assistive Technology: Screen Readers and Browsers
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
  • Describe the purpose of screen readers
  • Download and install a screen reader
  • Discuss the ways that individuals with disabilities may access the Web
  • Identify common screen readers, talking browsers, and text-only browsers
  • Describe accessibility features of commonly used browsers
  • Demonstrate using simulation software to emulate a physical challenge while visiting a web page
Length
  • Online Course:
    • This module will take the learner approximately nine hours to complete.
  • Classroom Course:
    • This module will take approximately one three hour class session or two 1 hour 30 minute class sessions (in a computer lab classroom).
    • Students are expected to spend six hours outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
  • Lab Assignment: Simulation Lab
Wrap-Up/Feedback
  • Discussion Question (or blog) Wrap-Up and evaluation (see Discussion Question rubric)
  • Lab Assignment written feedback and evaluation

Section 508, WCAG 1.0, WCAG 2.0
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
  • Describe W3C WCAG or Section 508 recommendations in creating accessible web content
  • Describe the WCAG 2.0 POUR Framework (perceivable, operable, understandable, robust) principles of accessibility
Length
  • Online Course:
    • This module will take the learner between approximately nine hours to complete.
  • Classroom Course:
    • This module will take two 1 hour 30 minute class sessions (in a computer lab classroom).
    • Students are expected to spend approximately six outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
  • Discussion Question:
    Your task in this DQ is to locate and report on an article or blog post related to web accessibility guidelines. Be sure to find a specific ARTICLE or substantial BLOG post (at least 1000 words) about the topic instead of reporting about a web site that is about accessibility. E-mail me if you have questions about this distinction. It is preferred if the article or blog post was published within the last 12 months.

    Reply to this message by MM/DD:
    • Change the subject of your reply from "Mod # DQ - Explore Accessibility Guidelines" to "your name - article title"
      (For example: "Greg - A WCAG 2.0 Implementation Site").
    • List the exact URL of your article or blog post. Note: Do not report on an article has already been reported on by another student.
    • Write a brief summary (three to four sentences) of the article or blog post.
    • Write a brief reaction (three to four sentences) to the article or blog post.
      Agree? Disagree? Why? Justify your answer.

    Read the replies of the other students, visit the article/blog posts, and respond to at least two students by MM/DD.
Wrap-Up/Feedback
  • Discussion Question (or blog) Wrap-Up and evaluation (see Discussion Question rubric)

Accessible Content & Navigation with CSS
Overview In this module you'll focus on methods and techniques to configure accessible content on Web pages.
Objectives
  • Describe accessibility issues related to organization of page content.
  • Describe accessibility issues related to graphics, color, and text on web pages
  • Describe accessibility issues related to text, navigation, and CSS page layout.
  • Apply best web accessibility design practices related to graphics, color, text, navigation, and CSS page layout
  • Configure content on a web page with usable, accessible and standards-compliant (X)HTML and CSS markup
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.
  • Online Course:
    • This module will take the learner between approximately nine to eighteen hours to complete.
  • Classroom Course:
    • This module will take between two to four 1 hour 30 minute class sessions (in a computer lab classroom).
    • Students are expected to spend between six to twelve hours outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
  • Discussion Question 4
  • Lab Assignment: Accessible Content Design and Test Lab
Wrap-Up/Feedback
  • Discussion Question (or blog) Wrap-Up and evaluation (see Discussion Question rubric)
  • Lab Assignment written feedback and evaluation

Accessible Data Tables
Overview In this module you'll focus on methods and techniques to configure accessible data tables on Web pages.
Objectives
  • Describe accessibility issues related to data tables
  • Apply best practices for designing accessible data tables
  • Code a data table on a web page with usable, accessible and standards-compliant (X)HTML and CSS markup
Length
  • Online Course:
    • This module will take the learner approximately five hours to complete.
  • Classroom Course:
    • This module will take approximately one 1 hour 30 minute class session
    • (in a computer lab classroom).
    • Students are expected to spend three hours outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
  • Lab Assignment: Accessible Table Lab Exercise
Wrap-Up/Feedback
  • Discussion Question (or blog) Wrap-Up and evaluation (see Discussion Question rubric)
  • Lab Assignment written feedback and evaluation

Accessible Forms
Overview In this module you'll focus on methods and techniques to configure accessible forms on Web pages.
Objectives
  • Describe accessibility issues related to web forms
  • Apply best practices for designing accessible forms
  • Desrcibe accessibility issues related to form error processing
  • Code a form on a web page with usable, accessible and standards-compliant (X)HTML and CSS markup
Length
  • Online Course:
    • This module will take the learner approximately nine hours to complete.
  • Classroom Course:
    • This module will take approximately one three hour class session or two 1 hour 30 minute class sessions (in a computer lab classroom).
    • Students are expected to spend six hours outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
  • Lab Assignment: Accessible Form Lab Exercise
Wrap-Up/Feedback
  • Discussion Question (or blog) Wrap-Up and evaluation (see Discussion Question rubric)
  • Lab Assignment written feedback and evaluation

Accessibility Testing
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
  • 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
Length
  • Online Course:
    • This module will take the learner approximately nine hours to complete.
  • Classroom Course:
    • This module will take approximately one three hour class session or two 1 hour 30 minute class sessions (in a computer lab classroom).
    • Students are expected to spend six hours outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
  • Discussion Question 6
  • Lab Assignment: Accessibility Test Lab
Wrap-Up/Feedback
  • Blog Wrap-Up and evaluation
  • Discussion Question Wrap-Up and evaluation
  • Lab Assignment written feedback and evaluation

Accessibility & PDFs
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
  • Describe techniques to provide for accessibility when using Adobe PDF
  • Create accessible Adobe PDF
Length
  • Online Course:
    • This module will take the learner between approximiately nine hours to complete.
  • Classroom Course:
    • This module will take two 1 hour 30 minute class sessions (in a computer lab classroom).
    • Students are expected to spend approximately six outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
  • Lab Assignment: PDF Lab
Wrap-Up/Feedback
  • Blog Wrap-Up and Evaluation
  • Lab Assignment written feedback and evaluation

Accessibility & Multimedia
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
  • 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.
Length
  • Online Course:
    • This module will take the learner between approximiately nine hours to complete.
  • Classroom Course:
    • This module will take two 1 hour 30 minute class sessions (in a computer lab classroom).
    • Students are expected to spend approximately six outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
  • Optional Activity: Upload a video to YouTube with captions.
Wrap-Up/Feedback
  • Blog Wrap-Up and Evaluation

Accessibility & Scripting Overview
Overview This module will introduce you to accessibility issues related to the use of script on web pages.
Objectives
  • Describe techniques to provide for accessibility when using JavaScript
  • Describe the purpose of ARIA.
Length
  • Online Course:
    • This module will take the learner between approximiately four hours to complete.
  • Classroom Course:
    • This module will take one 1 hour 30 minute class session (in a computer lab classroom).
    • Students are expected to spend approximately three hours outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
Wrap-Up/Feedback
  • Blog Wrap-Up and Evaluation

Accessibility & Mobile Devices Overview
Overview

This module will introduce you to accessibility issues related to the use of mobile devices.

Objectives
  • Describe barriers common to mobile device users and indivdiuals with disabilties
  • Identify techniques to provide for accessibiltiy on mobile devices
Length
  • Online Course:
    • This module will take the learner between approximiately four hours to complete.
  • Classroom Course:
    • This module will take one 1 hour 30 minute class session (in a computer lab classroom).
    • Students are expected to spend approximately three hours outside of class completing readings and learning activities.
Content Delivery
Assessment Activities
  • Blog Posting
Wrap-Up/Feedback
  • Blog Wrap-Up and Evaluation

Accessibility Evaluation Activity
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
  • Recognize and apply universal design principles in web page design
  • Describe and apply W3C WCAG or Section 508 recommendations in creating accessible web content
  • 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
Length
  • Online Course:
    • This module will take the learner approximately nine hours to complete.
  • Classroom Course:
    • This module will take approximately one three hour class session or two 1 hour 30 minute class sessions (in a computer lab classroom).
    • Students are expected to spend six hours outside of class completing the activities.
Content Delivery
  • There is no new content in this module. Learners apply skills and knowledge they have developed during the course as they complete an accessibility evaluation activity.
Assessment Activities
  • Blog Posting
  • Discussion Question 7
  • Lab Assignment: Accessibility Evaluation Lab
Wrap-Up/Feedback
  • Blog Wrap-Up and evaluation
  • Discussion Question Wrap-Up and evaluation
  • Lab Assignment written feedback and evaluation

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