Как сделать элемент изображения доступным для каждой точки останова?

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=? Вам нужно использовать JavaScript для этого (что может быть или не может быть удобным для чтения с экрана)?

Answer 1

Заменитель srcset для src на <source> элемента, использовать onerror событие из <img> элемента и 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, для которых не требуется никакого Javascript.