Web Development Insight

Here at Smartlab Software we pride ourselves in trying to make a website as accessible as possible. We try and make the sites conform to section 508 (government) standard and WCAG priorities 1,2, and 3 as best we can. It makes good business sense.

One of the most common improvements is to add a label tag for every text and textarea input tags in a form.

current method

<p><input >Full Name</p>

using a label

<p><input id="fullname" type="text" >
<label for="fullname">Full Name</label></p>

If you want the text to appear before the input box move the label tag before the input tag like this:

<p><label for="fullname">Full Name</label>
<input id="fullname" type="text" ></p>

As you can see it is pretty easy to add the label tag. Your users will thank you for it.

When working in industry on applications, I spent time making sure the tab order was working and in an intuitive order. BTW, to move from element to element one can use the Tab key.
This also holds true for web pages. The WCAG (web content accessibility guidelines) says that Anchor, AREA, BUTTON, INPUT, LABEL, LEGEND, and TEXTAREA elements need the tab order set. The tab order is helpful to anyone.
Each element has a tabindex attribute which is a number starting with 1 which increases sequentially for each element. The focus starts at tabindex 1 and moves to 2 then 3… as the tab key is pressed.
I have yet to find an automated way of setting the tab order.

Doug

This accessibility error took a while to solve. Using the WAI validator mentioned in Sept 26, 2006 blog entry, the following occurred:

Error:
All IFRAME elements are required to contain element content.

Here is the best description on how to fix it. (from Cynthia Says website tutorial)

7. Inline Frame (IFRAME)

Example seven demonstrates the proper accessibility coding for Inline frames. Inline frames prove an excellent TABLE or FRAME alternative. The rule states that all IFRAME elements are required to contain element content.

Current HTML – EXAMPLE 7

In the current HTML the element content for the IFRAME element is not present.

<iframe name=”I1″ src=”sample.htm”>
</iframe>

Corrected HTML– EXAMPLE 7

In the corrected HTML the element content is present.

<iframe name=”I1″ src=”sample.htm”>
Your browser does not support inline frames or is currently configured not to display inline frames. Content can be viewed at actual source page: http://www.smartlabsoftware.com/sample.htm
</iframe>

Doug

Having an accessible website is just good business. Test your web pages for several accessibility conformances using Cynthia Says.

Doug