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

问题描述 投票：0回答：2

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

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 标签？我可以添加一个吗？

image next.js seo nextjs-image
2个回答
6
投票

在生成的代码中，您需要了解一些事情：

<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。它将解码为 SVG 图像，其中 

    width
    和 
    height
    与您的图像相同。加载图像后，它将从 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"
来隐藏元素。然而，目前，此功能并未像使用 null 
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 中删除。我的建议是停止检查您的网络应用程序中的此类内容（与 React 不兼容的内容）。

    每个大型搜索引擎Google（至少）知道如何让您的页面在抓取之前呈现。此外，具有空 

    alt
    属性的图像与没有 
    alt
    属性的图像不同。

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

1
投票

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.