可展开列表无障碍需求：未展开时屏蔽朗读+CSS动画实现

架构老林

2026-5-15

解决方案：可折叠列表的无障碍支持+平滑动画实现

我来帮你搞定这个问题——既要让屏幕阅读器在列表收起时忽略内部项，又要保留展开/收起的平滑动画，用CSS为主、少量辅助JS的方案就能完美解决，完全符合你的优先CSS要求。

核心思路

之前用display:none或visibility:hidden的问题在于：

display:none会直接移除元素的渲染状态，导致过渡动画无法触发
visibility:hidden只是隐藏视觉，但元素仍在DOM中占据空间，且屏幕阅读器依然会读取内部内容，不符合无障碍需求

我们的替代方案：

用max-height + overflow:hidden实现动画：收起时设max-height:0，展开时设一个足够覆盖内容高度的max-height值，配合CSS过渡实现平滑动画
用ARIA属性控制无障碍：收起时给列表容器加aria-hidden="true"，阻止屏幕阅读器读取；展开时改为false，同时给触发按钮加aria-expanded同步状态，让辅助设备能识别当前状态

完整代码实现

HTML结构

<div class="collapsible-group">
  <!-- 触发按钮：带ARIA属性同步状态 -->
  <button class="collapsible-trigger" aria-expanded="false">
    展开/收起列表
    <span aria-hidden="true">▼</span>
  </button>
  <!-- 可折叠列表：初始隐藏，带ARIA属性控制阅读器访问 -->
  <ul class="collapsible-content" aria-hidden="true">
    <li>内部列表项1</li>
    <li>内部列表项2</li>
    <li>内部列表项3</li>
  </ul>
</div>

CSS样式（动画核心）

.collapsible-trigger {
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  border: none;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

/* 按钮箭头的旋转动画 */
.collapsible-trigger[aria-expanded="true"] span {
  transform: rotate(180deg);
}

.collapsible-trigger span {
  transition: transform 0.3s ease;
}

.collapsible-content {
  max-height: 0; /* 初始收起状态 */
  overflow: hidden; /* 隐藏超出部分 */
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑过渡 */
  margin-top: 0.8rem;
  padding-left: 1.5rem;
  list-style: disc;
}

/* 展开时的状态：设置足够大的max-height覆盖内容 */
.collapsible-content.expanded {
  max-height: 600px; /* 根据实际内容调整，确保大于真实高度 */
}

辅助JS（仅处理ARIA属性和类切换）

const triggerBtn = document.querySelector('.collapsible-trigger');
const contentList = document.querySelector('.collapsible-content');

triggerBtn.addEventListener('click', () => {
  const isExpanded = triggerBtn.getAttribute('aria-expanded') === 'true';
  
  // 切换按钮的展开状态属性
  triggerBtn.setAttribute('aria-expanded', !isExpanded);
  // 切换列表的无障碍隐藏属性
  contentList.setAttribute('aria-hidden', isExpanded);
  // 切换CSS类触发动画
  contentList.classList.toggle('expanded');
});

关键细节说明

动画稳定性：max-height的展开值要设置得比内容实际高度大，避免内容超出导致截断；如果内容高度不确定，也可以用max-height: fit-content（现代浏览器支持），兼容性更好的话还是用固定大值
无障碍合规：aria-expanded和aria-hidden是WAI-ARIA标准属性，能让屏幕阅读器准确识别控件状态和内容的可访问性，完全符合无障碍要求
纯CSS替代方案：如果完全不想用JS，可以用checkbox hack（用隐藏的复选框作为触发器，通过兄弟选择器控制状态），但这种方案在无障碍支持上略逊一筹，因为复选框的语义和按钮不同，所以更推荐上面的少量JS方案

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