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 标签的图像。为什么第一张图片显示时没有 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。它将解码为与您的图像相同的 SVGwidth图像height。加载图像后，它将从 DOM 中删除。

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

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

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

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

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

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

参考：

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

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

屏幕阅读器还允许使用 WAI-ARIA 通过使用 来隐藏元素role="presentation"。然而，目前，此功能没有像使用 nullalt属性那样得到广泛支持。

2. 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 中删除。我的建议是停止检查您的网络应用程序中的此类内容（与 React 不兼容的内容）。

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

  对于与辅助功能相关的内容，请尝试在 web.dev/measure、PageSpeed Insights 上检查您的页面，或者使用 Lighthouse 或 Firefox Dev Tools 的辅助功能检查器在本地计算机上检查您的页面。