html - 如何修复角色 ="tablist"/角色 ="tab"Ax 违规？

Question

我们的页面上有一些具有以下结构的选项卡:

<ul role="tablist">
  <li>
    <div role="tab" tabindex="0" aria-selected="true" aria-controls="id1">First tab content...</div>
  </li>
  <li>
    <div role="tab">Second tab content...</div>
  </li>
</ul>

这在运行 Ax 可访问性测试时会导致两个违规行为，即: <li> elements must be contained in a <ul> or <ol> , 和 Certain ARIA roles must contain particular children (反过来，某些 child 需要特定的 parent 角色)。

据我所知，第一次违规是由于 tablist角色含义 <ul>不再被视为 <ul> .我不明白第二个违规行为，因为规范不强制使用 role="tab" 的元素是 tablist 的直系子女.

防止这些违规行为的一个可能的修复方法是移动 role="tab"直到 <li>元素。然而，问题是不同的违规行为:Nested interactive controls are not announced by screen readers , 由于包含 <div>大概是可以集中注意力的。将其更改为外部 <li>需要大量的 js 和 css 更改，所以这不是一个简单的修复。

这在多大程度上真正需要修复？最佳方法是什么？

Answer 1

斧头错了。 spec for the tab role说:

Authors MUST ensure elements with role tab are contained in, or owned by, an element with the role tablist.

强调我的。注意这是说 tab必须包含一个tablist . 包含在 并不意味着直系子代，而是后代。

如果您查看下一个短语或拥有者，则会进一步强调这一点。 “拥有”有一个 definition :

An 'owned element' is any DOM descendant of the element, any element specified as a child via aria-owns, or any DOM descendant of the owned child.

再说一遍，只要tab是 tablist 的后代( child 、孙子、曾孙等)，那么从技术上讲它是有效的，而 ax 是错误的。

现在，“拥有”的定义为您提供了一条线索，告诉您如何解决 axe 的错误，以防违规行为困扰您。添加aria-owns给你的<ul>并将其指向 tab元素(你的 <div> s)。您的原始代码将像这样通过 ax:

<ul role="tablist" aria-owns="foo1 foo2">
  <li>
    <div id="foo1" role="tab" tabindex="0" aria-selected="true" aria-controls="id1">First tab content...</div>
  </li>
  <li>
    <div id="foo2" role="tab">Second tab content...</div>
  </li>
</ul>

您仍然有 <li> 的问题不包含在 <ul> 中. @graham 涵盖了那部分。我也同意@graham 的观点，你应该遵循 authoring practice for the tab design pattern .