时间戳

首页 > 解决方案 > HTML-CSS-JavaScript 交互式树形图中的可访问性问题

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

问题描述

结构如下：

<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元素将被隐藏。

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

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

如果我只在视觉上隐藏那些lis （例如使用 Bootstrap类），那么，从辅助软件的角度来看，这些按钮没有任何作用；在这种情况下，我也可以用!隐藏这些按钮sr-onlyaria-hidden="true"

标签： htmlaccessibilityinteractivescreen-readersuser-interaction

解决方案

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

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

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

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

你可能需要提供一个简短的说明或其他指导来说明事情的表现，尽管精心挑选的按钮标签可能会很好地完成这项工作。

如果您将树本身（最外层<ul>）设置为活动区域，则可以使用aria-relevantand aria-atomic（请参阅https://www.w3.org/TR/wai-aria-1.2/#attrs_liveregions）以便对树进行更改当您单击按钮时宣布。尽管我建议在一系列平台和 AT 上进行测试，但这可能会很好。

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

进行该关联的预期编程aria-controls机制对最终用户的实际好处有限，但根据规范，它应该在您的按钮上，并且该属性的值应该是受以下因素影响的树项元素的 id那个按钮。

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

有趣的案例。祝你好运！

推荐阅读