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

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

• 单纯的aria-modal在ios上能不能行，看看aria-modal到底实现了什么（比如tabindex是不是能够不加）——如果不行的话底下的一些android的方法可能得挪出来
• focus的事件捕获能不能行
• 为啥外面加了tabindex之后，里面的不加就是一个整体了
• aria-describedby 和 aria-labelledby为啥会让元素变成一个整体
• Android的a链接按理说也不需要tabindex——focus需要，tanbindex是-1了才能focus
• pushState 与 location.hash = 的有个区别会导致问题：pushState的第三个参数url 并不会马上就加载，而是可能在后面，比如页面重载的时候执行，这是导致d窗没有自动朗读的大问题所在吧

使用Aria-modal属性

在d窗元素上增加属性：

    标题内容
    关闭

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

• 这里按理说无需加tabindex属性，但实际实验中发现无tabindex不能朗读，可以加上试试
• d窗div加上tabindex属性后，内部需要聚焦的第一个元素也要加上tabindex属性

Android不生效 解决焦点问题

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

聚焦 使用a链接或直接改hash

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

	
		打开d窗按钮
   
   d窗内容					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: https://outofmemory.cn/zaji/5562991.html