508 Compliance title attribute vs a hidden absolutely positioned label

Question

Is the title attribute ok to use for accesibility when it comes to 508 compliance?

For example:

<style>
    #date_box{width:250px; border:2px solid #AAA;}
    input{width:100px;}
</style>

<div id="date_box">
    <input title="to" type="text" id="to" name="to" />
    <label for="from">from</label>
    <input type="text" id="from" name="from" />
</div>

Or is it best to do a hidden label with an absolute position and a negative margin?

Answer 1

When a visual label on a control is redundant it is OK to use a title attribute. The accessible name calculation for form controls includes the title attribute content, so it is now it has been in the past and will continue to be a robust method to provide an accessible name for a control in the limted circimstances where a visible label is not required. There is a WCAG 2.0 technqiue that covers this. This article provides test results and discussion on this technique: Title Attributes as Form Control Labels

Answer 2

The Section 508 rule about forms is rather abstract: “(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.”

So the questions here are: If you use a form field without a label, can you ensure that any assistive software gives the user access to the text that is logically a label but placed e.g. into the field as default content and/or in a title attribute? And if you use a label but hide it with CSS, is it sure that any assistive software can still make it available to the user.

I don’t think that anyone can guarantee that for all current and future programs, so it is clearly safest to use a normal label and normal label markup.