jquery - ColorBox - 将 ALT 文本添加到图库图像？

Question

有没有办法让 ColorBox 在它生成的 IMG 标签上放置 ALT 文本？请注意，我不是在寻找标题，而是在寻找屏幕阅读器可以识别和朗读的替代文本。

基本的ColorBox画廊看起来像这样:

<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

然后用 JS 初始化，如下所示:

$(".group1").colorbox({rel:'group1'});

A 元素的 TITLE 属性用作描述性标题。

但是生成的 HTML 中的 IMG 元素缺少 ALT 属性。这是一个示例:

<img
    src="/_files/images/photos/primo-tour/tour1.png"
    id="cboxPhoto"
    style="border: medium none; display: block; float: none; cursor: pointer; margin-left: auto; margin-right: auto;"
/>

由于它缺少 ALT 属性，JAWS 和 NVDA 等屏幕阅读器会大声读取 SRC 属性，这对于盲人用户来说很烦人。这还意味着，如果您有一张充满文本的图像，需要将其作为盲人听众的实际文本重复，则标题对于可用空间来说太大了。因此:

请注意底部的长标题，它重复了烘焙到图像中的文本。

建议？

Answer 1

Colorbox 库的作者提供了这个答案 in March 2015 on Github :

You can now do something like the following:

<a class="example" href="example.jpg" data-cbox-img-attrs='{"title": "Hello", "alt"="Goodbye"}'>Grouped Photo 3</a>

The data-cbox-img-attrs attribute takes in a JSON object of attribute/value pairs you want on the <img> element. However, you can redefine how this works by changing Colorbox's createImg property. The reason I went with the JSON object is because I didn't want to hard-code in which attributes should be checked for.

But if you dislike using the JSON object you could redefine createImg to offer a different means of setting the img attributes. For example:

$.colorbox.settings.createImg = function(){
    var img = new Image();
    var alt = $(this).attr('data-alt');
    var title = $(this).attr('data-title');

    if (alt) {
        img.alt = alt;
    }
    if (title) {
        img.title = title;
    }
    return img;
};

我已经在 1.6.1 版本上成功测试了两者。