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

也许在大尺寸时，照片是一个男人站在树前。但在移动尺寸方面，它只是一张树的图片。

在我看来，只有严格使用"decorative image".

时才会出现这种情况

如果这些图像具有明确的装饰性，并且由于某些原因而无法在CSS中使用它们，则替代文本必须为空。

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

Answer 2

在srcset元素替换src的{{1}}，使用<source>元素的onerror事件和<img>设置window.matchMedia()属性。

alt

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

如何使每个断点都可以访问图片元素？

2 个答案: