jQuery UI datepicker可訪問性失敗

Question

我正在使用jQuery UI datepicker小部件（請參閱API文檔 ），但我們的可訪問性合規性檢查器抱怨它插入的按鈕圖像。 特別是它標記“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屬性。

選項：

1. 事后用JavaScript改變alt或title屬性
2. 使用額外的buttonTitle屬性創建jquery-ui的本地變體（如果上行接受更改，則可以說是正確的選擇）
3. 制作一個硬編碼標題的本地變體（我的懶惰自己做了什么）