时间戳

首页 > 解决方案 > 手风琴未通过可访问性检查

testing - 手风琴未通过可访问性检查

问题描述

我有一个使用van11y-accessible-accordion-aria渲染的手风琴

标记输出为：

<div className="c-accordion__items js-accordion accordion" data-accordion-cool-selectors="1" aria-multiselectable="true" role="tablist" id="z3j2diubs8r" data-hashaccordion-id="3o3nlqickh">
   <!-- note role="tablist" above -->
   <div className="c-accordion__item">
      <h2 className="c-accordion__title accordion__title">
         <button className="js-accordion__header accordion__header" role="tab" id="accordionz3j2diubs8r_tab1" aria-controls="accordionz3j2diubs8r_panel1" aria-selected="false" type="button" data-hashaccordion-id="3o3nlqickh" aria-expanded="false">
            <!-- note role="tab" above -->
            The Why
         </button>
      </h2>
      <div className="c-accordion__item-components js-accordion__panel accordion__panel" role="tabpanel"
         aria-labelledby="accordionz3j2diubs8r_tab1" id="accordionz3j2diubs8r_panel1" data-hashaccordion-id="3o3nlqickh"
         aria-hidden="true">
         <div className="c-accordion__item-content">
            <p>Duis vel nibh at velit scelerisque suscipit. Donec vitae sapien ut libero venenatis faucibus. Quisque ut
               nisi. Ut non enim eleifend felis pretium feugiat. Nulla sit amet est.
            </p>
         </div>
      </div>
   </div>
</div>

当我在 Chrome 中使用 Lighthouse 测试可访问性时，我收到了这些消息

具有 ARIA [role] 且要求子级包含特定 [role] 的元素缺少部分或全部所需的子级。一些 ARIA 父角色必须包含特定的子角色才能执行其预期的辅助功能。学到更多。

[角色] 不包含在其所需的父元素中 某些 ARIA 子角色必须包含在特定的父角色中，才能正确执行其预期的可访问性功能。学到更多。

了解更多链接转到https://web.dev/aria-required-children，下面显示的是他们建议的代码示例。

在此处输入图像描述

......这意味着role="tablist"作为父母，然后role="tab"是孩子。

在我在这个问题中发布的代码中，与https://web.dev/aria-required-children中的示例相比，我似乎有正确的标记

所以我不知道为什么这没有通过可访问性检查。

标签： testingaccessibilityaccordion

解决方案

role="tab"必须是元素的直接后代（或包含在没有语义意义的role="tablist"元素中）。公平地说，这在 WAI-ARIA 规范中并不清楚，但我之前自己也遇到过这个问题。（您可以aria-owns用来进行关联，但如果选项卡位于tablist元素之外，则更多）

因为你<button>被包裹在<h2>这打破了模式。

我已经对其进行了测试，它似乎可以在 JAWS 和 NVDA 中工作，但为了安全起见（因为有很多屏幕阅读器，其中一些可能不喜欢你的实现）我会做一个小的调整。

删除<h2>周围的<button>选项是一个选项，可能是我推荐的选项。无论如何，在一个小部件上拥有多个元素并没有多大意义<h2>，相反，您应该在为该部分创建的选项卡上方使用标题。

第二种选择是使<h2>函数像一个按钮，但这意味着添加您自己的事件处理程序、焦点指示器并tabindex="0"使其具有焦点。这样，您可以将role="tab"移到其<h2>自身上，这会删除语义，但保留在屏幕阅读器中导航到它的能力。

我个人不喜欢第二种选择，但我可以理解为什么有些人可能会选择这样做。

我建议的另一件事是将tabsand tabpanels 放在<ul>and<li>中。

对于不支持tablist此功能的屏幕阅读器，意味着用户仍会收到“3 个选项中的 1 个”等通知。因此它更容易理解他们有选项。

此外，一旦选择了选项卡，建议每个tabpanel人都有一个帮助导航。tabindex="0"这是鼓励使非交互式元素可聚焦的极少数情况之一。

您可能会发现此 W3 页面上的选项卡最佳实践很有用。

推荐阅读