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：

  

您现在可以执行以下操作：

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

     

data-cbox-img-attrs属性接受<img>元素所需的属性/值对的JSON对象。但是，您可以通过更改Colorbox的createImg属性来重新定义其工作方式。我使用JSON对象的原因是因为我不想硬编码应该检查哪些属性。

     

但是如果您不喜欢使用JSON对象，则可以重新定义createImg以提供设置img属性的不同方法。例如：

$.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上成功测试过。

Answer 2

您可以在启动时将所有标题属性复制到alt属性:(尝试克隆锚属性似乎不起作用）

$(function(){
    $('a.group1').each(function(){
        $(this).attr('alt', this.title?this.title:'');
    });
    $(".group1").colorbox({rel:'group1'});
});

然后，colorbox会自动将alt属性复制到图像标记。

testing fiddle