Next.js：使用图像组件时为空的 alt 标记

Question

我正在使用以下代码来显示图像：

import Image from 'next/image'
...
<Image src={ausrufezeichen} alt="Ausrufezeichen"/>

正在呈现以下 HTML 代码：

<div style="display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0">
    <div style="box-sizing:border-box;display:block;max-width:100%">
        <img style="max-width:100%;display:block;margin:0;border:none;padding:0" alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="/>
    </div>
    <noscript>
        <img alt="Ausrufezeichen" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=96&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
    </noscript>
    <img alt="Ausrufezeichen" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
</div>

当我刚刚使用“SEO Minion”检查我的 SEO 状态时，我注意到我看到了很多没有 alt-tag 的图像。 为什么第一个 img 显示时没有 alt 标签？我可以在那里添加一个吗？

Answer 1

您需要在生成的代码中了解以下几点：

<div style="display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0">
    <div style="box-sizing:border-box;display:block;max-width:100%">
        <img style="max-width:100%;display:block;margin:0;border:none;padding:0" alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="/>
    </div>
    <noscript>
        <img alt="Ausrufezeichen" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=96&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
    </noscript>
    <img alt="Ausrufezeichen" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
</div>

• 第一张图片：这是一个占位符，用于防止CLS。它将解码为与您的图像相同的width 和height SVG 图像。加载图像后，它将从 DOM 中删除。

• 第二张图片：这是您的图片，但仅当用户/浏览器禁用您网站的 JavaScript 执行或不支持它时才可见。此外，它还有一个完美的alt 标签。

• 第三张图片：这将是您在启用了 JS 的浏览器中渲染的图片。它目前是 1x1 GIF，但脚本会更改其来源以加载它（当用户即将查看它时，即图像靠近可见页面时）。

---

为什么不需要向占位符添加（也不应该添加）alt 属性而不是 ""：

• 图像源是内联的，几乎可以保证正确加载。

• 屏幕阅读器（或任何其他辅助技术）不会阅读它，因为它有 alt=""、aria-hidden="true" 和 role="presentation"。

• 对于这些类型的图像，alt 属性的非空值会在屏幕阅读器输出中增加听得见的混乱，并且如果主题与相邻文本中的主题不同，可能会分散用户的注意力。

参考资料：

1. https://www.w3.org/WAI/tutorials/images/decorative/

在这些情况下，应提供 null（空）alt 文本 (alt="")，以便屏幕阅读器等辅助技术可以忽略它们。如果主题与相邻文本中的主题不同，这些类型的图像的文本值会给屏幕阅读器的输出添加可听的混乱或分散用户注意力。

屏幕阅读器还允许使用 WAI-ARIA 通过 role="presentation" 隐藏元素。但是，目前，此功能不像使用空 alt 属性那样得到广泛支持。

1. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute

将aria-hidden="true" 添加到元素会从可访问性树中删除该元素及其所有子元素。这可以通过隐藏来改善辅助技术用户的体验：

• 纯装饰性内容，例如图标或图片
• 重复的内容，例如重复的文字
• 屏幕外或折叠的内容，例如菜单

---

• “为什么第一个 img 显示时没有 alt 属性？”

  它有alt=""，还有我上面提到的占位符。

• “我可以在那里添加一个吗？”

  您几乎可以通过编写自己的脚本来做任何事情。此处需要搜索此类元素，并相应添加alt文本。

  但 Next.js 出于完全正当的理由没有提供类似的东西。此外，它不会出现在您的页面源中。您的 SEO 分析器可能只检查页面源，因为一旦呈现图像，占位符就会从 DOM 中删除。我的建议是停止检查您的 Web 应用程序的此类内容（与 React 不兼容的内容）。

  每个大型搜索引擎 Google（至少）知道如何让您的页面在抓取之前呈现。此外，alt 属性为空的图像与没有alt 属性的图像不同。

  对于与可访问性相关的内容，请尝试在 web.dev/measure、PageSpeed Insights 或使用 Lighthouse 或 Firefox 开发工具的可访问性检查器的本地计算机上检查您的页面。

Answer 2

为什么第一个 img 显示时没有 alt 标签？我可以在那里添加一个吗？

第一张图片是透明的placeholder，与原始图片大小相同，它允许延迟加载图片而无需内容回流。
通常它只显示几毫秒，可能不需要为不是真实图像的东西包含 alt 标签。

从文档看来，将 alt 标记更改为占位符是不可能的。