Chrome中aria-label读取含HTML标签内容问题：如何仅朗读文本内容？

你遇到的问题根源在于aria-label只接受纯文本内容，浏览器不会解析其中的HTML标签，所以带<span>的内容会被屏幕阅读器原封不动读出来。要让它只朗读文本，得先把HTML标签过滤掉，下面给你两种Angular里的实现方式：

方式一：用自定义管道剥离HTML标签 #

先创建一个用来去除HTML标签的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'stripHtml' })
export class StripHtmlPipe implements PipeTransform {
  transform(value: string): string {
    // 用正则匹配并移除所有HTML标签
    return value ? value.replace(/<[^>]*>/g, '') : '';
  }
}

在你的Angular模块里声明这个管道后，就能在模板里和translate管道配合使用：

<div [attr.aria-label]="translations.content | stripHtml | translate"></div>

方式二：在组件类中直接处理内容 #

如果不想写管道，也可以在组件里写个方法处理文本：

import { TranslateService } from '@ngx-translate/core';

// 注入TranslateService
constructor(private translateService: TranslateService) {}

getCleanAriaLabel() {
  // 先获取翻译后的内容，再移除HTML标签
  const translatedContent = this.translateService.instant(this.translations.content);
  return translatedContent.replace(/<[^>]*>/g, '');
}

然后模板里绑定这个方法的返回值：

<div [attr.aria-label]="getCleanAriaLabel()"></div>

不管用哪种方式，核心都是把translations.content里的HTML标签剥离，只保留纯文本作为aria-label的值，这样屏幕阅读器就只会朗读"How are you"了。

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