각 중단 점에 대해 그림 요소에 액세스 할 수있게 만드는 방법은 무엇입니까?

Question

의 당신이 유사한 사진 요소가 있다고 가정 해 봅시다 :

<picture class='my-image'> 
    <source media="(min-width: 1024px)" srcset="large.jpg"> 
    <source media="(min-width: 768px)" srcset="med.jpg"> 
    <source srcset="small.jpg"> 
    <img src="small.jpg" alt=""> 
    <p>Accessible text</p> 
</picture> 

를하지만의 이미지의 컨텍스트는 각 중단 점에 대해 서로 다른 것을 가정 해 봅시다. 아마도 큰 사이즈 일 때, 그 그림은 나무 앞에 서있는 남자의 모습 일 것입니다. 그러나 모바일 크기에서, 그것은 단지 나무의 그림입니다.

때때로 특정 사진 만 전체를위한 하나의 장소에 alt= 속성을 지정할 수 있습니다 그림 요소와, 어쨌든 등, 페이지 레이아웃에

을 따라하지 않는 모바일 크기와 다른 사진에서 잘 작동 그림 요소. 그러나 각 중단 점 사이에서 이미지 컨텍스트가 변경되면 어떻게 든 다른 alt= 특성을 지정할 수 있습니까? 이를 위해 자바 스크립트를 사용해야합니까 (화면 판독기와 다를 수 있음)? <source> 요소에 대한 src

Answer 1

대체 srcset는 <img> 소자 onerror 이벤트를 사용 window.matchMedia() 설정하는 alt 속성.

<script> 
    function handleError() { 
     var sources = document.querySelectorAll("picture source"); 
     var img = document.querySelector("picture img"); 
     for (var i = 0; i < sources.length; i++) { 
     if (window.matchMedia(sources[i].media).matches) { 
      img.setAttribute("alt", sources[i].dataset.alt); 
      break; 
     } 
     } 
    } 
    </script> 
    <picture class='my-image'> 
    <source media="(min-width: 1024px)" srcset="large.jpg" data-alt="large"> 
    <source media="(min-width: 768px)" srcset="med.jpg" data-alt="small"> 
    <source srcset="small.jpg" data-alt="small"> 
    <img src="small.jpg" alt="" onerror="handleError()"> 
    <p>Accessible text</p> 
    </picture> 

plnkr는 http://plnkr.co/edit/GwwHWujq1Nt8V33zmJLS?p=preview

Answer 2

아마도 큰 크기로, 사진은 나무의 앞에 서있는 사람이다. 그러나 모바일 크기에서, 그것은 단지 나무의 그림입니다. 그것은 엄격하게 "decorative image".

를 사용하는 경우 그 이미지가 stictly 장식하고 당신이 CSS에서 특정 이유로 넣어 수없는 경우 이런 종류의 상황에만 나타납니다 나에게 보이는

후 대체 텍스트가 비어있다.

장식용 이미지가 아닌 경우 가장 쉬운 해결책은 자바가 필요없는 두 가지 picture 태그를 사용하는 것입니다.