Next.js：使用图像组件时为空的 alt 标记
Posted
技术标签:
【中文标题】Next.js：使用图像组件时为空的 alt 标记【英文标题】：Next.js: empty alt tag when using Image Component 【发布时间】：2021-11-05 08:05:15 【问题描述】：我正在使用以下代码来显示图像：
import Image from 'next/image'
...
<Image src=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" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="/>
</div>
<noscript>
<img srcSet="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&w=96&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&w=256&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&w=256&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 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 标签？我可以在那里添加一个吗？
【问题讨论】：
你的alt="Ausrufezeichen"在那里，你在说什么？
@RyanLe 它出现在两个 您需要在生成的代码中了解以下几点：
<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" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="/>
</div>
<noscript>
<img srcSet="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&w=96&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&w=256&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&w=256&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 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 属性的非空值会在屏幕阅读器输出中增加听得见的混乱，并且如果主题与相邻文本中的主题不同，可能会分散用户的注意力。
参考资料：
-
https://www.w3.org/WAI/tutorials/images/decorative/
在这些情况下，应提供 null（空）
alt文本 (alt="")，以便屏幕阅读器等辅助技术可以忽略它们。如果主题与相邻文本中的主题不同，这些类型的图像的文本值会给屏幕阅读器的输出添加可听的混乱或分散用户注意力。
屏幕阅读器还允许使用 WAI-ARIA 通过
role="presentation"隐藏元素。但是，目前，此功能不像使用空alt属性那样得到广泛支持。
-
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 开发工具的可访问性检查器的本地计算机上检查您的页面。
【讨论】：
SEO 怎么样？我担心这个空白的 ，因为 Bing URL 检查工具说我的图像“alt”标签存在 SEO 问题。我已经填满了所有这些，但正如你提到的，我们仍然有一个空白图像，它有这个空的 alt。你确定它不会影响搜索引擎优化吗？因为 bing 说这是一个“问题” @Charlyberthet 它还说它的严重性较低。此外，如果搜索引擎无法处理图像，它们很可能无法正确解释您的动态内容。并且在线阅读不同的文章，我相信 Bing 还不完全支持 React 和 Angular 应用程序。另外，正如我写的 w3c 所说，空的alt 属性是显示装饰图像的方式。我仍然不明白为什么 Bing 会抱怨这一点。请随时联系他们的支持，引用适当的参考资料。【参考方案2】：
为什么第一个 img 显示时没有 alt 标签？我可以在那里添加一个吗？
第一张图片是透明的placeholder，与原始图片大小相同，它允许延迟加载图片而无需内容回流。 通常它只显示几毫秒，可能不需要为不是真实图像的东西包含 alt 标签。
从文档看来，将 alt 标记更改为占位符是不可能的。
【讨论】：
以上是关于Next.js：使用图像组件时为空的 alt 标记的主要内容，如果未能解决你的问题，请参考以下文章