Accessible way to toggle between an image and a list

Question

So I have a div where the image is shown by default, and the list is hidden. But clicking the button shows the list and hides the image. There will be a grid of these item divs.

<div class="item">
  <div class="item__content">
    <img src="..." alt="<Relevant text>" id="image">
    <ul class="hidden" id="list">
      <li>Detail 1</li>
      <li>Detail 2</li>
      <li>Detail 3</li>
      <li>Detail 4</li>
    </ul>
  </div>
  <div class="item__heading">
    <div class="item__heading__text">
      <h3>Item name</h3>
      <h4>Item brand</h4>
    </div>
    <button onclick="toggleContent()" aria-controls="image list">Details</button>
  </div>
</div>

And currently I just have a CSS class like

.hidden {
   display: none;
}

and a JS function

function toggleContent() {
  const image = document.getElementById("image");
  const list = document.getElementById("list");
  image.classList.toggle("hidden");
  list.classList.toggle("hidden");
}

Is there a better way to approach this? I'm unsure about the method of hiding things, and also if there is any need for aria-hidden?

I should probably note that the alt text of the image is important, as the image displays information that users would otherwise not be able to decude.

The two states should look something like

I wonder if it makes sense to toggle an `sr-only` class for the image instead of `hidden`? It seems more logical to hide the image for sighted users only — J P, May 24 '23 at 16:20
I don't see anything inherently inaccessible about this - noting that elements hidden with `display: none` are also [removed from the accessibility tree](https://stackoverflow.com/questions/67370826/which-css-properties-affect-the-accessibility-tree), so there's no need for `aria-hidden`. You'll have to test with actual screenreaders - ideally doing user testing with users who use screenreaders all the time - to determine actual usability, but this is always the case. — Robin Zigmond, May 24 '23 at 21:21

score 0 · Answer 1 · answered May 24 '23 at 16:36

<div class="item">
    <div class="item__content">
      <img src="..." alt="..." id="image">
      <ul class="hidden" id="list">
        <li>Detail 1</li>
        <li>Detail 2</li>
        <li>Detail 3</li>
        <li>Detail 4</li>
      </ul>
    </div>
    <div class="item__heading">
      <div class="item__heading__text">
        <h3>Item name</h3>
        <h4>Item brand</h4>
      </div>
      <button onclick="toggleContent()" aria-controls="list">Details</button>
    </div>
  </div>

.sr-only {
    border: 0 !important;
    clip: rect(1px 1px 1px 1px);
    clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden !important;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

ul {
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none;
}

function toggleContent() {
  const image = document.getElementById("image");
  const list = document.getElementById("list");
  image.classList.toggle("sr-only");
  list.classList.toggle("hidden");
}

Perhaps this makes sense? As mentioned in the comments, this way the list is the only thing really being toggled for screenreader users?

Accessible way to toggle between an image and a list

1 Answers1