Angular集成NG-ZORRO后出现无障碍问题，如何自行修复？

当然可以自行修复这些第三方库带来的无障碍问题，以下是几种可行的方案，按实现成本从低到高排序：

1. 用Angular Renderer2动态修正DOM属性 #

这是最直接的临时修复方式，无需改动库源码，在你的组件中通过Renderer2操作DOM元素，补充或修正缺失的无障碍属性（比如aria-label、aria-labelledby、for与id关联等）。

举个例子，假设某个NG-ZORRO按钮缺少无障碍标签，你可以在组件的ngAfterViewInit钩子中处理：

import { Component, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: '<button nz-button>生成二维码</button>'
})
export class YourComponent implements AfterViewInit {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    const button = this.el.nativeElement.querySelector('button[nz-button]');
    if (button && !button.getAttribute('aria-label')) {
      this.renderer.setAttribute(button, 'aria-label', '生成二维码按钮');
    }
  }
}

2. 利用组件自带的无障碍配置项 #

先仔细查看NG-ZORRO官方文档，很多组件本身提供了无障碍相关的输入属性或自定义模板。比如：

• 表单组件可以通过nzAriaLabel、nzLabel等属性补充标签关联
• 模态框可以配置nzAriaLabelledBy、nzAriaDescribedBy
• 表格组件支持自定义表头的aria属性

优先用这种官方提供的方式，比手动改DOM更可靠，也更符合组件设计逻辑。

3. 封装全局指令批量修复 #

如果多个页面或组件出现相同的无障碍问题，可以写一个Angular指令，自动为匹配的NG-ZORRO元素补充必要的属性。

比如写一个指令自动给所有无标签的nz-input添加aria-label：

import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';

@Directive({
  selector: 'input[nz-input]'
})
export class FixInputAriaDirective implements OnInit {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    const input = this.el.nativeElement;
    if (!input.getAttribute('aria-label') && !input.getAttribute('aria-labelledby')) {
      const placeholder = input.getAttribute('placeholder');
      if (placeholder) {
        this.renderer.setAttribute(input, 'aria-label', placeholder);
      }
    }
  }
}

然后在你的模块中声明这个指令，就能全局生效。

4. 自定义包装组件（进阶） #

如果上述方法都无法解决，可以自己写一个组件包装NG-ZORRO的目标组件，替换掉有问题的模板部分。比如NG-ZORRO的某个弹窗组件结构不符合无障碍要求，你可以封装一个自己的弹窗组件，内部使用NG-ZORRO的基础逻辑，但修改模板的语义化标签或属性。

这种方式需要维护自己的包装组件，升级NG-ZORRO版本时要注意兼容性，但能彻底解决特定组件的问题。

5. 向NG-ZORRO反馈问题 #

长期来看，最好的解决方式是向NG-ZORRO的代码仓库提交Issue，附上PageSpeed的检测报告和具体问题描述，甚至可以自己修复后提交PR。官方会评估并在后续版本中修复，这样不仅解决你的问题，也能帮助其他用户。

内容的提问来源于stack exchange，提问作者A-student