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

拿张图举个例子，有弹出层的时候，采用读屏软件时希望只读得到弹出层的内容，对背景的内容是不可读取的，这种情景下可采用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：页面点击某个菜单，进入到下一页，返回的时候希望焦点回到该菜单上，如何实现