问题描述
我有一个使用 van11y-accessible-accordion-aria
渲染的手风琴WEbroOT = '/dashboard/'
LOGIN_URL = '/dashboard/auth/login/'
logoUT_URL = '/dashboard/auth/logout/'
当我在 Chrome 中使用 Lighthouse 测试可访问性时，我收到这些消息
要求子元素包含特定 [角色] 的具有 ARIA [角色] 的元素缺少部分或全部所需子元素。 某些 ARIA 父角色必须包含特定的子角色才能执行其预期的辅助功能。了解详情。
[role] 不包含在其所需的父元素中 某些 ARIA 子角色必须包含在特定的父角色中才能正确执行其预期的可访问性功能。了解详情。
了解更多链接转到 https://web.dev/aria-required-children，下面显示的是他们建议的代码示例。
... 这意味着 <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>
作为父级，然后 role="tablist" 作为子级。
在此问题中发布的代码中，与 https://web.dev/aria-required-childre
中的示例相比，我似乎具有正确的标记所以我不知道为什么这会导致可访问性检查失败。
解决方法
role="tab" 必须是 role="tablist" 元素的直接后代（或包含在没有语义意义的元素中）。公平地说，这在 WAI-ARIA 规范中确实不清楚，但我自己以前也遇到过这个问题。 （您可以使用 aria-owns 进行关联，但如果选项卡位于 tablist 元素之外，则更多）
因为您的 <button> 被包裹在 <h2> 中，这打破了模式。
我已经对其进行了测试，它似乎可以在 JAWS 和 NVDA 中运行，但为了安全起见（因为有大量屏幕阅读器，其中一些可能不喜欢您的实现），我会做一个小调整。
移除 <h2> 周围的 <button> 是一种选择，可能也是我推荐的一种。无论如何，在一个小部件上拥有多个 <h2> 元素并没有多大意义，您应该在为该部分创建的选项卡上方使用标题。
第二个选项是使 <h2> 功能类似于按钮，但这意味着添加您自己的事件处理程序、焦点指示器和 tabindex="0" 以使其可聚焦。这样您就可以将 role="tab" 移动到 <h2> 本身，这会删除语义但保留在屏幕阅读器中导航到它的能力。
我个人不喜欢第二种选择，但我能理解为什么有些人会选择这样做。
我建议的另一件事是将 tabs 和 tabpanel 放在 <ul> 和 <li> 中。
对于不支持 tablist 的屏幕阅读器，这意味着用户仍会收到“3 个选项中的 1 个”等的通知。因此更容易理解他们有选项。
此外，建议每个 tabpanel 都有一个 tabindex="0" 以在选择选项卡后帮助导航。这是鼓励使非交互式元素可聚焦的极少数情况之一。
您可能会发现 this W3 page on tab best practices 很有用。