h1标签内的Svg

Question

我有一个Gatsby项目，我想在那里使用svg作为我的主标题。

import Header from "../images/header.svg"
return (
<h1>
<Header/>
</h1>
)

svg中没有文本(文本完全使用rects和路径(，那么我在可访问性和SEO优化方面该怎么做？

Answer 1

解决此问题的两种方法，视觉隐藏文本或向SVG中添加<title>。

不要使用aria-label，因为支持不是很好(你会看到有人建议，对于SVG，aria-label在静态/非交互式元素上往往不能很好地工作(。

视觉隐藏文本(仅限屏幕阅读器文本(

视觉上隐藏的文本在屏幕上不可见，但屏幕阅读器仍会读取。

请使用下面的CSS类在视觉上隐藏文本，与大多数当前的"；"仅屏幕阅读器"；正如这个答案中所解释的那样，我给了

.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可聚焦的错误，并对屏幕阅读器隐藏SVG。我用youtube图标来表示你的文本，因为这是我手头上最接近的SVG！

将<title>元素添加到SVG中

CCD_ 7元素实际上与正常图像上的CCD_ 8元素相同。使用此功能可以让屏幕阅读器发布一些消息。

显然，你会从中删除aria-hidden="true"，这样屏幕阅读器就可以读取它了！

评论后更新，以包括<title>和/或<desc>的最佳实践

多亏了这些评论，我意识到这个答案缺少一些关于如何正确使用<title>的关键信息。

在我给出的这个答案中，我引用了deque的一系列测试，这些测试表明，使用WAI-ARIA为屏幕阅读器标记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的浏览器(，因为它仍然会显示。这是一个边缘的情况，但仍然是视觉隐藏文本的胜利！