The Web Squeeze

• Home
• About
• Magazine
  • News
  • Articles
  • Tutorials
  • Podcasts
  • Interviews
  • Reviews
  • Tips & Tricks
• Forum
• Write
• Contact

• News
• Articles
• Tutorials
• Podcasts
• Interviews
• Reviews
• Tips & Tricks

Is This Article For You?

This article is aimed primarily at newcomers to accessibility. We’ll be discussing some of the basics and best practices, a few tools to help out, and then some recommended reading. To avoid frightening you off, I’m not including too much information at first so that we can take a more in-depth approach with future articles.

Here’s the first tip, and in my opinion, it’s one of the most important to remember: don’t let yourself get overwhelmed. There are lots of acronyms, abbreviations, and other terminology that will no doubt sound foreign to you if you’re just getting started. Some accessibility gurus might have scared you a little bit, making the idea of fixing your site pretty daunting with their “all or none” recommendations. I’m here to tell you that some is better than none, and you’ll learn a lot in the process if you at least make the initial effort.

Best Practices

Start With Valid, Semantic Code

The best way to get started is to cover the basics. First, make sure that you’re using valid, semantic code on your site. Take a look at the differences between these two code excerpts, from what should be the same site. The first example is from a real, live site, but I’ve obscured the URL and identity of the site owner. The second example is how the code should be marked up.

Code Excerpt 1 (Confusing and poorly marked up):

<img border=&quot;0&quot; src=&quot;http://www.johndoecongress.com/index.60.jpg&quot; width=&quot;548&quot; height=&quot;153&quot;> <br>
<font face=&quot;Impact&quot; color=&quot;#00FFFF&quot;><span style=&quot;background-color: #000000&quot;>4TH XY DISTRICT:</span></font><font color=&quot;#FFFF00&quot;><b></b><font face=&quot;Impact&quot;>
<span style=&quot;background-color: #000000&quot;>Dallas, Baltimore, Topeka, Sacramento, Chapel Hill, Seattle, ETC.</span></font></font>

<tr><td width=&quot;27%&quot; bgcolor=&quot;#000080&quot; height=&quot;1&quot;><p align=&quot;center&quot;><a href=&quot;doe-4-us-congress-11.htm&quot;>
<img border=&quot;0&quot; src=&quot;index.71.jpg&quot; width=&quot;279&quot; height=&quot;41&quot;></a></td></tr>
<tr><td width=&quot;27%&quot; bgcolor=&quot;#000080&quot; height=&quot;0&quot;><p align=&quot;center&quot;><a href=&quot;doe-4-us-congress-5.htm&quot;>
<img border=&quot;0&quot; src=&quot;index.55.jpg&quot; width=&quot;279&quot; height=&quot;41&quot;></a></td></tr>
<tr><td width=&quot;27%&quot; bgcolor=&quot;#000080&quot; height=&quot;1&quot;><p align=&quot;center&quot;><a href=&quot;doe-4-us-congress-2.htm&quot;>
<img border=&quot;0&quot; src=&quot;index.51.jpg&quot; width=&quot;279&quot; height=&quot;41&quot;></a></td></tr>

Code Excerpt 2 (Clear, valid, and semantic):

<div id=&quot;header&quot;>
<h1>John Doe for US Congress 2010</h1>
<p>4th XY District</p>
<p>Dallas, Baltimore, Topeka, Sacramento, Chapel Hill, Seattle</p>
</div>

<ul id=&quot;mainNavigation&quot;>
<li><a href=&quot;/recent.html&quot;>Recent Events</a></li>
<li><a href=&quot;/give.html&quot;>Donate or Volunteer</a></li>
<li><a href=&quot;/plans.html&quot;>Economic Plan</a></li>
</ul>

Even to someone who doesn’t understand what the tags mean, the second snippet of code is easily readable and more understandable. Imagine how much easier it is for a screen reader or other assistive technology to parse (not to mention the most important blind user out there, Google). It should be pretty clear which elements are important, and which containers are for the heading and the navigation. Extend that concept to the rest of your page and you will be in great shape.

Speaking of semantics, when you’re organizing your content, try your hardest to code the HTML using a natural outline of headings, paragraphs, and other elements (like the following example). It helps me to think of the content in outline form, and then mark up the HTML accordingly.

• h1 – Page Title
  • p – intro paragraph
  • h2 – Subtitle
    • p – related paragraph
    • p – related paragraph
    • h3 – Subtitle
      • p – related paragraph
      • p – related paragraph
  • h2 – Subtitle
    • p – related paragraph
    • p – related paragraph

Offer Helpful Attributes

After your HTML is valid and semantic, make sure that you’re using “alt” attributes on all site images and “title” attributes on all links. If you want to go a step further, you can add “accesskey” attributes on your navigation links for more keyboard controls. Even users with no disabilities sometimes prefer keyboard shortcuts to mouse movements.

Add Presentation and Behavior

Tables are for tabular data, period, so style the page with CSS. Here are some quick tips to keep in mind as you’re planning or evaluating your site’s presentation:

• Use image replacement techniques with caution, as some are more accessible than others, and there is some debate as to which is best to deploy. Choose the best technique for your target audience.
• Keep your text readable by using appropriate line lengths and line heights. The ideal line length is about 12 words per line, and the ideal line height is somewhere in the neighborhood of 120% to 140% (or 1.2em to 1.4em) of the font size.
• Help guarantee the use of legible fonts by using a comprehensive font stack. That doesn’t mean it has to be dull, so start with one of these inspiring stacks.
• Use sufficient contrast to make things easy to see, even on a lousy monitor.
• Add behavior functionality (sparingly) with Javascript, but only after verifying that the site functions entirely without it.

Use Tools To Check Your Work

Here are a few tools that I use (sometimes on a daily basis) to verify that I’m on the right track with a site. A word of warning, though: just because your site checks out with accessibility tools doesn’t automatically mean that your site is accessible. You should spend some time doing usability tests (and preferably a session with screen reader users).

• The W3C Markup Validation Service
• Color Oracle, a free colorblindness simulator
• Web Accessibility Evaluation Tool

Further Reading

There are many places on the web to read about accessibility, but if you’re just getting started, these are the best places to start.

• Boagworld’s posts on accessibility
• Dive Into Accessibility – 30 days to a more accessible web site

Did you like it? Share it!

About The Author

Michael Guill

Michael Guill owns a small web design studio and spends way too much time on the grid. When he's not performing some sort of Interweb jiggery-pokery, he enjoys competing in triathlons, traveling with his family, and flying. You can find him on Twitter, frequently evangelizing the gospels of standards-based web design, accessibility, and progressive enhancement.