jQuery UI datepicker accessibility fail

Question

I'm using the jQuery UI datepicker widget (see API docs), but our accessibility compliance checker is complaining about the button image it inserts. In particular it flags that the "buttonText" attribute gets used as both "alt" and "title" on the button image.

Input:

<input type='text' name='from' id='from' value=''>

<script type='text/javascript'>
$(document).ready(function() {
    $( '#from' ).datepicker({
         buttonImageOnly:   true,
         buttonImage:       '/img/calendar_icon_20x20.png',
         buttonText:        'select date from calendar'
       ...
});
</script>

And the generated button object looks like this:

<img class="ui-datepicker-trigger" src="/img/calendar_icon_20x20.png"
    alt="select date from calendar"
  title="select date from calendar">

Is there some way to make the alt and title not be the same?

Answer 1

Looking at the code in question, there is no direct way to do it:

inst.trigger = $(this._get(inst, "buttonImageOnly") ?
               $("<img/>").addClass(this._triggerClass)
                          .attr({ src: buttonImage, alt: buttonText, title: buttonText }) :
               $("<button type='button'</button>")
                          .addClass(this._triggerClass)
                          .html(!buttonImage ? buttonText : $("<img/>")
                          .attr({ src: buttonImage, alt: buttonText, title: buttonText })));

As the buttonText attribute is directly applied to both the alt and title properties.

Options:

1. Somehow change alt or title properties after the fact with JavaScript
2. Make a local variant of jquery-ui with an additional buttonTitle property (arguably the correct choice if the changes would be accepted upstream)
3. Make a local variant that hard-codes the title (what my lazy self did)