Something that I have learnt over time is how to make your site accessible for people that don’t have your perfect 20/20 vision, are working from a limited environment or just generally have old browsing capabilities. Believe it or not, people that visit my web sites still use old computers with old copies of Windows. Personally, I have made the Linux switch everywhere I can. That being said, I spend a certain amount of time surfing the web using Lynx. This is not due to the fact that I don’t have a GUI in Linux. I do. And I use firefox for my usual needs, but Lynx has a certain special place in my heart. It is in a class of browser that sees the web in much the same way that a screen reader does. For example, all of those really neat iframes that you use for dynamic content? Yeah, those come up as “iframe.” Totally unreadable. Totally unreachable. Iframe is an example of web technology that is web-inaccessible. Translate this as bad news.
This leads us to the topic at hand: accessibility. Considering that HTML and XHTML are used for simply describing data, why would a page be more or less accessible? Well, let’s think about that kid that has MS, but still needs to get online research done for a class he’s taking, or better yet, consider Stephen Hawking. Do you think that they would be particularly amused if they had to fill out a form and had to be pixel precise to click on the input field? I promise you they wouldn’t.
Accessibility means that regardless of the browser or disability, your page should still be reasonably functional. Now, this does not mean that your page should read minds, but there are some tags that should be very familiar. Learn and use the following:
<acronym> – The acronym tag describes what an acronym means. Hover your mouse pointer over the first instance of HTML, XHTML, SGML and DTD. The full name will pop up. In some screen readers the full text will replace the acronym so that the human can interpret what the acronym means.
<label> – Label tags should be used with form inputs whenever possible. This will ensure that your user will be able to click on either the form element or the associated text and the form element will gain focus.
Aside from these few tags, you should also become familiar with the following attributes:
title – Title can be used on practically any element. This should be used somewhat sparingly though, as using a title with an alt tag, for instance, could spell disaster for a screen reader which cannot interpret all of the attributes precisely as you might expect.
alt – EVERY IMAGE SHOULD HAVE AN ALT TAG! No ifs ands or buts. If the image is included in the page via the <img> tag, use an alt tag. Furthermore, use descriptive alternate text. img_21938740928374.jpg is not useful. I will find out if you are doing this and I will stalk you in the night. Alternate text doesn’t have to be perfect. No two people are going to interpret it in precisely the same way, but if the image is of a bird in flight, use alternate text that says something like “bird in flight.” People will understand enough to get by.
accesskey – The accesskey attribute sets the stage for people that are going to use the keyboard to navigate your site, or perhaps have a limited command set to work from. This attribute enables people to use keyboard shortcuts to access form elements for their ease and convenience. I recommend using this tag in your forms in general, though I strongly urge you to add accesskey to any form elements that a disabled user might be looking to use.
This brings us back to Lynx. Don’t think that I had forgotten. I browse my sites using Lynx. I do this so that I can see what happens when nothing is viewable but text. Lynx doesn’t even give any particular kind of formatting. Pages are just a long string of words. If you can open your site like this and still find everything easily you have successfully made your site accessible. If your page looks like an amorphous mess then you have some work to do.
Now, go forth and make the web a more usable place.