CSS 可以帮助改进你的 HTML⁉ - 第 1 集：alt 属性

如果使用得当，CSS 可以使您的 HTML 变得更好！

在这个小系列中，我将使用 CSS 来强制在我们的 HTML 中使用正确的 HTML 元素、可访问性所需的属性等。

这涉及两个方面。

首先，我们构建了 CSS，这样就不会使用错误的元素或属性，而且如果 HTML 错误，样式将不起作用！

第二部分是我们在开发模式下向我们的项目添加样式表，以帮助快速发现错误，然后在生产中将其删除。

为了简单介绍这个概念，我们将使用第二种方法（开发错误检查器样式表）并探索如何使用 CSS 来确保我们始终记住我们的 alt 属性（但也允许装饰图像，其中 alt 属性应留空！）

1. 识别缺失的 alt 属性。

我们首先要采取两件事。

首先，我们需要识别任何alt完全缺失属性的图像。

img:not([alt])

这实际上表明：

• img- 选择所有图像
• :not(- 以下情况不适用
• [alt]- 没有[]名为 的属性（属性用方括号表示）alt（方括号内的位是我们正在选择的属性）。

现在让我们将样式应用于任何img不:not具有 ( ) 属性 ( )[attribute name]的图像 ( alt)。

我们需要识别的另一个问题是，当 alt 属性存在时，但有人没有填写它。

img[alt=""]

这实际上表明：

• img- 选择所有图像
• []- 具有属性
• alt- alt 属性
• =""- 未填写（空白）。

最后一部分还将选取为空的 alt 属性，以便匹配alt和alt=""。

例子

内容管理系统 (CMS) 默认设置

在上面的例子中您可能已经注意到一个问题。

一些 CMS 添加了一些应该替换的默认替代文本。

<img alt="Alt Text">例如。

使用我们当前的解决方案，这些将通过我们的测试，即使替代文本完全没用！

现在您必须针对您的 CMS 进行调整，但原理很简单：

img[alt="Alt Text"]

我们只是寻找img具有“Alt Text”精确替代文本的任何元素（您可以用 CMS 的默认输出替换它）。

但是装饰图像怎么样？

虽然我们的空替代文本检查可能是一个好的开始，但我们偶尔确实想故意alt将该属性留空。

通过添加空的 alt 属性，我们向辅助技术（例如屏幕阅读器）发出信号，“此图像是装饰性的，不应公布”。

那么我们如何在 HTML 中识别这些图像呢？

进入role="presentation none"

如果您对 HTML 还不熟悉，您可能还没有了解 WAI-ARIA。

WAI-ARIA 是一种向辅助技术提供附加信息的方式，从而使页面更有意义。

一个典型的例子就是屏幕阅读器。这是一款软件，它可以将你的 HTML 内容转换成输出（通常是语音文本），这样盲人（例如）仍然可以使用你的网站。

这就是您的alt属性的用途，向辅助技术和关闭图像的人描述图像。

但正如我之前提到的，有时我们会有一些对页面没有任何价值的图像（例如背景图像），我们不想公布。

虽然空alt属性将确保它不会被公布，但我发现添加role="presentation"到img以确保图像不会被公布是一种很好的做法。

让我稍微解释一下：许多元素都有语义含义（一个<img>元素被宣布为图像，一个<section>元素被宣布为一个部分，因此页面的不同部分对于屏幕阅读器等来说是有意义的）。

role="presentation"告诉辅助技术“嘿，这个元素没有语义含义或意义，把它当作一个<div>”，所以它不会宣布元素类型等。

因此，它增加了额外的安全层，因为如果有人意外地在alt装饰图像的属性中添加了一些文本，它仍然不会宣布任何内容（因为本质alt上不能有属性<div>）。

此外，WAI-ARIA 还有一个改进，您应该role="none"在将来添加而不是，role="presentation"因为通过说“无”而不是“演示”，您可以更清楚地看到您正在删除语义信息（但它们的作用相同，它们是同义词）。

不幸的是，目前支持还不是很好role="none"，而且我们正处于转变点，因此建议使用role="presentation none"最大兼容性并为您的 HTML 提供未来保障。

整合所有

因此我们需要一个解决方案：

• 找到缺失的 alt 属性
• 找到空的 alt 属性
• 查找具有特定值的 alt 属性（在我们的示例中为“Alt Text”）
• role忽略包含“presentation”和/或“none”组合的项目上缺少的 alt 属性。

最终的 CSS 选择器和示例

我们的最终 CSS 选择器如下所示：

img:not([alt]),
img[alt="Alt Text"],
img[alt=""]:not([role="none presentation"]):not([role="presentation"])

因此，我们有第一个选择器来检查alt图像上是否存在该属性（即使它为空或为空，它也应该始终如此！）。

然后，我们对 CMS 输出进行第二次检查（以逗号分隔以表示新的选择器），以提醒我们进行更改。

然后我们进行第三次检查，它将选择具有空 alt 属性的任何内容，前提是它没有“presentation”角色或“presentation none”角色。

role="none"请注意，由于支持不是很好，这仍然会失败，role="none presentation"因为这实际上并没有恢复到演示，并且在不支持的辅助技术中无法工作role="none"。

这正是我们所需要的！

一个例子

在下面的 CodePen 中，我设置了一些测试，并在上方标注了它们的预期状态。正如你所见，我们的选择器按预期工作了！太棒了！

我们能更进一步吗？

是的，当然可以！

我们还可以通过 alt 属性的实际内容来发现不良做法！

我的意思是什么？

好吧，如果你写的 alt 描述以“图像”或“图片”开头，那么它们就没用了，而且对于辅助技术用户来说可能非常烦人（请记住，他们已经知道这是一张图像，因为我们使用了一个<img>将自己声明为图像的元素！）。

CSS 具有有限形式的正则表达式，我们可以使用它来实现这一点！

我们可以使用来检查“以...开头” ^=。

因此我们可以使用如下属性选择器：

img[alt^="Image of"]

查找所有[alt以^=文本“Image of”（）开头的 alt 属性（ "Image of"）。

然而这有一个问题！

如果我们有“image of”，它将不匹配，因为选择器默认区分大小写，并且就选择器而言，“Image of”与“image of”不同！。

幸运的是我们还有一个妙招！

我们可以将“i”添加到我们的属性选择器以使其不区分大小写（注意字母 i 前的空格！）！

所以我们的最终选择器变成：

img[alt^="image of" i],
img[alt^="picture of" i]

现在我们也可以突出显示任何 alt 属性较差的项目了！（显然，措辞不当的例子还有很多，这里展示的还不止这些！）

最后的例子

这是最后一个例子，我们在底部添加了两个测试，由于替代文本以“图像”和“图片”开头，它们应该以橙色虚线轮廓显示。

检查其他属性！

如果您还没有听说过核心网络生命力，它们是 Google 用来帮助评估您网页质量/速度的 3 个指标。

其中之一称为累积布局偏移。

本质上，它衡量的是页面在加载时“跳动”的程度，这可能会让用户感到厌烦并导致意外点击等。

布局变化的一个重要原因是图像。

为了避免布局偏移，现代浏览器可以在页面加载之前分配图像在页面上占用的空间，只要您aspect-ratio在 CSS 中使用或为图像提供width和height属性（如果您有多个图像形状和大小，这通常会更好）。

因此，要检查图像是否具有宽度和高度属性，我们可以使用：

img:not([width]),
img:not([height])

alt这与我们之前检查完全缺失的属性的原理相同。

我会将其添加为“警告”，除非您在内部开发指南中明确声明希望所有图像都具有宽度和高度属性！

longdesc

非常感谢 Alvaro 提醒我这个属性，去看看他们的东西，太棒了！

阿尔瓦罗·蒙托罗跟随

CSS 爱好者 ⊆ Web 开发人员 ⊆ 软件开发人员 ⊆ 个人（他/他）

看过 Alvaro 的东西了吗？太好了，我们回去继续吧！

我们还可以做的另一件事是检查已弃用或支持不佳的属性，例如longdesc

这次，我们要对属性是否缺失进行与之前相反的检查（我们想看看它是否存在以抛出错误）。

因此我们可以使用：

img[longdesc]

并添加警告（只要longdesc您已经有了很好的alt描述，就不会造成任何伤害）。

结论

此样式表是强制执行图像最佳实践的有效方法。

正如任何事物一样，这也不是没有缺陷的。

例如，它对有视力障碍的人不起作用。

但是，如果您没有视力障碍，并且想要一种快速而简单的方法来查看您是否记住了您的 alt 属性/是否正确完成了它们，那么它可以作为您的开发工具包的一部分！

在本系列的下一部分中，我们将介绍如何使用 CSS 来确保不良的 HTML 习惯不会继续（例如使用<div role="button"），方法是确保只有正确的元素才允许应用样式！

感谢阅读！

感谢您的阅读，希望您喜欢！

事实上，为了表达我的感激之情，请用虚拟的❤和🦄来表达这对我有多重要！

祝您周末过得愉快！