Implementing Advanced Accessibility

Jordan Sandford - May 13, 2009

After a hiatus, I’m back to give you what I promised: a discussion of advanced tips to help increase your site’s accessibility. One important thing I mentioned in my last post is that if you design or optimize your pages with accessibility as a goal, you may not only gain more visitors, but you will be helping your SEO efforts a great deal.

Keep in mind also, that accessibility not only includes catering to people with disabilities, but to people using non-mainstream browsers. This can include Web TV, Playstation or Nintendo Wii consoles as well as the large variety of cell phone browsers and other operating systems such as the Mac OS and Linux. All these varieties of browsers (most of the modern browsers anyway) endeavor to support the web standards, and the best way to cater to all of them at once it to support web standards in your front-end code (this includes HTML and CSS) and make sure your Javascript is error-free.

I validate (X)HTML and CSS code using the W3C validators. For HTML validation, visit http://validator.w3.org. I typically use the Validate by URI or Validate by Direct Input tabs, and before I run the validation, I make sure Show Source is checked under More Options. This helps to quickly jump to the line of code the error reports mention. You also have the option of listing error messages sequentially or by error type. Be sure to check out their list of error messages and their interpretation page because the error messages aren’t the easiest to understand.

To validate CSS, visit http://jigsaw.w3.org/css-validator. This tool will validate both CSS-only files and HTML files with CSS embedded.

It often happens in web development (and I believe in other industries as well) that increasing the user experience for disabled visitors increases the user experience for non-disabled visitors. One example of this is when you are creating forms (i.e. places that allow the user to enter information and submit their information to you.)

The current version of HTML (4.01) provides several notable features for user experience enhancements of forms. There is the tabindex attribute that allows the user to use the tab key on the keyboard to navigate sequentially through the entire form without using a mouse. The accesskey attribute is similar to the tabindex, but allows the user to instantly get to a text box (or any input area of the form for that matter). There is also the label tag that makes using forms easier: without the label tag, the user will usually have to click (barring the use of tabindex or accesskey) on the input (i.e. any form area that allows the user to enter information or choices into the form). If the input is small (especially relevant to radio inputs, the small circles that allow multiple choice questions), it can be hard for some users to position the mouse precisely enough and hold it still when they click the radio inputs. This may sound far-fetched, but I have witnessed this personally when training people on basic computer skills. The label tag is designed to allow the text describing the input to be clicked on which then activates the input. One easy way to use the label tag is like this:

It will look like this in a browser:

Now when a user clicks on “25 pounds,” the appropriate radio input will be checked.
Another accessibility tip for your web site is especially relevant if you are using any type of Javascript. First, always use the noscript tag, which, in the words of W3C, “allows authors to provide alternate content when a script is not executed.” Also, as websites are using more and more Javascript, what may often happen with browsers that are set to not use Javascript or browsers that cannot use Javascript, is that basic abilities to navigate the site become broken. For example, a user may not be able to go forward or backward in their history when clicking on a Forward or Backward button on the web page. Javascript may become so obtrusive that some web sites, even when viewed in browsers with Javascript enabled, will “break” the browser’s own forward or backward buttons. For more information about obtrusive Javascript, see the A List Apart article, Behavioral Separation.

I mentioned the Web Developer Toolbar in a previous post and want to briefly show how to use a few features.

First, you need the Firefox web browser. Visit www.getfirefox.com to download and install it.

Then, use Firefox and visit the page for the Web Developer Toolbar, https://addons.mozilla.org/en-US/firefox/addon/60.
To show the alternative text of any images, click the Images button in the toolbar and choose Display Alt Attributes. Also under the Images button, you can choose Disable Images > All Images to get a good idea of how well your page conveys its non-textual images.

To disable all CSS on the page, click the CSS button (two buttons to the left of Images) and choose Disable Styles > All Styles.
I look forward to seeing your fresh, new and accessible web pages soon. I hope this series has been informative and usable.