主页 / coding / 问题 / 79268796
Accepted
Shtole
Asked: 2024-12-10 23:23:41 +0800 CST

内联 <svg> 文本的可访问性

  • 772

我有以下代码：

<h2>
    Deadpool
    <svg width="53" height="64" class="inline" aria-label="and">
        <use href="#oleo-ampersand"></use>
    </svg>
    Wolverine:<br>
    A StackOverflow Example
</h2>

“&”符号的样式如下：

在此处输入图片描述

现在，我想让屏幕阅读器将其叙述为常规短语（即“死侍和金刚狼”）。添加aria-label="and"到<svg>似乎被忽略了。有办法实现这一点吗？也许，我应该制作整个块aria-hidden并添加一个视觉上隐藏的元素？

此外，如果能以相同的方式复制块就太酷了Ctrl+C，但我猜如果没有 JS 拦截这是不可能的。

html

3 个回答

  1. 不使用 JS 来复制文本确实不是一件容易的事。

    这个标记在屏幕阅读器上对你有用吗？

    document.addEventListener('copy', (event) => {
  const selection = window.getSelection().toString();
  if (selection.includes("Deadpool") && selection.includes("Wolverine")) {
    event.clipboardData.setData('text/plain', "Deadpool and Wolverine");
    event.preventDefault();
  }
});
    .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
    <h2>
  <span class="sr-only">Deadpool and Wolverine</span> Deadpool
  <svg width="53" height="64" class="inline" aria-hidden="true">
        <use href="#oleo-ampersand"></use>
    </svg> Wolverine:
  <br> A StackOverflow Example
</h2>

    • 1
  2. Best Answer

    您还可以将该类仅应用于带有文本内容“and”的.sr-only隐藏。<span>

    如果您的 SVG 不包含任何文本元素，您甚至可以省略该aria-hidden属性。

    为了避免复制文本时出现浏览器不一致的情况，我们可以：

    • 应用于aria-hidden="true"SVG 元素（包含 & 符号）
    • 添加隐藏但可选择/可读的<span>

    您也可以使用应用了所需字体子集版本的 span（示例 1）。在这种情况下，您需要通过aria-hidden="true"以下方式应用并使其不可选择：user-select:none

    body {
  font-family: sans-serif;
}

/** subset version of Oleo - only including ampersans **/
@font-face {
  font-family: "Oleo Script Swash Caps";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("data:font/woff2;base64,d09GMgABAAAAAAMMAA8AAAAABfAAAAK5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbDBwYBmAAPBEICoFggV0LCAABNgIkAwwEIAWEfAcgDAcb4wTIBB74POv9JAM4Y67Agdzuul3iavAk5uevyUfH3wZyAYCR78cyKJoaK2w+kQLK4JlOZAPjqcYWu4QOsXcpavUIwBoHhE2kg/aBWBrGDVylURSkVhRhTm6WJQ/pECYgGaSRSvucZGI8CcIiLJE4OpkN5elMSW1ZOSoqIfKn/1OtivxJ1KtVFBEHpY+GqKS242RwViIUKYRxplojyyohmkaqJqM91x5lNzqR0TTsmqgfmOkF+oJNJDxK/f6z3M7MPHuxzt3ScEt33Xg38JzhgOfSjW6rjXfv3jXe1t0y9L91y9LQ+87wLfoud0ecuSP0d4230V0zXNG32XVMdzw5Vb/B0POy8cFKves6dIs3bonwTzPtPKrf9N9ZfUZtbOi6R+eaP88zrFto15gRoYM7JUzs3KkoVGQsXVHU5WIvP59OSml8p1F1yriu/Vr0aRy+uqRH2/Da/kVD2tzo3//b3sjZ1ilxW1P6fA++E/zps6/VIwBo6TXB5NerCidPsGv7zdxKfofcpTPnI04HtdT/U5UA+RMC897Hore1Pm9TOmqpmqkS0GNW4pLFV5xzkpYu0OlHXGbsKJvjYcwNT0c2bk7W6PgUC03dER1vgiBKOAsS5sJakBnJLkEhhSbBBE8yBFPiSAJbvAM5VFBBCa2JJZZy0ikjlxIqBMVQ/ssCYiimjGxiGUB3+jKAAjIpZgipyOZqUiknhy6kUoJN0XSmmAIyGG5IWTGviilCJZ4Y4ogjAdOqTKrqUZVXv4shFFNLBZVUUEsJmbRGDbRMrQnEEU/C68gKgS5IlFBLkOyBXKwSRjrhRZKobD2bazDaYHy6glTSqaAj5QGJASokZl4ZDYh1JBssdZIMkoRXF6smF1pDY2VkQpuAYhWZZIBlVQpFSgob4gntMgtd12uh7SaBpHqf0KZuU2YD")
    format("woff2");
}

.ampersand {
  font-family: "Oleo Script Swash Caps";
  font-weight: 700;
}


/* SVG ampersand */
.svgText {
  height: 1em;
  transform: scale(1.5) translateY(0.1em);
}


.non-select{
    user-select:none
}

/* hide for not impaired readers */
.sr-only {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  outline:1px solid #ccc
}

textarea {
  display: block;
  width: 100%;
  min-height: 10em;
}

h2{
  white-space: nowrap;
}
    <h2>
    Deadpool <span aria-hidden="true" class="non-select  ampersand">&</span><span class="sr-only">and</span>
    Wolverine
</h2>

<h2>
Deadpool <svg class="svgText" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 138.3"  aria-hidden="true"><path class="glyph" d="M36.2 57.3 L36.3 57.3 Q36.6 58.4 36.6 60.1 Q36.6 61.7 35.9 63.6 L35.9 63.6 L35.3 63.6 Q28.7 63.6 24.2 67.5 Q19.7 71.4 19.7 78.2 Q19.7 84.9 22.9 87.9 Q26.1 90.8 31.2 90.8 Q36.3 90.8 40.1 86.3 Q43.9 81.8 45 75.8 L45 75.8 Q39.4 78.7 36 78.7 Q32.6 78.7 30.4 77.6 Q28.2 76.4 27.3 74.7 L27.3 74.7 Q27.5 74 28.6 72.6 Q29.8 71.2 30.8 71.1 L30.8 71.1 Q32.6 72.2 34.6 72.2 Q36.6 72.2 40.1 70.2 Q43.6 68.2 47.1 65.8 Q50.5 63.5 54.9 61.5 Q59.3 59.5 63.4 59.5 Q67.5 59.5 70.8 62.1 Q74.1 64.6 74.1 69.4 Q74.1 74.2 70.8 77.5 Q67.4 80.8 61.9 80.8 Q56.4 80.8 51.3 76.8 L51.3 76.8 Q51.1 86.9 43.5 94.7 Q35.9 102.4 24.9 102.4 L24.9 102.4 Q18.2 102.4 12.1 99.6 L12.1 99.6 Q4.7 96.4 1.7 89.8 L1.7 89.8 Q0 86.1 0 80.5 Q0 74.8 3.6 69.8 L3.6 69.8 Q10.2 60.8 22.5 60.3 L22.5 60.3 Q17.1 58.9 13.7 55 Q10.2 51.1 10.2 45.6 L10.2 45.6 Q10.2 38.1 16.5 33.8 Q22.8 29.4 31.1 29.4 Q39.3 29.4 45 33 Q50.6 36.6 50.6 42.6 L50.6 42.6 Q50.6 46.7 47.8 49.6 Q45 52.5 41.1 52.5 Q37.2 52.5 34.5 50.2 Q31.7 47.8 31.7 43.7 Q31.7 39.5 35.3 36.7 L35.3 36.7 Q30.7 37 28.9 40.2 Q27 43.3 27 47.2 Q27 51.1 29.4 53.8 Q31.8 56.5 36.2 57.3 L36.2 57.3 ZM66.2 71.5 L66.2 71.5 Q66.2 70.3 65.2 69.2 Q64.2 68 61.8 68 Q59.4 68 53.5 71.2 L53.5 71.2 Q58.7 75.1 62.5 75.1 Q66.2 75.1 66.2 71.5 ZM40.6 45.7 Q41.5 45.7 42.2 44.6 Q42.9 43.4 42.9 41.6 Q42.9 39.7 41.4 38.4 L41.4 38.4 Q38.2 40.3 38.2 43.3 L38.2 43.3 Q38.2 44.4 38.9 45.1 Q39.6 45.7 40.6 45.7 Z " /></svg><span class="sr-only">and</span> Wolverine
</h2>

<h3>Paste text</h3>
<textarea></textarea>

    常用的sr-only规则确保文本仍然可被屏幕阅读器读取和选择 - 尽管对于视力正常的用户而言是不可见的。此技术的主要技巧是通过多个属性使元素不可见，而无需应用disply:none或，visibility:hidden因为两个属性都会将内容从可访问性树中删除。

    另请参阅“A11Y 项目：隐藏内容”

    SVG 到字体的转换

    如果您的内联 SVG 图形不可用作字体 - 您也可以使用SVG 到字体生成器（如icomoon或fontello）将您的资产转换为图标字体。

    子集

    如果您的字体服务不支持子集，您也可以使用transfonter之类的服务进行转换。它还有一个选项可以生成字体资源的 base64 编码 dataURL。

    • 1

  3. 也许，我应该使整个块变为 aria-hidden 并添加一个视觉上隐藏的元素？

    是的，从可访问性树中删除 svg，并添加单词“and”作为视觉隐藏文本。

    <h2>
  <span class="first-line">
    Deadpool
    <svg width="53" height="64" class="inline" aria-hidden="true">
      <use href="#oleo-ampersand"></use>
    </svg>
    <span class="sr-only">and&nbsp;</span> 
    Wolverine:
  </span> 
  A StackOverflow Example
</h2>

    .first-line {
  display: block;
}

    另外，请注意，我删除了br“Wolverine”之后的元素，而是将第一行内容包裹在一个 span 中，并将其显示为 block，以获得所需的换行符。在浏览模式下，如果您使用该元素br强制换行，某些屏幕阅读器会将标题读作两个单独的标题，因此这是一种礼貌的做法，可以防止这种情况发生。

    • 1

相关问题