我知道<img />与background-image()的话题已经广泛涵盖，但有一个方面我对此表示怀疑。
我的页面上有一个全尺寸滑块。它在背景中展示高分辨率图像，但它们不是语义内容的一部分，只是设计。我想保持图像清晰，但又不拥堵交通。
我喜欢srcset功能，这将是这项工作的绝佳工具，但这需要我使用<img />标签或类似标签。另一方面，我可以坚持使用 CSS 的background-image()并使用@media解决方法(遗憾的是，image-set()还不是标准的(。(在这种情况下，我想避免使用Javascript(。
这两种解决方案都有其缺点。他们每个人将如何影响可访问性和语义方面？
该项目的目标之一是尽可能保持标记的精简和结构化。所以，像这样：
<h1>Welcome to Thiswebsite!</h1>
<p>We do lots of exciting stuff here.</p>
<ul class="slider">
<li>
<h2>Travel & Lifestyle</h2>
<p>This is slide 1. Lorem ipsum text and into. <a href="link">Find out more.</a></p>
</li>
<li>
<h2>Sodomy</h2>
<p>This is slide 2. Wait what? Also info and intro. <a href="link">Spank me.</a></p>
</li>
</ul>
。即使显示为纯文本也不错。但是，将图像放在那里会使导航变得尴尬。这是一个边缘案例，但它确实让我思考布局元素的正确方法是什么。
如果提供的信息不重要，请告诉我。谢谢。
CSS完全没问题。
您也可以选择使用<img>标记，但由于您希望它们不是语义内容的一部分，因此您必须相应地定义它们。
使用<img role="presentation" alt="" />是一个完美的选择。
空alt属性对于屏幕阅读器来说足以使其忽略图像。使用role="presentation"将断言您愿意希望它们不被屏幕阅读器宣布(例如，在可访问性审核的情况下可以避免任何疑问(。