Как сделать элемент изображения доступным для каждой точки останова?
Допустим, у вас есть элемент изображения, похожий на этот:
<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 для этого (который может быть или не быть удобным для чтения с экрана)?
2 ответа
Возможно, в большом размере картина изображает человека, стоящего перед деревом. Но в мобильном размере, это просто изображение дерева.
Мне кажется, что такая ситуация возникает только при использовании строго "декоративного изображения".
Если эти изображения строго декоративны, и вы не можете поместить их по определенным причинам в CSS, то альтернативный текст должен быть пустым.
Если они не являются декоративными изображениями, то самое простое решение - использовать два разных picture теги, которые не требуют никакого Javascript.
Замена 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>