Show one piece of HTML content, but choose another which is more accessible?

Question

We have a problem with duplication when choosing content containing a screen reader, for example:

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;
}

Using aria-hidden, we can tell screen readers that the second block of content is for display and should not be read aloud. However, highlighting the entire block and using a tool such as the Google Chrome team, both blocks say.

, , ? user-select: none , , , , UX, . . , "", , , .

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

Answer 1

, pointer-events css.

pointer-events , HTML / - / CSS, click/tap 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>

Hide result