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

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

第一个图像是透明的placeholder，与原始图像大小相同，它允许延迟加载图像而无需内容重排。
通常它只显示几毫秒，可能没有必要为非真实图像包含 alt 标签。

从文档来看，似乎无法将 alt 标记更改为占位符。

Answer 2

您需要了解生成的代码中的一些事项：

<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.
中删除
第二张图片：这是你的图片，但只有当 user/browser 禁用了你的 JavaScript 执行时它才可见站点或不支持它。此外，它还有一个完美的 alt 标签。
第三张图片： 这将是您在启用了 JS 的浏览器中渲染的图片。它目前是一个 1x1 GIF，但脚本会更改其来源以加载它（当用户要查看它时，即图像靠近可见页面）。

为什么您不需要（也不应该添加）除 "" 之外的 alt 属性到占位符：

图像源是内联的，几乎可以保证正确加载。
屏幕 readers（或任何其他辅助技术）不会读取它，因为它有 alt=""、aria-hidden="true" 和 role="presentation"。
这些类型图像的 alt 属性的非空值会给屏幕 reader 输出增加听得见的混乱，并且如果主题不同于在相邻文本中。

参考文献：

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

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text.

Screen readers also allow the use of WAI-ARIA to hide elements by using role="presentation". However, currently, this feature is not as widely supported as using a null alt attribute.

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

Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. This can improve the experience for assistive technology users by hiding:

purely decorative content, such as icons or images

duplicated content, such as repeated text

offscreen or collapsed content, such as menus

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

它有 alt=""，以及我在上面介绍的占位符。
"我可以加一个吗？"

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

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

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

对于可访问性相关的内容，请尝试在网络上检查您的页面。dev/measure、PageSpeed Insights，或在您的本地计算机上使用 Lighthouse 或 Firefox Dev Tools 的可访问性检查器。

Next.js: 使用图像组件时为空 alt 标签

Next.js: empty alt tag when using Image Component

image

next.js

seo

nextjs-image

参考文献：