当 aria-expanded 为 true 时，如何让屏幕阅读器正确说出“按钮已展开”

Question

我正在努力使我们的手风琴可以通过 aria-expanded 等 aria 标签访问。当单击手风琴触发器标题或按下键盘上的“返回”按钮时，我正确地更改了 aria-expanded 的值。出于某种原因，虽然我用来测试的 ChromeVox 最初只会说“按钮折叠”，但一旦点击后值发生变化，就不会说“按钮展开”。

我查看了其他网站上的示例，例如https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html并且 ChromeVox 在那里正确读取了 aria-expanded 的两种状态，所以我'我认为这是关于我的代码的结构如何阻止 ChromeVox 宣布“扩展”状态。

这是一个手风琴部分的示例：

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

我不知所措，任何帮助将不胜感激。

Answer 1

我同意brennanyoung所说的关于您使用该元素的方式span以及为什么它可能是您的代码无法按您预期工作的原因。

\n\n

在我看来，您确实应该考虑使用该button元素来切换内容，因为这将避免一些额外的工作，例如：

\n\n

\n
• 确保span覆盖整个按钮，以防止单击按钮而导致任何结果（大声说出来听起来很奇怪），
\n
• 处理聚焦span,
\n
• 确保span正确地执行类似button（单击、按下和其他button相关事件）的操作。
\n

\n\n

此外，以编程方式click在代码中触发事件也暗示可以做一些更简单的事情。

\n\n

hidden+aria-labelledby

\n\n

我倾向于通过使用要切换的内容上的hidden属性aria-expanded和切换它的按钮上的属性来使其尽可能简单。

\n\n

如果您需要\xe2\x80\xa6 以及可折叠部分，Heydon Pickering 所著的“包容性组件书”的可折叠部分是一本非常好的读物。事实上整本书都很棒，如果你还没有读过，就不会浪费时间读它。

\n\n

该hidden属性由屏幕阅读器正确处理，并将在视觉上和可访问性树中隐藏该元素。您几乎可以在任何最新的 Web 浏览器 ( https://caniuse.com/#search=hidden ) 上使用它，这使得它成为避免与类和 CSSdisplay属性混用的良好候选者。

\n\n

如果您想在内容上使用aria-labelledby（顺便说一句，有 2 个“L”，您的代码中缺少一个）（您应该这样做，因为您将其声明为一个区域），那么使用文本button作为标签就可以了。

\n\n

但是，如果您计划使用描述操作的文本（例如“显示规则”或“隐藏规则”，具体取决于状态），那么这不再相关，您将不得不使用另一个元素作为这个地标的标签。h4代码中的元素似乎可以完成这项工作，并且给它一个将id让屏幕阅读器更轻松地识别该区域。

\n\n

例子

\n\n

我冒昧地重写了您提供的示例，仅使用纯 JS，并进行了我提到的一些小调整。这里是可以测试的。

\n\n

<div class="accordion-section" id="accordion-1">\n\n    <button id="rules-list" class="rules-toggle" aria-expanded="true" aria-controls="sect-rules">\n        <span>Rules</span>\n    </button>\n\n    <section role="region" class="content" id="sect-rules" aria-labelledby="rules-list-title">\n\n        <h4 id="rules-list-title">What rules must all visitors follow?</h4>\n\n        <ul class="list">\n            <li>rule 1</li>\n            <li>rule 2</li>\n            <li>rule 3</li>\n        </ul>\n\n    </section>\n\n</div>\n

\n\n

const myButton = document.querySelector(\'#accordion-1 .rules-toggle\');\nmyButton.addEventListener(\'click\', toggleRules);\n\nfunction toggleRules(evt) {\n  const button = evt.currentTarget;\n  const accordionSection = button.parentElement;\n  const content = accordionSection.querySelector(\'.content\');\n\n  if (\'hidden\' in content.attributes) {\n    content.removeAttribute(\'hidden\');\n    button.setAttribute(\'aria-expanded\', true);\n  } else {\n    content.setAttribute(\'hidden\', true);\n    button.setAttribute(\'aria-expanded\', false);\n  }\n}\n

\n\n

.rules-toggle + .content {\n  margin-top: 10px;\n  padding: 10px;\n  background-color: white;\n}\n\n.list li {\n  list-style-type: disc;\n  border-top: 0;\n  margin-bottom: 0;\n  padding-bottom: 0;\n  padding-top: 10px;\n  overflow: visible;\n}\n

\n