【无障碍】自动朗读的弹窗和浮层实现

使用Aria-modal属性

在弹窗元素上增加属性：

<section id="alert-dialog" role="dialog"  aria-modal="true" aria-label="xx对话框" tabindex="-1">
    <h1>标题内容</h1>
    <button>关闭</button>
</section>

• role="dialog"——让浏览器告诉屏幕阅读器一个对话框打开了
• aria-modal="true"——对话框以外的元素无法被聚焦（android上不生效）
• tabindex="-1——可选，让对话框可以聚焦但无法被tab访问（android上必须加）
• aria-label="" 或 aria-labelledby="xx元素id"——指定元素朗读的内容

• 这里按理说无需加tabindex属性，实际实验中发现有时候无tabindex不能朗读
• 弹窗div加上tabindex属性后，内部需要聚焦的第一个元素也要加上tabindex属性
• HTML dialog 元素，不能使用tabindex属性

Android不生效

解决焦点问题

document.activeElement可以获取到当前聚焦的元素

聚焦

使用a链接或直接改hash

原理是用锚点来指定位置。会导致在浏览器会话历史中新增一条记录，需要在关闭弹窗的时候history.back()或者history.go(-1)

	<a  @click.stop.prevent="showSelfAlert3"
		role="button"
		target="_self"
		href="#alert-dialog"
	>
		打开弹窗按钮
   </a>
   <div role="dialog" airia-live="polite" aria-label="xx对话框" id="alert-dialog" >弹窗内容</div>

或者使用js，直接修改hash值