HTML-CSS-JavaScript 交互式树形图中的可访问性问题

Question

结构如下：

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

<figure>
  <ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3

    <li>
      <ul>
        <li>Item 4
        <li>Item 5
        <li>Item 6
      </ul>
    </li>
  </ul>
   
  <figcaption>Tree-graph</figcaption>
</figure>

根据单击的按钮，某些li 元素将被隐藏。

---

如果我用 CSS display: none 隐藏那些 lis，从无障碍软件的角度来看会有什么影响吗？也就是说，它是否仍然像视觉上一样交互式？

或者，我是否必须使用一些 WAI-ARIA 属性？

---

如果我将那些lis 仅在视觉上隐藏（例如使用Bootstrap sr-only 类），那么从无障碍软件的角度来看，这些按钮没有任何作用；在这种情况下，我也可以用aria-hidden="true" 隐藏这些按钮！

Answer 1

这是一个有趣的问题。它似乎是一种奇特的树视图。

首先，请看一下https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView 中描述的树视图模式...问问自己为什么设计中的打开和关闭是由单独的按钮处理的，这种方法几乎肯定需要一些关于的实时区域公告树状态，而 w3 树视图模式将视图的表示（和 AT 公告）与可操作部分集成在一起。

我建议使用 html5 hidden 属性进行隐藏，但 display:none; 也可以（CSS 影响可访问性树的罕见情况）。不要在这里使用sr-only

如果将按钮与树视图分开是绝对固定的要求，我可能倾向于将带有“树”的按钮分组到带有role="application" 的包装器中。您可以使用aria-roledescription 为小部件指定一个比“应用程序”更合适的、特定于域的语义名称，但请谨慎选择，以便提高适当的期望值。

您可能需要提供一个简短的说明或其他指导来说明该事物的行为方式，尽管精心挑选的按钮标签可能会很好地完成这项工作。

如果您将树本身（最外层的<ul>）设为活动区域，则可以使用aria-relevant 和aria-atomic（请参阅https://www.w3.org/TR/wai-aria-1.2/#attrs_liveregions），以便在您单击纽扣。虽然我建议在一系列平台和 AT 上进行测试，但这可能会很好。

您应该将按钮与它们控制的树元素清楚地关联起来，至少通过按钮标签。

用于建立该关联的预期程序化机制aria-controls对最终用户的实际好处有限，但根据规范，它应该在您的按钮上，并且该属性的值应该是受该按钮影响的树项元素的 ID。

您需要在按钮上使用aria-expanded 来描述它们控制的树元素的状态。此属性的状态将在按钮获得焦点时公布。许多 AT 也会在它发生变化时宣布它 - 即当您单击按钮时。

有趣的案例。祝你好运！