本文详解在 angular/javascript 项目中实现“查看更多/查看更少”折叠功能时，如何确保屏幕阅读器（如 nvda）仅读取当前可见内容，避免误读隐藏文本，并提供语义化、健壮且符合 wcag 的解决方案。
本文详解在 angular/javascript 项目中实现“查看更多/查看更少”折叠功能时，如何确保屏幕阅读器（如 nvda）仅读取当前可见内容，避免误读隐藏文本，并提供语义化、健壮且符合 wcag 的解决方案。
在构建论坛类应用的评论卡片时，“展开/收起”交互虽提升了视觉简洁性，但若未兼顾可访问性，极易导致屏幕阅读器用户获取冗余或误导性信息——例如，当卡片处于收起状态（仅显示前两行）时，NVDA 仍会朗读全部被 overflow: hidden 截断的隐藏文本。这是因为 CSS 的 overflow: hidden 或 height 限制仅影响视觉渲染，不改变 DOM 可访问性树：元素及其子文本依然存在于可访问性 API 中，屏幕阅读器照常遍历。
✅ 推荐方案：语义化 HTML + 动态 ARIA 控制（首选）
最可靠、无需 JavaScript 即可工作的基础方案是使用原生 <details> 和 <summary> 元素：
<details class="comment-collapse"> <summary aria-label="展开查看完整评论">查看更多</summary> <p>这是评论的完整内容……包含多段文字、链接和表情符号?。即使被 CSS 截断，屏幕阅读器也只在展开后才读取此处。</p> </details>
✅ 优势：
- 原生支持键盘操作（Enter/Space 展开/收起）、焦点管理与状态切换；
- 自动暴露 aria-expanded 状态，无需手动维护；
- 所有主流屏幕阅读器（NVDA、JAWS、VoiceOver）均能准确识别其开闭语义；
- 完全符合 WCAG 2.1 SC 1.3.1（信息与关系）和 4.1.2（名称、角色、值）。
⚠️ 注意：若需兼容 IE 或定制复杂动画，可保留自定义结构，但必须通过 ARIA 显式声明状态。
✅ 进阶方案：自定义组件 + 动态 aria-hidden 与 aria-expanded
当必须使用自定义按钮（如 Angular 组件）时，应结合 aria-hidden 和 aria-expanded 实现精准控制：
<!-- Angular 模板示例 -->
<div
class="comment-content"
[class.viewMore]="viewMore"
[class.viewLess]="!viewMore"
[attr.aria-hidden]="!viewMore ? 'true' : 'false'"
[attr.aria-expanded]="viewMore ? 'true' : 'false'"
>
<p>{{ comment.text }}</p>
</div>
<button
(click)="toggleView()"
[attr.aria-expanded]="viewMore ? 'true' : 'false'"
[attr.aria-controls]="'comment-' + comment.id"
>
{{ viewMore ? '收起评论' : '展开评论' }}
</button>/* 确保视觉隐藏与可访问性隐藏同步 */
.viewLess {
overflow: hidden;
max-height: 3.6em; /* ≈ 2 行行高 */
line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.viewMore {
max-height: none;
overflow: visible;
}? 关键要点：
- aria-hidden="true" 必须动态绑定，仅在收起状态设置，展开时设为 "false" 或移除该属性；
- aria-expanded 应同时作用于按钮和目标容器，明确传达交互状态；
- 使用 aria-controls 关联按钮与内容区域，提升导航上下文（如 NVDA 的「跳转到受控元素」功能）；
- 禁用 display: none 或 visibility: hidden —— 它们会彻底移除元素于可访问性树，导致展开后无法被读出。
❌ 避免的错误做法
| 错误方式 | 问题说明 |
|---|---|
| 仅靠 overflow: hidden + height 限制 | 屏幕阅读器无视 CSS 渲染逻辑，仍读取全部 DOM 文本 |
| 使用 display: none 切换内容 | 展开后内容不可被屏幕阅读器感知（DOM 被移除） |
| 忘记更新 aria-expanded 状态 | 用户无法通过语音反馈确认当前是“已展开”还是“已收起” |
| 在收起状态下保留 tabindex="0" 或焦点管理 | 可能导致键盘用户聚焦到不可见内容，引发操作困惑 |
✅ 补充增强：为收起状态添加视觉与语义提示
<!-- 收起时显示省略号并标注截断状态 -->
<div class="comment-content" [attr.aria-hidden]="!viewMore ? 'true' : null">
<p>
{{ viewMore ? comment.text : (comment.text | truncate:120) }}
<span *ngIf="!viewMore" aria-hidden="true">…</span>
</p>
</div>同时，在按钮中提供明确的语义化标签：
<button
(click)="toggleView()"
[attr.aria-label]="viewMore
? '收起评论，当前显示全部内容'
: '展开评论，显示剩余 ' + (comment.text.length - 120) + ' 字符'"
>
{{ viewMore ? '收起' : '展开' }}
</button>这样既满足视觉用户对「…」的认知习惯，又通过 aria-label 为屏幕阅读器用户提供精确的操作预期。
总结
解决“收起时屏幕阅读器误读隐藏文本”的核心原则是：视觉隐藏 ≠ 可访问性隐藏。务必通过 ARIA 属性（aria-hidden、aria-expanded、aria-controls）主动声明内容的状态与关系，而非依赖 CSS 副作用。优先采用 <details> 原生语义，其次采用动态 ARIA 控制的自定义方案，并始终以键盘+屏幕阅读器双模测试验证交互流。唯有如此，才能真正实现“对所有人可见，对所有人可读，对所有人可用”。
