jQuery UI 日期选择器可访问性失败

Question

我正在使用 jQuery UI 日期选择器小部件（请参阅 API docs），但我们的可访问性合规性检查器抱怨它插入的按钮图像。特别是它标记 "buttonText" 属性同时用作按钮图像上的 "alt" 和 "title"。

输入：

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

生成的按钮对象如下所示：

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

有没有办法让 alt 和 title 不一样？

Answer 1

查看问题代码，没有直接的方法：

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 })));

因为 buttonText 属性直接应用于 alt 和 title 属性。

选项：

事后以某种方式更改 alt 或 title 属性 JavaScript
制作 jquery-ui 的本地变体，增加一个 buttonTitle 属性 （如果更改被接受，可以说是正确的选择上游）
制作一个 hard-codes 标题的本地变体 （我懒惰的自己所做的）

jQuery UI 日期选择器可访问性失败

jQuery UI datepicker accessibility fail

jquery

accessibility

jquery-ui-datepicker

wcag2.0