UDM Blog – Web Accessibility, Development, Marketing and Trends

Keeping you informed on the lastest web development and accessibility information.

5 Easy steps to web accessibility.

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>
	<li><a href="/path/link1">Some Link</a></li>
	<li><a href="/path/link2">Other link</a></li>
<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:


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.

3 Responses to “5 Easy steps to web accessibility.”

  1. RaiulBaztepo says:

    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language ;)
    See you!
    Your, Raiul Baztepo

  2. kempozone says:

    Im sure many of you are like me and one of the first things you do in the morning is head here and check out the new post. Along with seeing the new posts, I’m also always checking out the blog roll rss feed and watching them grow, or shrink sometimes. In one of my past …but all in all excellent site. Keep it up!

  3. Donnieboy says:

    Just wanted to drop you a line to say, I enjoy reading your site. I thought about starting a blog myself but don’t have the time.
    Oh well maybe one day…. :)

Ultimate Dropdown Menu 4.5

UDM is a fully-featured and accessible DHTML dropdown menu, that provides useable content to all browsers - including screenreaders, search-engines, text-only browsers and any web enabled device such as PDAs, iPhones ®, and Blackberrys ®. But having a dropdown menu that makes use of the key benefits of accessibility shouldn't mean compromise, and so UDM includes a sophisticated range of design and usability controls, to give you a tool with unique capabilities:

We'll customise for you!

With our in-depth knowledge we can save you time and money in development.

Get a quote today!

Server-Side Frameworks

UDM is available in a range of server-side frameworks, that generate CSS and scripting on the server, and can bring the total filesize to only 20K!

Recent articles

Initialization trigger element
Defining a trigger element allows the menu script to initialize before window.onload!
The implications of initializing before window.onload
Any scripting you do which is tied into the API "Ready" event (event "010") may need to be checked to make sure it still behaves correctly.
Setting the character-match value for allowed filenames
The file path in the PHP configuration can now contain "\" (backslash) and ":" (colon), for greater compatibility with Windows server paths.
Refreshing the tree after dynamic changes
Using the um.refresh method, you can add or remove items after page load, or populate the menus using AJAX.

Popular extensions

"You are here"
Tells you where you are in the navigation tree.
Load XML
Use an XML document as your menu data source.
Scrolling Menus
Adds up/down scrolling behavior to overlong menus.

See all available extensions


UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.