相关疑难解决方法(0)

我在我的 html 中使用了很多内联 svgs，并且对呈现它们有关可访问性的最佳方式感到有些困惑。

我看到了两种添加<title>和添加<desc>到 svgs 的方法 -

<svg role="img" aria-label="[title + description]">
 <title>title text here</title>
 <desc>a description of the image here</desc>
 <path> etc.
</svg>

<svg role="img" aria-labelledby="my_svg_title my_svg_description">
 <title id="my_svg_title">title text here</title>
 <desc id="my_svg_description">a description of the image here</desc>
 <path> etc.
</svg>

第一种方法似乎是最好的，因为我不必为每个标题和描述提供唯一的 ID（我每页有多个 svg）？是这样吗？选择“aria-label”或“aria-labelledby”时还有什么需要考虑的吗？

此外，我仍然对 < desc > 扮演的角色感到有些困惑 - 它与 alt 完全相同吗？我总是从内联 svgs 中删除 xmlns 和 xmlns:xlink 标签以进行优化，谷歌图像搜索是否仍将这些内联 svgs 引用为图像？会<desc>对此有所帮助吗？

如果内联 svg 将始终显示（内联 svg 是否永远不呈现？）那么<desc>对于丢失的图像将永远没有用，这只会为可以使用它的页面阅读器留下可访问性。他们吗？

基本上值得使用/包括<desc>吗？

我有一个简单的文本，它会更新一个动作，我希望屏幕阅读器可以宣布它。但我不希望该文本在网页上可见。我试过display: none和visibility: hidden，但似乎屏幕阅读器软件无法访问它们。我找到了一种方法来完成这项工作 - 即通过使用负 999999 值一直绝对定位元素，这将使其离开屏幕并从网页中隐藏。我不是这个解决方案的粉丝。有没有更优雅的方法来实现这一目标？

<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>

.aria-invisible {
   display: none; //either of these two attributes
   visibility: hidden;
}