css 在图像和列表之间切换的可访问方式

ecfsfe2w 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(135)

所以我有一个div，默认情况下显示图像，隐藏列表。但单击该按钮会显示列表并隐藏图像。将有一个由这些item div组成的网格。

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

现在我只有一个CSS类

.hidden {
   display: none;
}

一个JS函数

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

有没有更好的方法来解决这个问题？我不确定隐藏东西的方法，还有是否需要aria-hidden？
我可能应该注意到图像的alt文本很重要，因为图像显示的信息是用户无法解码的。
这两个状态应类似于e

css

来源：https://stackoverflow.com/questions/76325398/accessible-way-to-toggle-between-an-image-and-a-list

1条答案

按热度按时间

x8diyxa71#

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

也许这是有道理的？正如在评论中提到的，这种方式的列表是唯一真正被切换为屏幕阅读器用户？

赞(0）回复(0）举报 2023-05-30

我来回答

css 在图像和列表之间切换的可访问方式

1条答案

相关问题

热门标签

最新问答