EDSE/EDIT 526: Web Accessibility and Design

Syllabus

Syllabus Contents

Course Information

Semester: Summer 2006
Credit hours: 3.0

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

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

Instructor

Paul R. Bohman
Phone: 703-933-2036
Email: (please use the form at http://www.paulbohman.com/contact/)
Office: Robinson A310
Office hours:
Wednesdays 10:00am-12:00 (noon);
Thursdays 2:00pm-4:00pm;
Or by appointment

Course Description

Official Description:

This 3-credit course will enable students to use Macromedia Dreamweaver, basic HTML coding, and other Web development tools to design and develop a comprehensive website in accordance with universal Web design standards and Web Accessibility Guidelines as defined in Section 508 of the Rehabilitation Act. Students will be actively involved in experiencing the obstacles people with disabilities face when accessing the Web and will learn how to use Web development tools to design a website that avoids those obstacles by applying the principles of universal web design and Web Accessibility Guidelines.

Student Outcomes

This course is designed to enable students to:

  1. Evaluate the accessibility of existing web content by:
  2. Create web content that is accessible to a broad range of users, including people with disabilities by:

Professional/Technical Standards Taught

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

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/
Topic

 Date Topic Assignment Due
1 June 5 Getting Started; User Customization of Web Content —
2 June 7 Basic XHTML Part 1 —
3 June 12 Basic XHTML Part 2 Assignment 1: Set up your personal profile in Blackboard (due June 12; 2 points)
4 June 14 Dreamweaver Techniques —
5 June 19 Web Accessibility and Universal Design Assignment 2: Post two practice files on your web site using FTP (due June 19; 15 points)
6 June 21 Presentation and Style Using Cascading Style Sheets (CSS) —
7 June 26 Templates & Navigation —
8 June 28 Images and Illustrations Assignment 3: Conceptual prototype design (due June 30; 15 points)
— July 3 UNIVERSITY HOLIDAY (NO CLASS) —
9 July 5 Tables and Frames —
10 July 10 Forms, JavaScript, and Interaction —
11 July 12 Captions, Flash, and Multimedia —
12 July 17 PDF, Word, PowerPoint, and their Alternatives —
13 July 19 Lab Work: Prepare Final Project Assignment 4: Accessibility evaluation of a web site (due July 19; 25 points)
14 July 24 LAST DAY OF CLASS—Lab Work: Prepare Final Project —
— July 25 (No class) Turn in final project

Assignment 5: Final portfolio web site design (due July 25; 35 points)

Assignment 6: "Accessibility conformance claim" worksheet (due July 25; 8 points)
— July 26 OFFICIAL "EXAM DAY" (no class and no final exam) —

Assignments

List of Assignments
Assignment Due Points
Assignment 1: Set up your personal profile in Blackboard Jun 12 2
Assignment 2: Post two practice files on your web site using FTP Jun 19 15
Assignment 3: Conceptual prototype design Jun 30 15
Assignment 4: Accessibility evaluation of a web site Jul 19 25
Assignment 5: Final portfolio web site design Jul 25 35
Assignment 6: "Accessibility conformance claim" worksheet Jul 25 8
Total points   100

Assignment Details

Assignment 1: Set up your personal profile in Blackboard (2 points)

Set up a personal profile, or "home page" in Blackboard, using the "Student Home Page" link in the left-hand menu in Blackboard. Include the following information:

  1. A photo of yourself
  2. A little bit about you: what you enjoy doing, the things that make you interesting, your family, etc.
  3. Your current program of study at George Mason University, and how far along in the program you are
  4. Your educational background (previous degrees and/or coursework)
  5. A brief explanation of your past web design experience, including HTML, XHTML, CSS, graphics, etc. (There's no need to try to impress me here. Just be honest and tell me what you do or don't know.)
  6. A brief explanation of what you currently know about web accessibility, and whether or not you have ever tried to make a web site accessible to people with disabilities.
Assignment 1 Grading Criteria
Credit Criteria
Full credit The student completed the assignment as directed (with all 6 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.

Assignment 2: Post two practice files on your web site using Dreamweaver FTP (15 points)

Post two test pages on your web site, using the FTP feature of Dreamweaver. Both pages should be XHTML documents with doctype, <head> and <body>. You may create the pages using Dreamweaver, or coding them in a text editor. To turn in the assignment, post a link to your pages in the discussion board in the Assignment 2 forum.

Between the two test pages, you should have at least one instance of the the following items:

  1. A title using the <title> element
  2. At least three headings of three different levels (e.g. <h1>, <h2>, <h3>)
  3. An image with alt text
  4. A link to your other web page
  5. A link to another web site (e.g. George Mason's web site, or some other external web site)
  6. A link to an email address
  7. A bulleted (unordered) list
  8. A numbered (ordered) list
  9. A definition list
  10. A block quote (used to quote somebody, not just for indenting purposes)
  11. At least one word with emphasis (using the <em> element)
  12. At least one word with strong emphasis (using the <strong> element)
  13. A table with header cells (<th>) and data cells (<td>)
  14. An abbreviation (using the <abbr> element)
  15. An acronym (using the <acronym> element)
  16. A superscript
  17. A subscript
  18. A hidden comment (using <!-- and -->)
Assignment 2 Grading Criteria
Credit Criteria
Full credit The student completed the assignment as directed (with all 18 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.

Assignment 3: Conceptual Prototype Design for Final Project (15 points)

This assignment is to help you envision your final web site design. The conceptual prototype design is not a real web site. It's just a visual representation of what you want the final design to look like.

You can create your conceptual design in a graphics program (e.g. PhotoShop, PhotoPaint, Gimp, Paint Shop Pro, Fireworks, etc.), or in a program that provides some graphics creation support (e.g. PowerPoint, Word, etc.), or on paper (e.g. using pencil, pen, markers, construction paper, or even crayons if you like). Some people like to create their prototypes using XHTML and CSS, in essence making preliminary versions of the real thing. This is also an option, but is not required.

Some conceptual prototypes are very detailed, containing virtually everything that the final design will contain, down to the last details of the graphical look and feel. These "high fidelity" prototypes can be very useful for visualizing the artistic impact of the design. Other conceptual prototypes are simpler, "low fidelity" versions of the eventual design. It doesn't matter whether you create a high fidelity or a low fidelity prototype, but you should pay close attention to where objects are placed, how users will know what page they're on, how users will navigate from one section of the site to another, etc.

Remember to:

  1. Create a prototype for each page that you plan to create in your final design
  2. Include all of the required elements described in the final project description below

At a minimum, your prototype should communicate the following information:

  1. The identity of the site (e.g. in a logo, main graphic at the top, styled text, byline, slogan, etc.)
  2. The visual layout of the site navigation (will you be using "tabs" or side links, or some other navigation scheme?)
  3. How users will know which page they're on (will you use "breadcrumbs" or visual cues or some other method?)
  4. Which parts of the design are the template and which parts are the main content
  5. How you plan to make the design interesting (you should at least show where the major graphics will go; you could also suggest a color scheme, style ideas, etc.)
Assignment 3 Grading Criteria
Credit Criteria
Full credit The student completed the assignment as directed AND on time AND received approval from the instructor to proceed with the final project.
Partial credit The conceptual prototype design was approved by the instructor, but the student turned in the assignment late, or the assignment was incomplete, or the student did not make an adequate attempt to complete the assignment as directed.
No credit The conceptual prototype was not turned in, or was turned in more than a week late, or the prototype was not approved by the instructor.

Assignment 4: Accessibility Evaluation of a Web Site (25 points)

Evaluate the accessibility an existing web site (from a list of web sites that will be supplied by the instructor) in terms of its compliance with Section 508 guidelines and other accessibility criteria (to be supplied by the instructor).

Post the evaluation to the discussion board when completed.

Assignment 4 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.

Assignment 5: Final Portfolio Web Site Design (35 points)

This is the big assignment for the class. Everything you learn in this class will prepare you for this project. You should not leave this until the last minute, the last week, or even the last month. You should begin to think about and work on this project as soon as possible.

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

The instructor will generally follow the same criteria for assessing the accessibility of your web site that students use in Assignment 4 to assess the accessibility of another web site.

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
  2. Appropriate <title> elements on each page
  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 simple data table with the scope attribute
  11. At least one complex data table using the id and headers method
  12. 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
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 Grading Criteria
Credit Criteria
Full credit The web site meets accessibility standards in accordance with the criteria in Assignment 4 AND the web site contains all of the required technical elements AND the web site accomplishes its goal (i.e. it can serve as a student portfolio site) AND the student turned in the assignment on time.
Partial credit The student failed to meet accessibility criteria, or did not include all of the required technical elements, or did not create a site that meets its goal, or did not finish the web site.
No credit The student did not turn in the assignment, or turned it in more than a week late.

Assignment 6: "Accessibility Conformance Claim" Worksheet (8 points)

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

Assignment 6 Grading Criteria
Credit Criteria
Full credit The worksheet accurately assesses the accessibility and standards-compliance of the web site AND the student turned in the assignment on time.
Partial credit The worksheet did not represent an accurate assessment, or was incomplete, or was turned in 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-90 B+
84-86 B
80-83 B-
70-79 C
Below 70 F

CEHD Statement of Expectations

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