1

假设您有一个类似于此的图片元素：

<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（可能对屏幕阅读器友好也可能不友好）？

4

2 回答 2

1

也许在大尺寸的情况下，图片是一个人站在树前。但在移动尺寸下，它只是一棵树的图片。

在我看来，这种情况只有在使用严格的“装饰图像”时才会出现。

如果这些图像只是装饰性的，并且由于某些原因您不能将它们放在 CSS 中，那么替代文本必须为空。

如果它们不是装饰图像，那么最简单的解决方案是使用两个picture不需要任何 Javascript 的不同标签。

于 2017-01-31T09:25:22.430 回答
0

替换at元素，使用元素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

于 2017-01-30T19:17:12.810 回答