Login




Forget password?
Create new account

Syllabus

Page Contents

Note: The most up-to-date version is found at http://www.paulbohman.com/webaccessibility/526/2006fall/syllabus.htm.

Course Information

Semester: Spring 2007
Credit hours: 3.0

For the Classroom-Based Sections (EDIT/EDSE 5T1):

For the Web-Based Sections (EDIT/EDSE 5T2):

Instructor

Name: Paul R. Bohman
Phone: 703-993-4725
Email: (please use the form at http://www.paulbohman.com/contact/)
Office: Thompson 216, Fairfax Campus
Office hours:
Wednesdays 2:00pm-4:00pm;
Thursdays 10:00am-12:00 (noon);
Or by appointment

Course Description

This 3-credit course will enable students to use Macromedia Dreamweaver and other Web development tools to design and develop a comprehensive web site in accordance with universal web design standards and web accessibility guidelines as defined in Section 508 of the Rehabilitation Act and the Web Content Accessibility Guidelines (WCAG) 1.0. Students will learn to evaluate and report on the accessibility of existing web content from the perspective of different disability types, using a user-centered, principle-based approach.

Focus Areas

This course is has three focus areas:

  1. Semantic structure of web content using XHTML
  2. Style and presentation of web content using CSS
  3. Accessibility of web content using universal design principles

Student Outcomes

The course is designed to enable students to:

  1. Evaluate the semantic structure and accessibility of existing web content by:
    • Defining and explaining the major issues and principles related to web accessibility and user adaptability
    • Describing the current laws and standards concerning web accessibility.
    • Judging the compliance of existing web content with accessibility guidelines using a combination of checklists, tools, and accessibility knowledge.
  2. Create web content that is accessible to a broad range of users, including people with disabilities by:
    • Creating basic web content, structured in XHTML
    • Styling XHTML-based content using basic CSS
    • Developing a multi-featured web site that incorporates principles of web accessibility and user adaptability—in accordance with the Section 508 guidelines at a minimum—using a combination of a WYSIWIG authoring tool (such as Macromedia Dreamweaver) and text-based XHTML markup.

Professional/Technical Standards Taught

This course teaches students to create standards-compliant web content using:

Course Web Site

Most of the course materials are located at www.paulbohman.com/webaccessibility/526/2007spring.

Readings

Software

Note: You do not necessarily need to buy any of the software listed below, but you will need access to it. All of the required software will be available in the classroom computer labs in Commerce I and Robinson A352. The lab in Robinson A352 usually has more public free-use time than Commerce I. Check with the lab schedules.

Semester Schedule

Tentative Schedule of Activities

Class

 Date Topic Assignment Due
1 Jan 22 Getting Started; User Customization of Web Content —
2 Jan 29

Basic XHTML Part 1

 —
3 Feb 5 Basic XHTML Part 2

—
4 Feb 12 Dreamweaver Techniques

Assignment 1 Due, which includes:

  1. Your "About Me" page (4 points)
  2. Your "Goal Statement" page (4 points)
  3. Your "XHTML Practice Page" (8 points)
5 Feb 19 Web Accessibility and Universal Design  
6 Feb 26 Presentation and Style Using Cascading Style Sheets (CSS)

Assignment 2 Due, which includes:

  1. Your "Program of Study" page (6 points)
  2. At least 1 "Course Details" page (4 points)
  3. Your "Resume/Vita" page (4 points)
7 Mar 5 Templates & Navigation —
— Mar 12 SPRING BREAK
(no class) 		—
8 Mar 19 Images and Illustrations —
9 Mar 26 Tables and Frames

Assignment 3 Due, which includes:

  1. Your site "Template" XHTML structure (8 points)
  2. A visual mockup of your design (10 points)
10 Apr 2 Forms, JavaScript, and Interaction —
11 Apr 9 Testing for accessibility —
12 Apr 16 Captions, Flash, and Multimedia

Assignment 4 Due, which includes:

  1. Your final portfolio design (14 points)
  2. Your "Conformance Claim" worksheet (8 points)
13 Apr 23 PDF, Word, PowerPoint, and their Alternatives —
14 Apr 30 LAST DAY OF CLASS—Lab Work: Prepare accessibility evaluation —
15 May 9  

Assignment 5 Due, which includes:

  1. Your " Accessibility Evaluation" of a web site (30 points)

Assignments

List of Assignments
Assignment Due by Total Points

Assignment 1, which includes:

  1. Your "About Me" page (4 points)
  2. Your "Goal Statement" page (4 points)
  3. Your XHTML Practice Page (8 points)
Feb 12 16

Assignment 2, which includes:

  1. Your "Program of Study" page (6 points)
  2. At least 1 "Course Details" page (4 points)
  3. Your "Resume/Vita" page (4 points)
Feb 26 14

Assignment 3, which includes:

  1. Your site "Template" XHTML structure (8 points)
  2. A "Visual Mockup" of your design (10 points)
Mar 26 18

Assignment 4, which includes:

  1. Your final portfolio design (14 points)
  2. Your "Conformance Claim" worksheet (8 points)
Apr 16 22

Assignment 5, which includes:

  1. Your " Accessibility Evaluation" of a web site (30 points)
May 9 30
Total points   100

Note that you may turn in assignments or take exams early.

Assignment Details

Assignment 1 ("About Me," "Goal Statement," and "XHTML Practice Page" )

General instructions:

Create your 3 XHTML pages using a plain text editor such as Notepad, PSPad, or Text Wrangler. DO NOT use any styles, font sizes, colors, or other embellishments. Make it plain and simple. Post these pages on your portfolio web site using FTP (you may use Dreamweaver's FTP features, or any other FTP program). Each page must include the following (at a minimum):

  1. XHTML 1.0 strict doctype declaration
  2. UTF-8 character set declaration
  3. <head>
  4. <title>
  5. <body>
  6. <h1>
  7. <p>
  8. The page must pass as "valid XHTML 1.0 strict" according to the validator at http://validator.w3.org/

Page 1. Your "About Me" Page:

On your "about me" page, include the following:

  1. <img> (A photo of yourself with appropriate alt text, and other photos if you like)
  2. At least a couple of paragraphs about you, which can include such things as your professional interests, personal interests, family, hobbies, etc.

Page 2. Your "Goal Statement" Page:

On your "goal statement" page, include the following:

  1. At least one paragraph stating why you're studying what you're studying.

Page 3. Your "XHTML Practice Page:

At a minimum, include the following:

  1. At least three headings of three different levels (e.g. <h1>, <h2>, <h3>)
  2. An image (<img>)with alt text
  3. A link (<a>) to another web page
  4. A link (<a>) to another web site (e.g. George Mason's web site, or some other external web site)
  5. A link (<a>) to an email address
  6. A link (<a>) to a spot on the same page (an anchor <a> with a name and id)
  7. A bulleted (unordered <ul>) list
  8. A numbered (ordered <ol>) list
  9. A definition list (<dl>)
  10. A data table (<table>) with rows (<tr>), header cells (<th>), and data cells (<td>)
  11. A block quote (<blockquote>) used to quote somebody, not just for indenting purposes
  12. At least one word with emphasis (using the <em> element)
  13. At least one word with strong emphasis (using the <strong> element)
  14. An abbreviation (using the <abbr> element)
  15. An acronym (using the <acronym> element)
  16. A superscript (<sup>)
  17. A subscript (<sub>)
  18. A hidden comment (using <!-- and -->)
  19. The text content of the page can be anything you like

Assignment 2 ("Program of Study," "Course Details ," and "Resume/Vita" )

General instructions:

Create your 3 XHTML pages using either Dreamweaver or a plain text editor. As with the last assignment, DO NOT use any styles, font sizes, colors, or other embellishments. Make it plain and simple. Post these pages on your portfolio web site using FTP (you may use Dreamweaver's FTP features, or any other FTP program). Like the previous assignment, each page must include the following (at a minimum):

  1. XHTML 1.0 strict doctype declaration
  2. UTF-8 character set declaration
  3. <head>
  4. <title>
  5. <body>
  6. <h1>
  7. <p>
  8. The page must pass as "valid XHTML 1.0 strict" according to the validator at http://validator.w3.org/

Page 1. Your "Program of Study" Page:

Create a table showing the courses you have taken or plan to take as a part of your current academic program. You can divide up the table into columns for:

  1. Course title
  2. Semester
  3. Instructor
  4. Credit Hours
  5. any other information that you think is useful

Link at least one of the course titles to a page with more details about that course (as described below).

Page 2. Your "Course Details " Page:

On your "course details " page, include the following:

  1. Course title, semester, instructor, credit hours (just for this course, not for all of the other courses)
  2. Description of the course (taken from the syllabus or course catalog)
  3. A list of the competencies and/or technical standards taught by this course

Optional elements to include on this page (note that some of these may be required for future portfolio classes):

  1. Links to examples of the work you did for this course (the so-called "artifacts" of your work)
  2. Reflections about this course
  3. A link to, or copy of, the syllabus

Page 3. Your "Resume/Vita" Page:

At a minimum, your resume should include:

  1. A section about your education
  2. A section about your work history
  3. A section about your professional skills and/or accomplishments

Assignment 3 ("Template " and "Visual Mockup")

General instructions:

This assignment will prepare you for your final design.

XHTML Template

Create the structure for the template you will use for the final design. Create the template using either 1) PHP, 2) server-side includes (SSI), or 3) Dreamweaver templates. The page must pass as XHTML 1.0 Strict. The structure should include:

  1. A "skip to main content" or "skip navigation" link
  2. The site's identity (e.g. "Paul's Portfolio")
  3. Main navigation links (create an unordered list <ul> for this). In the navigation, include:
    1. A link to the home page
    2. Links to other main sections of the site
    3. An ID or class for the "selected" navigation link
  4. An area for the main content
  5. A footer (perhaps with a coypright notice, a "contact me" link, and/or other information)

Visual Mockup

Create a mockup, or "rough draft" of your design to guide you as you prepare your final design. The mockup could be created in CSS. Or, it could also be created in a graphics program such as PhotoShop. Of course, you will need to convert the mockup into CSS for your final project. The mockup should show:

  1. The intended "look and feel" of your final design
  2. The placement of items within the template (e.g. the header, navigation, main content, footer, etc.)
  3. How you plan to show when a navigation item is "selected" (you could do this by a change in background color, text color, background image, or other methods).

Refer to a page of ideas for layout that I put together.

 

Assignment 4 ("Final Portfolio " and "Conformance Claim")

Final Portfolio Design

The following general principles will be used to judge all of the content:

On a technical level, the required elements are as follows:

  1. A navigation scheme that allows users to know where they are within the web site (make sure visual cues are present)
  2. Appropriate <title> elements on each page (each page should have a unique title)
  3. Markup that validates as XHTML 1.0 Strict
  4. Pages that pass WAVE 3.5 and CynthiaSays.com
  5. No broken links or missing pages
  6. Structural and semantic markup used where appropriate (headers, bulleted lists, etc.)
  7. At least one foreground image with appropriate alt text
  8. At least one "decorative" background image in CSS
  9. At least one image requiring a "long description"
  10. At least one unordered list
  11. At least one ordered list
  12. At least one simple data table with the scope attribute
  13. At least one complex data table using the id and headers method
  14. A form with at least one of each of the following elements:
    1. An <input> element with an appropriate <label>
    2. A set of checkboxes or radio buttons with appropriate <fieldset>, <legend>, and <label> elements
    3. A submit button
The conformance claim

The instructor will provide the students with a worksheet to document the accessibility features of their web site design.

Your site's content: A student portfolio

All students should use this class to develop a portfolio web site, which can be used to document progress toward their degrees or certificates. Portfolios are required for all Track 1 students, and can be beneficial to students in all of the tracks and programs as a way to showcase coursework and achievements for potential employers. Students whose programs do not require portfolios may receive permission to develop a different kind of web site—but permission must be granted by the instructor in advance. Students who already have portfolio web sites may use this class to redesign their web site in accordance with accessibility principles and standards.

Students will not be graded on the quality of the portfolio, per se. They will be graded on the accessibility and standards-compliance of the web site. Other courses (such as EDIT 601) deal more directly with the quality of the portfolio. (And yes, you can use the same portfolio web site for both classes.) For the purposes of this class, students may even use placeholder text (e.g. Lorem ipsum text) rather than real text in some areas of the site. For example, it can take quite a while to write high-quality "personal reflections" or "insights" for a good portfolio. Rather than spend the time doing that during this class, it would be better to spend the time focusing on web accessibility and standards-based design. Students can fill in the portfolio later with real examples of their work, thoughtful essays, and so on. For now, just focus on web accessibility and standards.

According to the syllabus for EDIT 601 (Instructional Design and Development Mid Program Portfolio), the portfolio web site should include the items in the list below.

The instructor will provide example portfolio students for students to use as a reference when designing their own sites.

Assignment 5: Accessibility Evaluation of a Web Site

This is your chance to play the role of "web accessibility consultant." Here's the role-playing scenario: you have been commissioned to evaluate the accessibility of an existing web site. The site's owners have hired you to find out what they need to do to make their web site comply with Section 508 (for compliance with United States regulations) and WCAG 1.0 Level 2 (for compliance with international regulations). You must produce a report (based in either XHTML or Word; I don't want a printed document) which commends the site owners for the things they have done right (list these things explicitly), and which clearly lists the things they need to fix. You must explain the steps they need to take to reach compliance with Section 508 and WCAG 1.0 Level 2. Try to be positive and encouraging, but firm in your recommendations. Include links in your report to relevant "how-to" tutorials on the web so that their developers have a clear set of instructions to follow. Organize your report with the following sections:

  1. Intro page or "cover sheet"
  2. Table of contents
  3. Executive summary
  4. Description of existing accessibility features
  5. Accessibility (Perceivability, Operability, Understandability, Robustness) of the site from the perspective of people with various types of disabilities. Include relevant references to all applicable guidelines in Section 508 and WCAG 1.0 in the context of the narrative and/or in a list at the end of each section. Disability types include:
    1. Visual disabilities, including:
      1. blindness
      2. low vision
      3. color-blindness
    2. Auditory disabilities: deafness
    3. Motor disabilities, including:
      1. inability to use a mouse
      2. diminished muscle control (spasms, imprecise and/or slow hand movements, etc.)
    4. Cognitive disabilities, including challenges with:
      1. Perception and Processing
      2. Memory
      3. Problem Solving
      4. Attention
    5. Seizure disorders: photoepilepsy
  6. An analysis of the accessibility of the template(s) used
  7. Specific types and instances of content (not in the templates) that need to be fixed (e.g. error messages that appear in the wrong place, tables without headers, etc.). Include the URLs of the specific pages needing to be fixed and instructions on how to fix them.
  8. Appendices, if applicable
Assignment 5 Grading Criteria
Credit Criteria
Full credit The student found all of the relevant accessibility features and/or errors using the criteria supplied by the instructor AND demonstrated an understanding of the potential barriers experienced by people with disabilities on that particular site AND turned in the assignment on time.
Partial credit The student missed some of the errors, demonstrated a partial or faulty understanding of potential accessibility barriers, or turned in the assignment late.
No credit The student did not turn in the assignment, or turned it in more than a week late.

Grades

Grading Scale
Points Grade
94-100 A
90-93 A-
87-89 B+
84-86 B
80-83 B-
70-79 C
69 or below F
General Grading Criteria
Credit Criteria
Full credit The student completed the assignment as directed (with all criteria mentioned above) AND on time.
Partial credit The student did not finish the assignment, turned in the assignment late, or did not follow the instructions properly.
No credit The student did not turn in the assignment, or turned it in more than a week late.

CEHD Statement of Expectations

The College of Education and Human Development (CEHD) expects that all students abide by the following:

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.