无障碍开发之——弹出层的背景内容不可点击

本文分享了在网页设计中,使用Aria属性优化弹出层的无障碍体验的方法。通过设置aria-hidden属性,确保屏幕阅读器仅聚焦于弹出层内容,避免干扰背景信息。同时,提出了待解决的无障碍挑战,如复杂列表的读取和菜单焦点的保持。

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

拿张图举个例子,有弹出层的时候,采用读屏软件时希望只读得到弹出层的内容,对背景的内容是不可读取的,这种情景下可采用aria-hidden="true" 来实现。

具体实现方案是:

1. 将背景的大div加上一个class 假如说是class="page"

2. 然后在点击弹窗的事件中加上该属性

```

let page = document.getElementByClassName('page')[0];
page.setAttribute('aria-hidden','true');

```

3. 在关闭弹出层的事件中移除该属性

page.removeAttribute('aria-hidden')

这个问题是解决了,亲测有效!!!

 

关于无障碍我还在摸索当中,还有一些场景目前还没解决的

场景1:目前读屏软件默认读取的方式都是读html的标签的最小单元,但是比如像微信的聊天列表那种,需要框住整个小列该如何实现。

场景2:页面点击某个菜单,进入到下一页,返回的时候希望焦点回到该菜单上,如何实现

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值