Overwhelmed? Stick To Basics

A few people at the CSUN conference last week commented on the overbearing WCAG 2.0 specs. Many folks agree that WCAG is extremely large and difficult to read (not unlike the HTML5 spec). And especially for accessibility newbies, WCAG can be a difficult place to start.

In a session at CSUN, even the W3C WAI members said that beginners should not read the spec but start with other docs such as How To Meet WCAG2 which pulls the Understanding and Techniques together. The WAI is also working on a “Easy Checks” documents. Here’s a sneak peak to the draft titled Easy Checks – A First Review of Web Accessibility [link updated].

If you are feeling overwhelmed or confused about web accessibility, my advice is this: stick to the basics.

For design, this means not re-inventing HTML elements and behaviors. Particularly form elements, such as re-rendering a select dropdown for the sake of aesthetics. There’s also the horrible trend to make labels appear and function like placeholders.

For development, this means the proper foundational techniques. Namely, the four layers of web development:

  • Semantic HTML for content.
  • CSS for presentation.
  • JS to enhance behavior.
  • ARIA to fill any accessibility gaps.

This fun diagram on Flickr helps illustrate this point.

Using the four layers approach encourages the following good practices:

  • Separating content from presentation from behavior.
  • Maintaining code in external files.
  • Adding ARIA only when needed.

If these practices are implemented in a website, it’s well on its way to being accessible.

2 comments

  1. Denis Boudreau

    Technically, Easy Checks is a project being conducted under the Education and Outreach Working Group (EOWG). If you guys have any questions, comments or concerns about this document, don’t hesitate to let me know and we’ll address those issues! :)

  2. Pingback: Accessibility Related Reading List – March 12, 2013 | Recreate Web

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>