Html 简单滑块-CSS背景图像vs<；img>；对于类似srcset的响应行为&；可接受性？

我知道

的主题是功能性的，这对于这项工作来说是一个很好的工具，但这需要我使用
标签或类似的标签。另一方面，我可以坚持使用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>

欢迎访问本网站！
我们在这里做了很多令人兴奋的事情



旅游与生活方式
这是幻灯片1。Lorem ipsum文本和输入



鸡奸
这是幻灯片2。等等什么？还有信息和介绍




…即使显示为纯文本，也没有那么糟糕。不过，将图像放入其中会使导航变得很困难。这是一个边缘案例，但它确实让我思考如何正确地布局元素

如果提供的信息不充分，请告诉我。谢谢。
CSS非常好

您也可以选择使用
标记，但由于您不希望它们成为语义内容的一部分，因此必须相应地定义它们

使用
是一个完美的选择

空
alt
属性对于屏幕阅读器来说是足够且必需的，以使其忽略图像。使用
role=“presentation”
将表明您愿意让屏幕阅读器不公布这些内容（并且可以避免在可访问性审计的情况下产生任何疑问）。
我不知道
role=“presentation”
，谢谢。至于CSS，你是说你会使用@media querys？@DwarfVader这是装饰图像的标准解决方案。这取决于您的实现，或者例如，如果您希望在其他页面上有不同的图像，…谢谢。我唯一关心的是可伸缩性。假设每个主页都有一个滑块。以后可能会添加或删除页面，或者更改滑块。您会将它们包含在
main.css
中还是按需
滑块名称.css
中？