为 SVG React 组件添加样式和 alt 文本。

Question

我想导入一个SVG图像，使用类进行样式设置，并提供替代文本以使其具有可访问性。但我不确定该如何做。

import { default as LogoSrc, ReactComponent as Logo } from "./logo.svg";

const svgTag = () => {
  // this produces html: <svg class='someClass'/>
  // alt is not visible  
  return <Logo className='someClass' alt='logo'/>  
}
const imgTag = () => {
  // this produces <img src="logo.svg" alt='logo' class='someClass'/>  
  // svg is not styled
  return <img src={LogoSrc} alt="logo"  class='someClass'/>
}

- Kangur

Answer 1

当内联SVG（您的“svgTag”选项）时，如果没有给role =“img”，则无法使用alt属性。

但是，在SVG上添加文本以供屏幕阅读器使用的更好方法是使用<title>属性（类似于图像上的alt）和<desc>属性来提供有关图像的更多详细信息。

这里有一篇由Carie Fisher撰写的关于可访问SVG的优秀文章。

似乎胜出的模式是：

<svg role="img" aria-labelledby="svg1Title" class="someClass">
   <title id="svg1Title">Logo</title>
   [SVG paths etc.]
</svg>

这就是你需要 <Logo 组件生成的最终效果！如果你使用第一个选项（因此可以在文档内使用 CSS 样式，但无法使用第二个选项），然后调整 SVG 包含 <title> 和 aria-labelledby 指向该标题的 ID，那么你将得到所需的内容。关键部分是你的 alt 现在基本上是 <title>，并且你使用 aria-labelledby 将该标题链接到 SVG 以提高兼容性。

在 React 中

从 React 获取这样的 HTML 输出应该是可能的。

<Logo title='accessible Logo title'/>

自从React 3.1以来

- GrahamTheDev

---

非常好。我编辑了你的回答，提供了如何在React中设置标题的方法。 - Kangur

@Kangur没问题，修改得很好，很高兴能帮上忙！ - GrahamTheDevRel

@IngoSteinke 已经修复了手机上编写响应的问题...该死的自动更正，现在已经修复了，发现得好！ - GrahamTheDevRel

@GrahamRitchie甚至没有注意到是谁写的，直到我看到了你的评论 :-) - Ingo Steinke

@IngoSteinke - GrahamTheDevRel