This is part one of a two-part post. Part one covers the basics of web standards and progressive enhancement and Section 508 standards §1194.22 (a)-(f). Part two covers Section 508 standards §1194.22 (g)-(p).

Labs designer Ali Felski recently posted about an experiment in redesigning the web site of USA.gov. One of the commenters on the post felt that the design would not be feasible as it is not compliant with Section 508 accessibility standards. I disagree. It is nearly impossible to infer a site’s compliance with Section 508 from the design.

Several years ago I worked (contracted) as a Section 508 tester for the Treasury Department on their Governmentwide Accounting and Reporting Modernization project. Since then I have developed applications for the IRS and FBI that have had to implement Section 508 standards. There seems to be quite a bit of confusion over the implications of Section 508 and the effort involved in implementing the standards… even amongst those dealing with it each day. In this two-part post I will dispel some of the misconceptions and show how easy it is to accomplish when sites are developed with web standards and progressive enhancement.

Developing with web standards

When developing with web standards, there are three important things to keep in mind:

• HTML is content
• CSS is presentation
• JavaScript is behavior

Think about it for a minute and let it sink in. Most people think of HTML as that markup language that is used to layout web pages. This, however, is a violation of the separation of layers. HTML is meant to give semantic meaning to your content. p tags denote paragraphs. div tags indicate logic divisions within content. table tags are used for tabular data and not for layout… as tempting as it is.

img tags are another good example. You would probably think that the Sunlight Labs logo at the top of this page is rendered with an img tag in the HTML. By doing this we would be including presentation elements in our content. The proper way to implement this is by using an h1 tag containing ‘Sunlight Labs’ and using CSS image replacement techniques to display the logo image on the page instead of the text. One of the benefits of this method is that our organization name is included in the content of the page rather than locked away in an image.

Progressive enhancement

So far we’ve seen an example of maintaining a separation of content and style. Progressive enhancement is a method of separating content and behavior.

What happens if we don’t maintain of separation of content and behavior and the user has JavaScript disabled? In most cases the page will either be missing content or not function correctly. By creating fully functional web sites without JavaScript and then layering on behavioral features, it is possible to create functional and rich user experiences.

Section 508 Guidelines

• (a) A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).

  If we properly separate our three layers, we remove most of the situations in which we would have to provide text equivalents. Markup should only include img tags when the image is actually part of the content of the page (i.e. Flickr or Boston.com’s The Big Picture).

  The lesson: Logos, navigation, buttons and other content elements are not proper uses of img tags. When non-text content is necessary, use title and alt attributes.

• (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

  That fancy Java slideshow applet that adds ripple effects to the slides probably isn’t necessary. Simplify your life and make basic HTML pages styled with CSS instead.

  The lesson: If you do need multimedia capabilities, use technologies that have accessibility options.

• (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

  Users with colorblindness or screen readers can’t tell a red icon from a green icon. If all you have in your HTML is an img tag, you are hiding content from people that are unable to see the page. Be sure to have meaningful text content in your HTML whenever you are conveying information with color.

  The lesson: Color is presentation, not content. Convey all information as text in HTML and use styles heets to make it pretty and colorful.

• (d) Documents shall be organized so they are readable without requiring an associated style sheet.

  Remember our three layers of separation?

  The lesson: If you have created a page that needs CSS or JavaScript to be readable, you have violated our “HTML is content” principle. Semantic markup without styles creates HTML that is meaningful even if it is boring to look at.

• (e) Redundant text links shall be provided for each active region of a server-side image map.

  Don’t use image maps as they are almost always unnecesary. Simple as that.

  The lesson: Provide basic text interactions with plain old HTML. If rich interactions are necessary, enable them by using progressive enhancement techniques.

• (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

  The lesson: Didn’t we agree to not use image maps?

Stay tuned for part two where we explore standards (g)-(p)!