Aria 扩展放置

Question

我正在使用 aria-expanded 来尝试使我的树列表更易于访问：

考虑以下几点：

<ul role="tree">
  <li role="tree-item">
     <a href="" aria-label="collapse section" aria-expanded="true"></a>
     <a href="link.html">Link</a>
     <ul role="group">
        <li role="tree-item">List item</li>
        <li role="tree-item">List item</li>
     </ul> 
  </li>
</ul>

我在正确的地方使用 aria-expanded 还是应该在嵌套的 UL 组中？

Answer 1

aria-expanded 应该在打开 sub-tree 的控件上，所以简短的回答是肯定的，假设第一个锚点是控制打开的锚点，它就在正确的位置。

但是，对于给出的示例，有几点需要考虑。

首先你不应该有一个空的超链接。这应该是 <button>.

“按钮做事，链接指向 URL”是一个很好的思考方式，或者“按钮做事，链接去地方”。

其次，从排序的角度来看，您的超链接“link.html”应该在我说要变成按钮的当前超链接之上。 Otherwise the focus order is not logical so you might not pass WCAG 2.4.3.

最后，如果您使用第一个锚点（按钮）来展开和折叠您可能想要向按钮添加 aria-controls="idOfTheItem" 的部分，以确保关系正确（并添加 id="idOfTheItem" 到 <ul> 以正确关联它们）。

最重要的是使用屏幕 reader 进行测试，因为 certain behaviours expected of a tree view 这可能会更难，因为您没有使用典型的设计模式（例如使用箭头键进行导航） .

典型模式

只是让你知道通常你会让 <li> 本身打开子树。您可能会看到一些奇怪的屏幕 reader 行为，将按钮等添加到 tree-item 中，因为这不是预期的。

您最好在此处构建一个自定义小部件，其中包含一个链接列表，旁边带有按钮以展开选项/附加信息。

如果没有看到您的用例，很难判断。

如果你走这条路，那么你可以利用 <details> 和 <summary> 元素。

下面的fiddle应该给你一个想法，注意没有JavaScript它是如何工作的（尽管你需要为IE填充它作为details / summary aren't supported in IE）

如果这是一棵复杂的树，则需要一些或 aria-labels 等来描述每个 <ul>，但正如我所说，这只是一个供您探索的想法，具体取决于在您的用例上，因为 role="tree" 似乎不太适合您的模式。

a{
   float: left;
   width: 100px;
}

<h3 id="descriptionID">An alternative</h3>
<ul aria-labelledby="descriptionID">
  <li>
     <a href="link.html">Link</a>
     <details>
        <summary>Open</summary>
        <ul>
            <li>List item</li>
            <li>List item</li>
        </ul>
     </details>
  </li>
   <li>
     <a href="link.html">Link</a>
     <details>
        <summary>Open</summary>
        <ul>
            <li>List item</li>
            <li>List item</li>
        </ul>
     </details>
  </li>
</ul>

Aria 扩展放置

Aria expanded placement

html

dom

accessibility

wai-aria

典型模式