HTML-CSS-JS交互式树形图使用display:none的可访问性问题咨询

现有实现代码 #

<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>

1. 使用display: none隐藏li元素的无障碍影响 #

• 从无障碍软件（屏幕阅读器等）的识别逻辑来看，display: none会将元素同时从视觉渲染树和无障碍访问树中完全移除，视觉用户和辅助技术用户都无法感知到被隐藏的li元素的存在，表现完全一致，不存在额外不良影响。
• 这种方案下可交互性和视觉表现是匹配的：元素既无法被视觉看到，也无法被辅助技术聚焦、朗读，交互状态完全同步。

2. 是否需要搭配WAI-ARIA属性 #

即便用display: none实现隐藏，也需要补充必要的ARIA属性来提升无障碍体验，至少需要补充以下内容：

• 操作按钮需要添加aria-expanded属性，动态更新值来表示当前控制的树形节点是展开（true）还是折叠（false）状态
• 操作按钮添加aria-controls属性，值为对应控制的li元素的ID，明确按钮和受控节点的关联关系
• 树形结构本身建议补充标准的树形角色：外层ul添加role="tree"，每个li节点添加role="treeitem"，嵌套的子ul添加role="group"，符合WAI-ARIA的树形组件规范

3. 仅用sr-only类视觉隐藏场景的处理 #

首先不建议用sr-only类来实现交互性的节点隐藏逻辑，sr-only的设计目的是给辅助技术用户提供额外的视觉外提示信息，不是用来隐藏交互元素的：

• 该场景下li元素视觉上不可见，但会被屏幕阅读器正常朗读，视觉表现和辅助技术感知完全不一致，属于无障碍缺陷
• 绝对不能给对应操作按钮添加aria-hidden="true"：按钮是视觉可见可点击的交互元素，添加aria-hidden="true"会导致辅助技术用户完全找不到该按钮，无法执行操作，会进一步扩大无障碍问题
• 这种场景下如果非要保留sr-only的视觉隐藏方案，应该给被隐藏的li元素同步添加aria-hidden="true"，让辅助技术也忽略该元素，保证两边感知一致，但依然更推荐直接用display: none实现，避免冗余处理。

内容的提问来源于stack exchange，提问作者a_das