如何在响应式网站上使用CSS,但仍然在图像上提供ALT文本,以便我的网站可以访问？

Question

我在页面顶部有一个带有图像的网站.该网站完全响应.

对于桌面视图,我为网站上的标题加载了一个特定的图像.对于移动视图,我有一个不同的图像.

在CSS中,我使用类似的东西:

 .headerimage { background:url(/images/header-desktop.png) no-repeat top left; }

 @media only screen and (max-width: 480px) {
    .headerimage { background:url(/images/header-mobile.png) no-repeat top left; }
 }

而在HTML中它只是 <div class='headerimage'></div>

我的问题是:如何添加ALT文本(就像我想要的IMG)标签,以便我的网站完全可以访问屏幕阅读器,我获得替代文字的SEO优势等？显然我可以切换到使用IMG标签,但是一旦我有两个IMG标签要处理,这将需要一些严重的黑客来保持响应.

Answer 1

HTML 5引入了picture元素,允许您使用媒体查询指定一系列图像.

<picture>
 <source srcset="/images/header-mobile.png" media="only screen and (max-width: 480px)">
 <img src="/images/header-desktop.png" alt="Foo">
</picture>