ARIA使用指南：如何展开扁平部分列表 兼顾无障碍与SEO

你补充的方案存在的问题 #

辅助技术适配层面 #

• 给按钮父级<li>添加aria-hidden="true"会导致整个按钮对屏幕阅读器完全不可见，视障用户无法找到展开入口，属于严重的无障碍缺陷。
• 如果你用的clip-hidden是仅视觉隐藏、对屏幕阅读器可见的实现方案，会导致视障用户听到的列表总长度和明眼用户看到的不一致，信息不对等会造成使用混乱。

SEO层面 #

没有明显负面影响，所有列表内容都在DOM中，搜索引擎可以正常抓取，不会被判定为恶意隐藏内容。

更简单的兼容实现方案 #

不需要拆分列表，也不需要嵌套结构，完全满足你的要求：

基础结构代码 #

<ul aria-label="内容列表">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>
    <button 
      type="button" 
      id="showMoreBtn"
      aria-expanded="false"
    >
      显示更多
    </button>
  </li>
  <li class="additional-item" hidden>Item 6</li>
  <li class="additional-item" hidden>Item 7</li>
  <li class="additional-item" hidden>Item 8</li>
  <li class="additional-item" hidden>Item 9</li>
  <!-- 剩余列表项 -->
</ul>

交互逻辑 #

1. 点击按钮后，移除所有.additional-item的hidden属性
2. 从DOM中删除按钮所在的<li>元素
3. 可选优化：如果列表项是可交互元素，自动聚焦到第一个新展示的列表项；如果是纯文本，给第一个新展示项添加tabindex="-1"后触发聚焦，方便键盘用户继续操作

方案优势 #

• 无障碍层面：按钮对所有用户可见，aria-expanded明确告知折叠/展开状态，hidden属性保证折叠状态下视觉和屏幕阅读器的信息完全同步，没有信息差。
• SEO层面：所有列表内容始终存在于DOM中，搜索引擎可正常抓取，完全无负面影响，且整个列表保持连续的扁平结构，不会破坏语义。

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