ColorBox - 將ALT文本添加到圖庫圖像？

有沒有什麼辦法讓ColorBox在它生成的IMG標籤上放置ALT文本？請注意，我不在尋找標題，但是對於屏幕閱讀器可以識別和朗讀的文本替代方法。ColorBox - 將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屬性大聲，這是惱人盲人用戶。這也意味着，如果您的圖像充滿了需要作爲盲人聽衆實際文本重複的文本，則標題對於可用空間而言太大了。因此：

A colorbox with an over-long caption.

注意長標題處冗餘重複多數民衆贊成烘焙到圖像文本的底部。

對此提出建議？

來源

2013-05-14 Will Martin

您可以複製所有標題屬性按alt啓動屬性：（嘗試克隆錨性質似乎不工作）

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

然後自動彩盒複製alt屬性圖像標記。

testing fiddle

來源

2013-05-14 21:52:25 Stano

確實如此，但將ALT屬性複製到A元素並沒有幫助 - Colorbox不知道要將其複製到它在創建有人打開圖庫時創建的IMG中。 –

請問，剛剛在localhost上測試過它，colorbox將alt屬性從anchor複製到img標籤。所以即使沒有黑客攻擊，它似乎也能正常工作。 – Stano

alt屬性只是圖像的有效屬性，不是任何標籤（如錨點）。 –

的彩盒庫提供這個答案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屬性發生在一個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-06 22:41:19 leeo

ColorBox - 將ALT文本添加到圖庫圖像？

回答

相關問題