1

有没有办法让 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 属性，这对盲人用户来说很烦人。这也意味着，如果您有一个充满文本的图像需要重复作为盲人听众的实际文本，那么标题对于可用空间来说太大了。因此：

带有超长标题的颜色框。

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

建议？

4

2 回答 2

1

Colorbox 库的作者于 2015 年 3 月在 Github 上提供了这个答案：

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

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

该属性接受元素data-cbox-img-attrs上所需的属性/值对的 JSON 对象。<img>但是，您可以通过更改 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 版上成功地测试了两者。

于 2016-05-06T22:41:19.563 回答
0

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

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

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

测试小提琴

于 2013-05-14T21:52:25.703 回答