A11Y问题：Chrome屏幕阅读器无法读取section标签的aria相关属性

• 空的<section>元素没有可识别的内部内容，默认不会被屏幕阅读器纳入待朗读节点序列，你添加的ARIA属性自然不会被触发读取
• aria-label、aria-description这类属性默认仅对可交互元素、或被用户主动导航到的地标元素生效，无特殊标记的静态非聚焦元素不会触发属性朗读
• 你使用的Chrome官方屏幕阅读器插件默认关闭了静态地标元素的播报开关，未主动开启的情况下不会读取普通section的ARIA属性
• 补充：aria-description的全端支持度远低于aria-label，优先使用aria-label做核心播报文本即可

根据你的使用场景选择对应方案即可：

1. 需页面加载完成后主动播报该文本
   给元素添加aria-live="polite"属性标记为实时播报区域，屏幕阅读器会在空闲时主动读取区域相关内容，示例代码：

<section aria-live="polite" aria-label="This is the text I want to be read"></section>

也可以使用视觉隐藏文本的方案实现，兼容性更好：

<section aria-live="polite">
  <span class="visually-hidden">This is the text I want to be read</span>
</section>

配套视觉隐藏样式（视觉上不可见，但屏幕阅读器可识别）：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

2. 仅需用户导航到该区域时播报文本
   给元素添加tabindex="-1"属性，让其支持程序主动聚焦但不会被Tab键遍历，触发聚焦时会自动朗读对应aria-label内容，示例代码：

<section aria-label="This is the text I want to be read" tabindex="-1"></section>

需要触发播报时调用对应DOM元素的focus()方法即可。
3. 该区域为页面核心功能地标，需支持屏幕阅读器地标导航识别
给元素添加显式的role="region"属性确认地标角色，同时开启屏幕阅读器插件设置中的「地标元素播报」开关即可，示例代码：

<section role="region" aria-label="This is the text I want to be read">
  <!-- 区域内部内容 -->
</section>

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