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

Answer 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>