Search code examples
csssection508

508 Compliance title attribute vs a hidden absolutely positioned label


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?


Solution

  • 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