h1 标签内的 SVG

Question

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

import Header from "../images/header.svg"

return (
  <h1>
      <Header/>
  </h1>
)

svg 中没有文本（文本纯粹使用矩形和路径制作），那么在可访问性和 SEO 优化方面我该怎么做？

Answer 1

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

不要使用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 中。

该元素实际上与普通图像上的<title>元素相同。alt使用此功能可以向屏幕阅读器提供一些要宣布的内容。

显然，您可以从中删除 ，aria-hidden="true"以便屏幕阅读器可以读取它！

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

感谢评论，我意识到这个答案缺乏一些关于如何正确使用<title>.

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