使用模板变量时，无障碍检查工具（如WAVE）如何处理无内容错误？

问题情况 #

我使用的代码如下：

<h3>{{$ctrl.fieldTemplate.label}}</h3>

用WAVE无障碍检查工具检测时，工具无法识别模板中的变量，会误判这个<h3>标签没有内容，弹出无内容错误提示。

解决办法 #

• 添加临时占位文本：在变量旁加一个隐藏的占位文字，仅供检查工具识别，不影响实际页面显示和屏幕阅读器读取：

  <h3>{{$ctrl.fieldTemplate.label}}<span aria-hidden="true" style="display:none;">标题占位</span></h3>
  

  aria-hidden="true"让屏幕阅读器忽略该占位文本，display:none保证它不在页面上显示，同时能让WAVE检测到文本存在，避免误报。

• 预渲染后再检查：如果项目支持服务端渲染（SSR）或本地预渲染，先将模板变量渲染为真实内容，再用WAVE检查最终生成的HTML结构，工具就能正确识别文本内容。

• 配置检查工具忽略规则：在WAVE的设置中，给这类动态内容的标签添加忽略规则，避免无意义的误报，但要注意不要遗漏真正的无内容错误。

• 用aria-label兜底：如果模板变量可能为空，直接给<h3>添加aria-label属性，即便变量未渲染，屏幕阅读器也能读取到备用内容，同时WAVE也能识别到标签的内容：

  <h3 aria-label="{{$ctrl.fieldTemplate.label || '默认标题'}}">{{$ctrl.fieldTemplate.label}}</h3>
  

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