显示一段HTML内容，但选择另一段更容易访问的内容？

Question

我们在选择包含屏幕阅读器块的内容时遇到复制问题，如下所示：

https://jsfiddle.net/dowbuabr/1/

<div class="content">
  <div class="screen-reader">2 squared</div>
  <div class="display" aria-hidden="true">2^2</div>
</div>

.screen-reader {
  position: absolute;
  clip: rect(1px,1px,1px,1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

通过使用aria-hidden，我们能够向屏幕阅读器表明，第二个内容块用于显示，不应大声朗读。然而，当高亮显示整个区块并使用像Google Chrome的speak命令这样的工具时，这两个区块都会被朗读。

​

​

当内容块被突出显示时，是否有一种最佳实践来指定应该选择第一段内容？使用user-select: none感觉并不正确，因为如果我们想复制它，它不会突出显示该块，而且即使它在技术上解决了问题，但如果我们突出显示一个隐藏的块，这是一个UX问题。请看下面的屏幕截图，它是“正确的”，但看起来不正确，因为没有视觉提示，我们突出显示了正确的东西。

https://jsfiddle.net/dowbuabr/2/

​

​

Answer 1

我认为您正在寻找pointer-events css属性。

pointer-events属性允许控制HTML元素如何响应鼠标/触摸事件-包括CSS悬停/活动状态、Javascript中的单击/点击事件以及光标是否可见。

​

.avoid-clicks {
  display: block;
  width: 8em;
  height: 8em;
  background: rgba(51,51,51,0.85);
  position: absolute;
  top: 1em;
  left: 4em;
  padding: 0.75em;
  pointer-events: none;
  color: whitesmoke;
}

body {
  font: 14px/1.4 "Trebuchet MS", sans-serif;
  padding: 3em;
  max-width: 600px;
  background: whitesmoke;
}

p {
  padding: 0.75em;
  background: #ddd;
}

<p>This is some basic flow content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eos ipsum sunt repellat nisi modi voluptatum ipsa eligendi minima cumque. Accusantium laudantium autem quae earum eaque expedita quia molestiae in.</p>

<div class="avoid-clicks">try selecting text through me</div>

​