无法切换到手风琴

Question

出于可访问性的原因，我一直试图让我的手风琴使用键盘标签。我已经使用焦点并尝试了各种方法，但我仍然没有运气。不幸的是，我只是添加到一个原始的 CSS 文件中，所以我不确定是否有什么东西会阻止它？

如你所见，我所需要的只是一些简单的东西。

https://codepen.io/sazzak13/pen/eYpbNVm或代码如下：

var acc = document.getElementsByClassName("accordion-cw");
var i;

for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function () {
    this.classList.toggle("active-accordian-cw");
    
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion-cw {
  background-color: #e2e0e0;
  color: #333333;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  }

.active-cw, .accordion-cw:hover, .accordion:focus {
  background-color: #d2d2d2;
}

.panel-cw {
  padding: 0 18px;
  background-color: #E6E6E6;
  display: none;
  overflow: hidden;
}

.accordion-cw:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px; 
}
.active-cw:after {
content: "\2796";

}

enter code here

<h1>Accordions!</h1>
``<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<button class="accordion-cw">Test</button>
<div class="panel-cw">&nbsp;
	<ul aria-hidden="true">
		<li>Some text</li>
		<li>More text</li>
		<li>And some more</li>
	</ul>
</div>
<button class="accordion-cw">Test 2</button>
<div class="panel-cw">&nbsp;
	<ul aria-hidden="false">
		<li>Some text</li>
		<li>More text</li>
		<li>And some more</li>
	</ul>
</div>

提前谢谢你（这里是菜鸟！） 莎拉

Answer 1

我相信这就是你想要达到的目标？

var acc = document.getElementsByClassName("accordion-cw");
var accArray = [].slice.call(acc);
var i;
var j = 0;
var clicked = false;
var toggle = false;

for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {
    this.classList.toggle("active-accordian-cw");
    if (!toggle) {
      j = accArray.indexOf(this);
      clicked = true;
    }
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}


document.addEventListener('keydown', function(e) {
  if (e.keyCode == 9) {
    if (j >= acc.length) {
      j = 0;
    }
    if (clicked) {
      j++;
      clicked = false;
      if (j >= acc.length)
        j = 0;
    }
    toggle = true;
    accArray.forEach(x => {
      x.classList.remove("active-accordian-cw");
      x.nextElementSibling.style.display = "none";
    });
    acc[j].click();

    toggle = false;
    j++;

    e.preventDefault();
  }
});

.accordion-cw {
  background-color: #e2e0e0;
  color: #333333;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.active-cw,
.accordion-cw:hover {
  background-color: #d2d2d2;
}

.panel-cw {
  padding: 0 18px;
  background-color: #E6E6E6;
  display: none;
  overflow: hidden;
}

.accordion-cw:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active-cw:after {
  content: "\2796";
}

<div class="accordion-cw"><a>Test</a></div>
<div class="panel-cw">&nbsp;
  <ul aria-hidden="true">
    <li>Some text</li>
    <li>More text</li>
    <li>And some more</li>
  </ul>
</div>
<div class="accordion-cw"><a>Test 2</a></div>
<div class="panel-cw">&nbsp;
  <ul aria-hidden="false">
    <li>Some text</li>
    <li>More text</li>
    <li>And some more</li>
  </ul>
</div>

Answer 2

您无法专注于超链接 (<a>) 的原因是它们无效。

要使超链接有效，它必须具有不为空的href 属性。

如果你改变了

<div class="accordion-cw"><a>Test</a></div>

到

<div class="accordion-cw"><a href="#">Test</a></div>

您将能够聚焦并单击每个元素。

有很多需要考虑的地方

虽然上述解决了您的焦点问题，但它并没有使您的手风琴易于访问。

可以在this article on accessible accordions from W3中找到一个很好的学习示例

你会注意到他们使用：

• buttons（因为它们在语义上是正确的，相同页面操作的按钮，新页面的超链接）
• 按钮位于标题内（因为许多屏幕阅读器用户倾向于按标题导航）
• WAI-ARIA 属性，例如 aria-expanded（因此用户知道按钮的状态）等。

那篇文章有很多内容，但它应该为您提供一个很好的使用基础。