Angular项目中如何阻止NVDA读取折叠的评论文本？

你的问题核心在于：仅用CSS overflow:hidden 只是视觉上隐藏了超出内容，屏幕阅读器仍会解析完整文本。要实现折叠时不读取隐藏内容，需要从DOM结构或无障碍属性层面处理，以下是几个可行方案：

方案一：用Angular *ngIf 控制内容DOM渲染 #

折叠时直接将超出内容从DOM中移除，展开时再渲染，彻底避免屏幕阅读器读取隐藏部分。

模板代码 #

<div #commentContent class="comment-content">
  {{ truncatedText }}
  <span *ngIf="viewMore">{{ remainingText }}</span>
</div>
<button (click)="toggleViewMore()" [attr.aria-expanded]="viewMore">
  {{ viewMore ? '查看更少' : '查看更多' }}
</button>

组件逻辑 #

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {
  @ViewChild('commentContent') commentContent!: ElementRef;
  commentText = "你的长评论内容...";
  truncatedText = "";
  remainingText = "";
  viewMore = false;
  readonly maxVisibleHeight = 40; // 假设行高20px，两行总高度40px

  ngOnInit(): void {
    this.truncateText();
  }

  truncateText(): void {
    const contentEl = this.commentContent.nativeElement;
    // 先计算完整内容高度
    contentEl.style.height = 'auto';
    const fullHeight = contentEl.offsetHeight;

    if (fullHeight <= this.maxVisibleHeight) {
      this.truncatedText = this.commentText;
      return;
    }

    // 逐步截断文本直到高度符合要求
    let tempText = this.commentText;
    contentEl.textContent = tempText;
    while (contentEl.offsetHeight > this.maxVisibleHeight && tempText.length > 0) {
      tempText = tempText.slice(0, -1);
      contentEl.textContent = tempText + '...';
    }
    this.truncatedText = tempText + '...';
    this.remainingText = this.commentText.slice(tempText.length);
    // 恢复折叠状态高度
    contentEl.style.height = `${this.maxVisibleHeight}px`;
  }

  toggleViewMore(): void {
    this.viewMore = !this.viewMore;
    const contentEl = this.commentContent.nativeElement;
    contentEl.style.height = this.viewMore ? 'auto' : `${this.maxVisibleHeight}px`;
  }
}

CSS补充 #

.comment-content {
  line-height: 20px;
  overflow: hidden;
  transition: height 0.3s ease;
}

方案二：用 aria-hidden 配合CSS隐藏内容 #

给超出部分添加无障碍属性，明确告诉屏幕阅读器忽略该内容，同时用CSS隐藏视觉显示。

模板代码 #

<div class="comment-content" [class.viewMore]="viewMore">
  {{ truncatedText }}
  <span [class.hidden]="!viewMore" [attr.aria-hidden]="!viewMore">
    {{ remainingText }}
  </span>
</div>
<button (click)="toggleViewMore()" [attr.aria-expanded]="viewMore">
  {{ viewMore ? '查看更少' : '查看更多' }}
</button>

CSS代码 #

.comment-content {
  line-height: 20px;
  height: 40px;
  overflow: hidden;
  transition: height 0.3s ease;
}
.comment-content.viewMore {
  height: auto;
}
.hidden {
  display: none;
}

组件逻辑 #

提前将文本截断为truncatedText和remainingText两部分，切换viewMore时控制显示状态即可（截断逻辑可复用方案一中的truncateText方法）。

关键注意事项 #

• 给按钮添加 aria-expanded 属性，让屏幕阅读器用户明确知道当前内容的展开/折叠状态，这是无障碍设计的最佳实践。
• 若使用行高控制显示行数，建议固定line-height值，确保跨浏览器的高度计算一致。

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