h1 标签内的 Svg
Svg inside h1 tag
我有一个 Gatsby 项目，我想在其中使用 svg 作为主标题。
import Header from "../images/header.svg"
return (
<h1>
<Header/>
</h1>
)
svg里面没有文字（文字纯粹是用矩形和路径制作的），那么在可访问性和SEO优化方面我该怎么做？
解决此问题的两种方法，视觉上隐藏的文本或向您的 SVG 添加 <title>。
不要将 aria-label 用作 support is not great（您会看到有人建议对于 SVG，aria-label 往往在静态/非交互式元素上效果不佳）。
视觉隐藏文本（屏幕 reader 仅文本）
视觉上隐藏的文本在屏幕上不可见，但仍会被屏幕读取 reader。
请使用下面的 CSS class 以视觉方式隐藏文本，它具有更好的兼容性，并且与大多数当前的“仅 reader 屏幕”class 相比，它具有更好的兼容性并且经得起未来考验es
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<h1>
<span class="visually-hidden">Welcome To Our Site</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</h1>
重要： 请注意我是如何将 focusable="false" 和 aria-hidden="true" 添加到 SVG 的，这是为了修复 Internet Explorer 中存在 SVG 的错误可聚焦并从屏幕 readers 中隐藏 SVG。我使用了一个 youtube 图标来表示您的文本，因为这是我必须提交的最接近的 SVG！
向您的 SVG 添加 <title> 元素。
<title> 元素实际上与普通图像上的 alt 相同。使用它可以在屏幕上 reader 宣布一些内容。
显然你会从中删除 aria-hidden="true" 以便它可以被屏幕读取 reader!
评论后更新以包含 <title> 和/或 <desc>
的最佳实践
感谢评论，我意识到这个答案缺少一些关于如何正确使用 <title> 的关键信息。
I referenced a series of tests by deque 这表明使用 WAI-ARIA 为屏幕 reader 标记 SVG 的最可靠方法是使用 aria-labelledby 并将其指向 <title>（和 <desc>，如果两者都有）。
所以大致的思路如下：
<h1>
<svg aria-labelledby="welcome-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<title id="welcome-title">Welcome To Our Site</title>
<path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</h1>
哪个更好？
寻找视觉上隐藏的文本。
它一直适用于早于 SVG 的 IE6！
它也适用于纯文本浏览器（无法理解 CSS），因为它仍会显示。这是一个边缘案例，但仍然是视觉隐藏文本的胜利！
我有一个 Gatsby 项目，我想在其中使用 svg 作为主标题。
import Header from "../images/header.svg"
return (
<h1>
<Header/>
</h1>
)
svg里面没有文字（文字纯粹是用矩形和路径制作的），那么在可访问性和SEO优化方面我该怎么做？
解决此问题的两种方法，视觉上隐藏的文本或向您的 SVG 添加 <title>。
不要将 aria-label 用作 support is not great（您会看到有人建议对于 SVG，aria-label 往往在静态/非交互式元素上效果不佳）。
视觉隐藏文本（屏幕 reader 仅文本）
视觉上隐藏的文本在屏幕上不可见，但仍会被屏幕读取 reader。
请使用下面的 CSS class 以视觉方式隐藏文本，它具有更好的兼容性，并且与大多数当前的“仅 reader 屏幕”class 相比，它具有更好的兼容性并且经得起未来考验es
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<h1>
<span class="visually-hidden">Welcome To Our Site</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</h1>
重要： 请注意我是如何将 focusable="false" 和 aria-hidden="true" 添加到 SVG 的，这是为了修复 Internet Explorer 中存在 SVG 的错误可聚焦并从屏幕 readers 中隐藏 SVG。我使用了一个 youtube 图标来表示您的文本，因为这是我必须提交的最接近的 SVG！
向您的 SVG 添加 <title> 元素。
<title> 元素实际上与普通图像上的 alt 相同。使用它可以在屏幕上 reader 宣布一些内容。
显然你会从中删除 aria-hidden="true" 以便它可以被屏幕读取 reader!
评论后更新以包含 <title> 和/或 <desc>
的最佳实践
感谢评论，我意识到这个答案缺少一些关于如何正确使用 <title> 的关键信息。
WAI-ARIA 为屏幕 reader 标记 SVG 的最可靠方法是使用 aria-labelledby 并将其指向 <title>（和 <desc>，如果两者都有）。
所以大致的思路如下：
<h1>
<svg aria-labelledby="welcome-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<title id="welcome-title">Welcome To Our Site</title>
<path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</h1>
哪个更好？
寻找视觉上隐藏的文本。
它一直适用于早于 SVG 的 IE6！
它也适用于纯文本浏览器（无法理解 CSS），因为它仍会显示。这是一个边缘案例，但仍然是视觉隐藏文本的胜利！