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.
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.
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.