时间戳

首页 > 解决方案 > 当我敲击键盘 Enter 键以访问网页时，我需要展开和折叠纯 CSS 手风琴

javascript - 当我敲击键盘 Enter 键以访问网页时，我需要展开和折叠纯 CSS 手风琴

问题描述

我创建了一个带有输入复选框的手风琴。没有使用Js。当我在键盘上按 Enter 键时，我需要展开和折叠手风琴。它用于网络可访问性。请帮我解决这个问题。

下面的 HTML 代码

<div class="tabs">
        <div class="tab">
          <input type="checkbox" id="chck1" />
          <label class="tab-label" for="chck1">
            Item 1
          </label>
          <div class="tab-content">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
          </div>
        </div>
      </div>

下面的 CSS 代码

$midnight: #2c3e50;
$clouds: #ecf0f1;
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab {
  width: 100%;
  color: white;
  overflow: hidden;
  &-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: $midnight;
    font-weight: bold;
    cursor: pointer;
  }
  &-content {
    max-height: 0;
    padding: 0 1em;
    color: $midnight;
    background: white;
    transition: all .35s;
  }
}
input:checked {
  + .tab-label {
    background: darken($midnight, 10%);
    &::after {
      transform: rotate(90deg);
    }
  }
  ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
  }
}

标签： javascripthtmlcsswebaccessibility

解决方案

您当前模式的问题

我知道当您问一个简单的问题“我该怎么做”并且有人说“改为这样做”时，这很令人沮丧，但是当您将其标记为“可访问性”时，您目前实现此功能的方式是有问题的。

例如<input type="checkbox">， a 不应该存在于 a 之外<form>，因此要使您的 HTML 有效，您必须将其包装在一个<form>元素中。然后，这会改变屏幕阅读器用户的行为，因为屏幕阅读器会进入“表单模式”，从而改变屏幕阅读器的行为。还有其他原因，例如表单模式期望Enter提交某些东西等。

由于您似乎正在寻找可以在没有 JavaScript 的情况下工作的东西（作为后备......您仍然需要 JavaScript 来逐步增强可访问性），我可以建议一种更简单的方法。

<details>和<summary>

我通常不能为问题开出“灵丹妙药”，但<details>实际上<summary>非常棒。

首先支持非常好，大部分语义都会自动为您处理！

使用它的方法很简单，<details>就是你的外包装，它包含<summary>元素。该<summary>元素实际上是您的手风琴部分标题，然后您可以在其<details>下方的部分中添加任何您想要的内容。

请参阅以下小提琴：

<details>
   <summary>Item 1</summary>
   <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!</p>
</details>

正如您所看到的，您在功能上得到了如此多的支持。您还可以在大多数浏览器/屏幕阅读器组合中获得自动属性，例如“展开/折叠”。最后在不支持它的浏览器中，它只是退回到静态内容。

Internet Explorer 等呢？

<details>现在和有几个问题<summary>。Internet Explorer 不支持它。

这是我们使用一些 JavaScript 来提高可访问性的地方。

如果我们稍微修改 HTML 以包含，aria-expanded这可以解决问题。但是，对于 IE 以外的任何浏览器都没有必要这样做，所以我会有条件地添加它。tabindex="0"role="button"

<details>
       <summary role="button" aria-expanded="false" tabindex="0">Item 1</summary>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!</p>
    </details>
    <details>
       <summary role="button" aria-expanded="false" tabindex="0">Item 2</summary>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!</p>
    </details>

您可能还想添加aria-controls完整性，但我想尽可能简单地为您提供 99% 兼容的解决方案。

另请记住，您需要处理切换aria-expanded状态以及实际隐藏和显示内容等。

我发现一个可能有帮助的 polyfill 以及关于标题的最后一句话

这是我找到的一个 polyfill <details>，<summary>看起来不错。我已经确认它是 MIT 许可证，所以你可以使用它。

我会分享我自己的 polyfill，但它有几个依赖项，而这个是独立的。

它似乎还处理了我迄今为止没有讨论过的部分- 标题。如果您使用标题 ( <h2>to <h6>) 来表示每个部分（取决于页面结构是否正确），那么理想情况下这些应该围绕<summary>.

这是因为<summary>被视为按钮。然而，除了标题和部分元素之外，几乎所有其他元素都可以进入该<summary>元素，因为它接受短语内容。

**由于屏幕阅读器用户的导航方式，大多数时候我会说将 a 包装<summary>在适当的级别是有益的，但这不是必需的。**<h2><h6>

造型等

最后一件事可能不会立即显现出来。如果您想根据当前开始（展开/关闭）应用样式，它会open在展开时公开一个属性。

<details open>（扩展）与<details>（关闭）。

您可以将其用于 CSS 选择器以details['open']设置容器details[open]>summary样式和设置摘要样式。

推荐阅读