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

最新推荐文章于 2024-08-23 07:51:20 发布

大名张无忌

最新推荐文章于 2024-08-23 07:51:20 发布

阅读量3.9k

点赞数 1

分类专栏：知识总结 JS 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_40029828/article/details/121428539

版权

本文介绍了如何利用Aria-modal属性实现无障碍自动朗读的弹窗和浮层，讨论了在Android设备上的焦点问题及其解决方案，包括使用a链接或直接修改hash、使用focus配合aria-live属性，以及如何限制和恢复焦点。同时，文章还探讨了在处理多个浮层管理时可能遇到的问题及优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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值

最低0.47元/天解锁文章