ColorBox - добавить текст ALT к изображениям галереи?

Есть ли способ сделать ColorBox помещать ALT текст в теги IMG, которые он генерирует? Обратите внимание, что я НЕ ищу подпись, но для текстовой альтернативы, которую читатели экрана могут распознавать и читать вслух.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'});

Атрибут название элемента привыкает как описательный заголовок.

Но элементы IMG в сгенерированном HTML не имеют атрибута 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

Вы можете скопировать все названия атрибутов альтов атрибутов при запуске: (попытка клонировать свойства якорных, кажется, не работает)

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

Затем ColorBox копирует атрибут альта для тега изображений автоматически.

testing fiddle

источник

2013-05-14 21:52:25 Stano

Правда, но копирование атрибута ALT в элемент A не помогает - Colorbox не знает, чтобы скопировать его в IMG, который он создает, когда кто-то открывает галерею. –

Будет, только что протестировал его на localhost и colorbox, скопировал атрибут alt из привязки в тег img. Так что, похоже, он работает нормально даже без взлома. – Stano

Атрибут alt является действительным атрибутом для изображений, а не любым тегом, таким как привязка. –

Автор библиотеки 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 принимает объект JSON пар атрибутов/значений, которые вы хотите на элементе <img>. Однако вы можете переопределить, как это работает, изменив свойство createImg Colorbox. Причина, по которой я пошел с объектом 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 к изображениям галереи?

ответ

Смежные вопросы