jquery - 当 aria-expanded 为 true 时，如何让屏幕阅读器正确说出 'button expanded'

Question

我正在努力让我们的 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;
}

我很茫然，任何帮助将不胜感激。

Answer 1

我第二个什么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;
}