ColorBox - 갤러리 이미지에 ALT 텍스트를 추가 하시겠습니까?

Question

생성하는 IMG 태그에 ColorText 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 특성이 없습니다. 다음은 샘플입니다 : 그것이 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;" 
/> 

, JAWS 및 NVDA 같은 화면 판독기는 시각 장애인 사용자를위한 성가신되는 SRC는, 큰 소리로 속성을 읽어보십시오. 또한 블라인드 리스너를 위해 실제 텍스트로 반복해야하는 텍스트로 가득 찬 이미지가있는 경우 캡션이 사용 가능한 공간에 비해 너무 커짐을 의미합니다. 따라서 :

참고 중복 이미지에 구운 것 텍스트를 반복 맨 아래에있는 긴 캡션.

제안 사항? 당신은 모든 제목을 복사 할 수 있습니다

Answer 1

시작시 속성을 ALT 속성 :

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

가 자동으로 복사합니다 이미지 태그에 alt 속성을 colorbox (앵커 특성을 복제하려고하면 작동하지 않을 것 같다).

testing fiddle

Answer 2

이 대답 in March 2015 on Github 제공 Colorbox 라이브러리의 저자 :

이제 다음과 같은 일을 할 수 있습니다 :

data-cbox-img-attrs 속성은 JSON 객체에 소요

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

<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에 성공 모두를 테스트했습니다.