Today's Topic: Web Standards, Accessibility, and Typography

Today’s discussion will be on web coding standards, which tend to generate almost as many religious battles as operating system choices.

We’ll cover the HTML standards development process, existing HTML and XHTML standards, problems with existing standards, and browser support for standards. We’ll also discuss the issues surrounding separation of presentation and content, and the importance of CSS in standards-based web development.

Closely related to the topic of standards and appropriate coding is the topic of web site accessibility. We’ll talk about different kinds of accessibility, the reasons for building accessible web sites, and some techniques for making sure sites are accessible to all users.

We’ll spend the last hour of class talking about web typography and CSS formatting.

Readings on Web Standards and Accessibility

Standards

• 99.9% of Websites are Obsolete
• Better Living Through XHTML
• About the Web Standards Project
• Fix Your Site With the Right DOCTYPE
• Why We Won’t Help You
• Semantic Obsolescence
• The Business Benefits of Web Standards

Accessibility

• Dive Into Accessibility (30 Days to a More Accessible Web Site)
• CNN Article on Web Accessibility

Readings on Typography and CSS

• Web Style Guide: Typography
• Web Page Design for Designers: Typography
• A List Apart: Typography Matters
• A List Apart: The Trouble With EM ’n EN (and Other Shady Characters)
• A List Apart: Reading Design
• The Noodle Incident: Sane Text Sizing

And a how-to for CSS text properties:

• CSS Guide: CSS Properties

In-Class Exercise: Assessing Accessibility

1. Use Cynthia Says to evaluate at least two of your own web pages (with at least one of those being on your Grace account). Make note of all of the priority 1, 2, and 3 problems identified.
2. Now, fix the Priority 1 problems. Remember that to pass the W3C recommendations, you must not have any Priority 1 problems. (You may find it helpful to use the WCAG checklist.)
3. After you’ve fixed your Priority 1 problems, look at the other comments in the report provided. Your efforts should now be directed towards fixing any Priority 2 problems. Finally, Priority 3 problems may also be fixed to provide maximum accommodations.

Post a comment to this entry that describes what you had to change on your site, and what level of accessibility compliance you were able to achieve.

In-Class Exercise: Accessibility Simulations

1. Sign out a pair of headphones from the main computer lab (or use your own if you have some), and complete the tasks on WebAIM’s Screen Simulator.
2. Go to the Cognitive Simulator on the same site, and complete those tasks as well.
3. On the Vischeck site, provide a URL to a web page you’ve created, and see how it would appear to a person with color blindness. Try it with some of the web pages you frequent most often.

CSS Files and Sites

Download this .zip file (if it doesn’t automatically decompress, you should be able to double-click on it to open it). I’ll be using the html files in it as examples while I talk.

These are some sites with useful CSS tutorial and resources:

• Muldur’s Stylesheet Tutorial (Webmonkey)
• CSS Tutorial and Guide (WestCiv)
• Get Started with CSS (builder.com)

These are examples of how changing the stylesheet for a site can drastically change the appearance of the site.