Getting Started with Web Accessibility

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).

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.

19 Comments on "Getting Started with Web Accessibility"

  1. Joseph says:

    I had never heard of WAVE before. It seems to be a pretty useful tool. It caught some accessibility issues that the W3C validator overlooked (even as XHTML 1.0 Strict). I also didn’t pay much attention to the title attribute. I should definitely do that for image links. Good read.

  2. Great article Michael. As you pointed out, it doesn’t take a lot to make a significant improvement. Just a little thought in the planning stage and some care when creating the markup. You raise another very good point as well. “some is better than none”. That’s so true. Thanks. :-)

  3. Alex says:

    Thx for your neat, helpful article! Reminds me of the basics very well. Liked the WAVE link as well! :)

  4. Richard says:

    Good article. It still amazes me that most people still don’t have a clue about page structure and how it relates to accessibility (and of course search engine optimisation).

  5. Shirley says:

    |正太|小孩图片|儿童图片|可爱小孩|可爱小学生|宝宝|童年|纯真年代|小雨花石|天上星

    http://thisbao.com

  6. Dice says:

    This is your best post yet!

    http://www.1Gpt.com/

  7. Leslie says:

    Amazing post, honest! Great publish! I’m researching because of this info for prolonged time and we have found it the following. I’m a lucky man and honestly It’ really important to me. Gives thanks for kindly discussing it with us.

    http://www.cybermondaydeals.biz/

  8. Distro Parfum – Jual Parfum Original Murah dan Terjangkau – toko online parfum indonesia jual parfum murah

    http://distroparfum.com

Trackbacks for this post

  1. You are now listed on FAQPAL

Got something to say? Go for it!