如何为Power BI Embedded嵌入报表设置title属性提升可访问性

完全可以实现，根据你用的嵌入方式不同，对应操作如下：

原生iframe嵌入场景 #

如果是直接通过iframe标签引入嵌入报表，直接在iframe标签上添加title属性即可，属性值要明确写清报表的核心标识，不要用模糊的通用描述。代码示例：

<iframe 
  title="2024年第三季度华东区域销售业绩分析报表"
  width="1200" 
  height="800" 
  src="替换为你实际的Power BI Embedded报表嵌入地址"
  frameborder="0"
  allowfullscreen>
</iframe>

注意：title值不要只写“Power BI报表”“数据报表”这类模糊内容，屏幕阅读器加载到iframe时会直接朗读title文本，精准的描述能让视障用户快速判断当前嵌入内容是否为目标内容，不用点进去再识别。

基于Power BI JavaScript SDK的程序化嵌入场景 #

如果是用官方JS SDK调用powerbi.embed()方法加载报表，有两种可行配置方式：

• 预配置承载容器：在初始化嵌入前，就给承载报表的HTML容器元素设置好title属性，SDK渲染报表生成iframe时不会覆盖这个原生属性，屏幕阅读器可正常识别。
• 加载完成后动态赋值：监听报表的loaded事件，在报表加载完成后拿到内部生成的iframe实例，动态设置title属性，代码示例：

// 初始化报表实例后绑定加载完成事件
report.on("loaded", () => {
  // 获取报表对应的iframeDOM元素
  const reportIframe = report.iframe;
  // 配置精准的title值
  reportIframe.setAttribute("title", "2024年第三季度华东区域销售业绩分析报表");
});

配套可访问性注意事项 #

配置title时建议同步做两个校验，避免可访问性失效：

• 不要给报表iframe/承载容器添加aria-hidden="true"属性，否则屏幕阅读器会直接跳过整个报表区域，配置的title也不会被朗读
• 如果页面有报表加载中的状态提示，给提示元素添加aria-live="polite"属性，加载完成后会自动告知用户报表已可操作

内容的提问来源于stack exchange，提问作者paul bright choppala