UDM Blog – Web Accessibility, Development, Marketing and Trends

Many people starting out in web development can be easily overwhelmed by all the terminology. Just look at the following sentence…

Just ping the API using PHP and SOAP, parse the XML and apply the correct XSLT to generate valid XHTML and apply your CSS.

Add in terms like WAI, WCAG, and US Section 508 and a beginner, and even mid-level programmer, can easily get lost.

To help budding developers, and those who want to learn more about accessibility and implement it into your web site, I’ve put together this list of 5 easy steps to help you get on the right path.

1) Skip Navigation Links

One of the most important ideas behind accessibility is, well, making your site accessible! Many of us create sites with some type of navigation system. Hopefully it’s a ul / li list, but maybe not. The important thing to keep in mind is that people using assistive technologies may be forced to read your navigation over and over on each page load. To help alleviate this, offer them a “Skip Navigation” link. This will help them navigate to your content quicker and be a big step forward on accessibility.

An example of this is below…

<a href="#skip">Skip Navigation</a>
<ul>
	<li><a href="/path/link1">Some Link</a></li>
	<li><a href="/path/link2">Other link</a></li>
	.
	.
	.
</ul>
<a name="skip" id="skip"></a>

2) Use labels for form elements

I’ll probably get a little flack on this one because there is some debate on the “proper” use of label tags. But the bottom line here is, you need to have some logical method for associating your form input fields with the instructions. There are a couple methods for doing this. One of the best methods is to ensure your labels and form elements are right next to each other. For example:

<label for="first_name">Enter your First Name</label>
<input type="text" id="first_name" name="first_name" />

This example does two things. First, it creates a relationship between the form element with id “first_name” by giving the label tag “for” attribute the same value. Second, it shows the form element immediately following the label.

3) Use high contrast designs
We’ve all seen those chic sites with light grey (gray) text on a white background, or sites with blue text on black backgrounds. Or worse, sites with text over some busy image. The problem here is that you’re making your site hard to read. Harder to read = less accessible.

Not sure how high of a contrast ratio your site has? Check out this link:

http://juicystudio.com/services/luminositycontrastratio.php

It provides a handy online tool that allows you to enter any 2 hex colors and get a contrast ration. You’re shooting for a 3:1 ratio or higher.

In addition to (or in conjunction with) contrast ratio, it’s also important to keep in mind some color design issues. Specifically red-green combinations.

4) Keep font sizes reasonable
Bigger is better here. And thankfully, with a lot of the Web2.0 movement, there has been a dramatic shift towards sites with larger font-sizes and more white space.

If your site uses small fonts, try to offer a mechanism for viewing the content using a larger font. Many sites now are offering the ability for visitors to change the font-size on the site. While many designers may scream about how this “messes” up their design, the bottom line is, your web site should be about your users. Making sure they can read the promotional materials is vital. Using 8pt font may be ok for your personal site, but a professional site should use a larger font.

5) Use alt and title attributes whenever possible
This is probably the easiest to implement, and the biggest bang for your buck as well. While many of the accessibility tips above can have some marginal help on SEO, adding title and alt attributes to links and images can help a search engine better understand your content AND help your users know what the content is for. A couple quick examples:

Example of a descriptive image alt attribute:

<img src="path/to/file.jpg" alt="This is a bird" />

Example of a title attribute on a link:

<a href="/path/to/somewhere.html" title="Find out more about our new Widgets!" >New products</a>

That’s it for now. I hope you find these simple steps helpful. Implementing each of these steps should not be a major task for any web developer and will help you improve your sites accessibility.

Until next time.

This entry was posted on Tuesday, March 3rd, 2009 at 1:12 am and is filed under Accessibility. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.