我正在努力让我们的 Accordion 可以使用 aria-expanded 等 aria 标签来访问。当单击 Accordion 触发器标题或按下键盘上的“返回”按钮时,我正确地更改了 aria-expanded 的值。由于某种原因,我用来测试的 ChromeVox 最初只会说“按钮折叠”,但一旦点击后值发生变化,就不会说“按钮展开”。
我查看了其他网站上的示例,例如 https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html ChromeVox 可以正确读取 aria-expanded 的两种状态,因此我认为是我的代码结构问题导致 ChromeVox 无法宣布“扩展”状态。
以下是一个 Accordion 部分的示例:
<div class="accordion-section">
<button tabIndex="0" id="rules_list" class="accordion" aria-expanded="false" aria-controls="sectRules">
<span class="title">Rules</span>
</button>
<div class="content" role="region" id="sectRules" aria-labledby="rules_list">
<h4>What rules must all visitors follow?</h4>
<ul class="list">
<li style="list-style-type:disc; border-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:10px; overflow:visible;">rule 1</li>
<li style="list-style-type:disc; border-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:10px; overflow:visible;">rule 2</li>
<li style="list-style-type:disc; border-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:10px; overflow:visible;">rule 3 etc..</li>
</ul>
</div>
</div>
相关js是:
/* Generic Accordion */
$('.accordion .title').click(function() {
$(this).parent().parent().children('.content').toggle();
$(this).toggleClass('open');
$(this).hasClass("open") ? $(this).parent().attr("aria-expanded", "true") : $(this).parent().attr("aria-expanded", "false");
});
/* Adding support for keyboard */
$('.accordion').on('keydown', function(e) {
if (/^(13|32)$/.test(e.which)) {
e.preventDefault();
$(this).find('.title').click();
}
});
相关的 CSS 是:
.accordion + .content {
display: none;
margin-top: 10px;
padding: 10px;
}
.accordion + .content.open {
display: block;
background-color: white;
}
我很茫然,任何帮助将不胜感激。
最佳答案
我第二个什么brennanyoung介绍了您使用 span
元素的方式以及它可能是您的代码无法按预期工作的原因。
在我看来,您确实应该考虑使用 button
元素来切换内容,因为这将避免一些额外的工作,例如:
- 确保
span
覆盖整个按钮,以防止单击按钮而导致任何结果(大声说出来听起来很奇怪), - 处理聚焦
跨度
, - 确保
span
正确地充当按钮
(单击、按下和其他按钮
相关事件)。
此外,以编程方式触发代码中的 click
事件也暗示可以做一些更简单的事情。
隐藏
+ aria-labelledby
我倾向于通过使用 hidden
attribute 来使其尽可能简单。要切换的内容,以及切换按钮上的 aria-expanded
。
Collapsible Sections of the "Inclusive components book" 如果您需要……嗯,可折叠部分,Heydon Pickering 的著作是一本非常好的读物。其实整本书都很棒,如果你还没有读的话,就不会浪费时间读它。
hidden
属性由屏幕阅读器正确处理,并将在视觉上和辅助功能树中隐藏该元素。您几乎可以在任何最新的 Web 浏览器 ( https://caniuse.com/#search=hidden ) 上使用它,这使其成为避免与类和 CSS display
属性发生冲突的良好候选者。
如果你想在内容上使用 aria-labelledby
(顺便说一句,有 2 个“L”,你的代码中缺少一个)(你应该这样做,因为你将其声明为一个区域),使用 button
文本作为标签效果很好。
但是,如果您打算使用描述操作的文本(例如“显示规则”或“隐藏规则”,具体取决于州),那么这不再相关,您将不得不使用另一个文本元素作为该地标的标签。代码中的 h4
元素似乎可以完成这项工作,并且为其指定一个 id
可以让屏幕阅读器更轻松地识别该区域。
示例
我冒昧地重写了您提供的示例,仅使用纯 JS,并进行了我提到的小调整。可测试here .
<div class="accordion-section" id="accordion-1">
<button id="rules-list" class="rules-toggle" aria-expanded="true" aria-controls="sect-rules">
<span>Rules</span>
</button>
<section role="region" class="content" id="sect-rules" aria-labelledby="rules-list-title">
<h4 id="rules-list-title">What rules must all visitors follow?</h4>
<ul class="list">
<li>rule 1</li>
<li>rule 2</li>
<li>rule 3</li>
</ul>
</section>
</div>
const myButton = document.querySelector('#accordion-1 .rules-toggle');
myButton.addEventListener('click', toggleRules);
function toggleRules(evt) {
const button = evt.currentTarget;
const accordionSection = button.parentElement;
const content = accordionSection.querySelector('.content');
if ('hidden' in content.attributes) {
content.removeAttribute('hidden');
button.setAttribute('aria-expanded', true);
} else {
content.setAttribute('hidden', true);
button.setAttribute('aria-expanded', false);
}
}
.rules-toggle + .content {
margin-top: 10px;
padding: 10px;
background-color: white;
}
.list li {
list-style-type: disc;
border-top: 0;
margin-bottom: 0;
padding-bottom: 0;
padding-top: 10px;
overflow: visible;
}
关于jquery - 当 aria-expanded 为 true 时,如何让屏幕阅读器正确说出 'button expanded',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56399002/