当我按下键盘 Enter 键以实现 Web 可访问性时，我需要展开和折叠纯 css 手风琴 [英] I need to expand and collapse pure css accordion when I hit keyboard Enter Key for web accessibility

问题描述

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

下面的 HTML 代码

<div class="tab"><输入类型=复选框"id=chck1"/><label class="tab-label";for=chck1">第 1 项<div class="tab-content">Lorem ipsum dolor 坐 amet consectetur，adipisicing 精英.Ipsum，reiciendis！

CSS 代码如下

$midnight: #2c3e50;$clouds: #ecf0f1;输入 {位置:绝对；不透明度:0；z-索引:-1；}.标签 {宽度:100%；白颜色;溢出:隐藏；&-标签{显示:弹性；对齐内容:间隔；填充:1em；背景:$midnight;字体粗细:粗体；光标:指针；}&-内容{最大高度:0；填充:0 1em；颜色:$午夜；背景:白色；过渡:所有 0.35 秒；}}输入:检查{+ .tab 标签 {背景:变暗($midnight，10%)；&::after {变换:旋转(90度)；}}~ .tab-content {最大高度:100vh；填充:1em；}}

解决方案

你当前模式的问题

我知道当您问一个简单的问题我该怎么做"时会令人沮丧；并且有人说改为这样做"，但是因为您已将其标记为可访问性"您目前的实施方式存在问题.

例如， 不应存在于

之外，因此要使您的 HTML 有效，您将必须将其包装在 元素中.这随后改变了屏幕阅读器用户的行为，因为屏幕阅读器将进入表单模式"这会改变屏幕阅读器的行为.还有其他原因，例如表单模式期望 Enter 提交内容等.

由于您似乎正在寻找无需 JavaScript 也能工作的东西(作为后备……您仍然需要 JavaScript 来逐步增强可访问性)，我可以建议一种更简单的方法.

和

我很少能开出灵丹妙药"；对于一个问题，但

和

实际上非常棒.

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

使用它的方法非常简单，

是您的外部包装器，其中包含

元素.

元素实际上是您的手风琴部分标题，然后您可以在其下方的 部分中添加任何您想要的内容.

请看下面的小提琴:

<摘要>第 1 项</摘要><p>Lorem ipsum dolor 坐在 amet consectetur，adipisicing 精英.Ipsum，reiciendis！</p></details>

如您所见，您在功能上得到了如此多的烘焙.您还可以获得自动属性，例如展开/折叠"；在大多数浏览器/屏幕阅读器组合中宣布.最后在不支持它的浏览器中它只会回退到静态内容.

Internet Explorer 等怎么样?

现在

和

有几个问题.Internet Explorer 不支持它.

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

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

<summary role="button" aria-expanded="false" tabindex="0">项目 1</summary><p>Lorem ipsum dolor 坐在 amet consectetur，adipisicing 精英.Ipsum，reiciendis！</p></详情><详情><summary role="button" aria-expanded="false" tabindex="0">项目 2</summary><p>Lorem ipsum dolor 坐在 amet consectetur，adipisicing 精英.Ipsum，reiciendis！</p></details>

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

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

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

这里是我为

和

找到的 polyfill，看起来不错.我已经确认它是 MIT 许可证，所以你可以使用它.

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

它似乎还涉及到我目前没有讨论的部分 - 标题.如果您使用标题(

到

)来表示每个部分(取决于页面结构是否正确)，那么理想情况下这些应该是 围绕

.

这是因为

被视为一个按钮.然而，除了标题和部分元素之外，几乎所有其他元素都可以进入 <summary> 元素，因为它接受 词组内容.

**大多数时候我会说将

包装在适当的级别

到 < 是有益的.h6> 由于屏幕阅读器用户的导航方式，但这不是必需的.**

造型等

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

(展开)与

(关闭).

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

I have created an accordion with an input checkbox. No Js used. I need to expand and collapse the accordion when I hit Enter Key in the keyboard. It's for web accessibility. please help me to solve this.

HTML code below

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

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

解决方案

The problem with your current pattern

I know it is frustrating when you ask a simple question of "how do I do this" and someone says "do this instead", but as you have marked this as "accessibility" the way you are implementing this at the moment is problematic.

For example an <input type="checkbox"> should not exist outside of a <form>, so to make your HTML valid you would have to wrap it in a <form> element. This then changes the behaviour for a screen reader user as a screen reader would enter "forms mode" which changes the behaviour of the screen reader. There are other reasons such as forms mode expecting Enter to submit something etc. etc.

As you seem to be looking for something that will work without JavaScript (as a fallback....you still need JavaScript to progressively enhance accessibility) may I suggest a much simpler way.

<details> and <summary>

It is not often I am able to prescribe a "magic bullet" for a problem, but <details> and <summary> are actually pretty awesome.

Firstly support is pretty good and most of the semantics are dealt with automatically for you!

The way to use it is pretty simple, <details> is your outer wrapper and this contains the <summary> element. The <summary> element is effectively your accordion section heading and then you can add anything you want within the <details> section below it.

See the following fiddle:

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

As you can see you get so much baked in functionality. You also get automatic properties such as "expanded / collapsed" announced in most browser / screen reader combinations. Finally in browser that don't support it it just falls back to static content.

What about Internet Explorer etc?

Now there are a couple of issues with <details> and <summary>. Internet Explorer does not support it.

This is where we use some JavaScript to improve the accessibility.

If we modify the HTML slightly to include aria-expanded, tabindex="0" and role="button" this fixes the problem. However there is no point doing this for any browser other than IE so I would add it conditionally.

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

You may also want to add aria-controls for completeness but I wanted to give you a 99% compatible solution as simply as possible.

Also bear in mind you would need to handle toggling the aria-expanded state and actually hiding and showing the content etc.

A polyfill I found that may help and a final word on Headings

Here is a polyfill I found for <details> and <summary> that looks pretty good. I have confirmed it is MIT license so you can use it.

I would share my own polyfill but it has several dependencies whereas this one is standalone.

it also appears to deal with a part I left out of discussion so far - headings. If you use headings (<h2> to <h6>) to denote each section (depends on page structure whether correct or not) then ideally these should go around the <summary>.

This is because <summary> is treated like a button. However other than headings and section elements nearly everything else can go into the <summary> element as it accepts phrasing content.

**most of the time I would say it is beneficial to wrap a <summary> in an appropriate level <h2> to <h6> due to how screen reader users navigate, but it is not a requirement. **

Styling etc.

A final thing that might not be immediately apparent. If you want to apply styling based on the current start (expanded / closed) it exposes an attribute open when expanded.

<details open> (expanded) vs <details> (closed).

You can use this for CSS selectors with details['open'] to style the container and details[open]>summary to style the summary.

这篇关于当我按下键盘 Enter 键以实现 Web 可访问性时，我需要展开和折叠纯 css 手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！