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 に答える