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="0" src="http://www.johndoecongress.com/index.60.jpg" width="548" height="153"> <br> <font face="Impact" color="#00FFFF"><span style="background-color: #000000">4TH XY DISTRICT:</span></font><font color="#FFFF00"><b></b><font face="Impact"> <span style="background-color: #000000">Dallas, Baltimore, Topeka, Sacramento, Chapel Hill, Seattle, ETC.</span></font></font> <tr><td width="27%" bgcolor="#000080" height="1"><p align="center"><a href="doe-4-us-congress-11.htm"> <img border="0" src="index.71.jpg" width="279" height="41"></a></td></tr> <tr><td width="27%" bgcolor="#000080" height="0"><p align="center"><a href="doe-4-us-congress-5.htm"> <img border="0" src="index.55.jpg" width="279" height="41"></a></td></tr> <tr><td width="27%" bgcolor="#000080" height="1"><p align="center"><a href="doe-4-us-congress-2.htm"> <img border="0" src="index.51.jpg" width="279" height="41"></a></td></tr>
Code Excerpt 2 (Clear, valid, and semantic):
<div id="header"> <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="mainNavigation"> <li><a href="/recent.html">Recent Events</a></li> <li><a href="/give.html">Donate or Volunteer</a></li> <li><a href="/plans.html">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.
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.
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.
Thx for your neat, helpful article! Reminds me of the basics very well. Liked the WAVE link as well!
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).
Great post, honest!
http://cypruspropertyplaza.com/
Great post, truly!
http://bricklane-e2.co.uk/
Check out mine!
http://www.htpcfacil.blogspot.com
|正太|小孩图片|儿童图片|可爱小孩|可爱小学生|宝宝|童年|纯真年代|小雨花石|天上星
http://thisbao.com
Great post, truly!
http://www.ny-a-kasse.dk
Great post, truly!
http://latestmobilephone.org
This is your best topic yet!
http://ezinearticles.com/?Urban-Vs-Rural-Geocaching:-How-to-Choose-Which-Cache-Is-Right-For-You&id=6050727
This is your best post yet!
http://www.1Gpt.com/
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/
The Best Free Stuff Join Now
http://getfreestufflegit.weebly.com/index.html
Amazing post, honest!
http://podo.pl
Distro Parfum – Jual Parfum Original Murah dan Terjangkau – toko online parfum indonesia jual parfum murah
http://distroparfum.com
Nice topic to date
http://www.coach-hirelondon.com
This is your best writing yet!
http://makesickbeats.blogspot.com