如何使用 svgr 将 alt 添加到作为反应组件导入的 svg答案

【问题标题】：How to add alt to an svg imported as a react component using svgr如何使用 svgr 将 alt 添加到作为反应组件导入的 svg
【发布时间】：2021-10-06 07:12:26
【问题描述】：

我有一个 nextJs 应用程序，其中包含一些使用 SVG 作为组件导入的 SVG 图像。

如何使这些图像易于访问？有没有办法添加alt属性？

【问题讨论】：

你为什么使用svgr？ Next.js 已经有一个可以使用的Image 组件，您可以提及尺寸、填充样式和alt。
这是否回答了您的问题：Alt tag possible for inline SVG?？您应该使用<title> 元素。

标签： reactjs svg next.js accessibility

【解决方案1】：

当您谈论使组件可访问时，您需要考虑该组件如何呈现给用户（即其标签、描述、角色以及与该组件关联的任何值）以及它是否可通过键盘访问。

由于您询问是否将alt 属性（或等效属性）添加到<svg> 组件，我认为您只是想为屏幕阅读器标记<svg>。您可以通过在任何<svg> 容器元素中添加带有文本的<title> 标记来实现此目的。 <title> 标签内的文本将不可见，但会显示为工具提示。

例如：

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
    <circle cx="5" cy="5" r="4">
        <title>I'm a circle</title>
    </circle>
    <rect x="11" y="1" width="8" height="8">
        <title>I'm a square</title>
    </rect>
</svg>

如果页面上已有标记<svg> 的文本，则可以使用<svg> 标记上的aria-labelledby 属性来引用此元素。

请看这里：<title> — the SVG accessible name element

【讨论】：