react项目中怎么支持无障碍

• 记录踩坑1：在window电脑上使用讲述人进行无障碍测试的时候，由于内容都是动态的，读取不出来，在ios电脑上和使用ie浏览器就可以读取出来，而且读取的数字是英文的，百度了文档等看了一天了，没解决，无意中解决了

就是在最顶部就是页面的整体最大的那个html上面将lang默认为en英文替换为属性lang="zh-CN"中文可以读取，数字也可以，lang="en"，读取是英文的

• 记录在读屏软件中我们一般尽量不要加aria-live的这个属性，这个属性会让我们的页面自动的被读屏软件进行读取，一般是不允许的，要不就是进入首页的时候将头部导航或者标题进行获取焦点（在app中的操作），在网页上由于浏览器的一些机制，会先读取浏览器中的，在去读取我们网页中的数据，但是你点击刷新的时候，这个时候如果你加了上面的属性，那么会导致在无障碍中自动读取，自动读取的话，有时候读取的顺序是不对的，我查了下，需要使用tabindex，但是页面中我们有时候使用TabIndex=‘-1’来使用js获取焦点，TabIndex=’0’该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。可以使用TabIndex=1....32767进行排序，数字越小，越优先，但是在react中使用的话，会报错，参考了一般的做法就是将aria-live这个属性不添加，不让读屏软件自动读取，需要用户进行左右滑动的时候读取（移动端）。在pc端的话，可以使用TabIndex=1....32767进行点击tab键的时候进行排序聚焦

• 1、首先在react或者是vue中，我们前端的代码在布局的时候，使用html新增加的语义化标签，不过大多数的布局可以使用ul,li,dl,dt,dd进行布局，为什么这么说呢，因为在我们使用chrome谷歌浏览器中进行跑分的时候，系统提示的

image.png

• 2、我们可以在谷歌浏览器上进行跑分检查，告诉你一个小技巧，当我们的无障碍跑分低于90分时或者是你还想继续提升下的话，可以在无障碍的那一栏中进行点击查看，有的人可能感觉就算我点击查看了，但是我还是看不出来啊，没事，在这里跟着我的操作来，在浏览器中滑到无障碍的那一部分

image.png

• 第一个意思是通过审核的，第二个是没有通过审核的，那么我们只需要关注第二个就可以，让不通过的通过就行了，点击，看看有哪些没有通过审核

  
  image.png

• 然后在随便点击一个

  
  image.png
• 此时点击learn more，这个里面是单独针对这一个的小实例的演示，看完你就会了

• 3、你可以直接搜索WAI-ARIA就会有很多人写的，你可以去学习下，这里只是我项目中用到的一些

• #######4、这里进行一些简单使用到的无障碍的一些属性或者是状态等
  • role 角色
  • 平常中我一般按钮不喜欢使用button，喜欢使用p,span等，但是要是在读屏软件中的话，button按钮会有更好的可读性，而我又不想使用button，这怎么解决呢？我们完全可以在我们的标签中加上这个属性，role="button",这个属性只有在读屏软件中起作用，会告诉用户这个是按钮，需要点击两次进行触发
  • 平常的一些角色有

role="heading"，一般头部的标题还搭配aria-level="1"（1-6）相当于是h1-h6级别
role="button"，意思就是当前扮演的是按钮的角色
role="img",这个是在图片中添加的
role="checkbox",这个就是多选的意思，搭配aria-checked="true"

• 网页的内容是加载后进行渲染的数据，要是读屏软件读不出来的话，标签上加上aria-live="polite"，就可以了，不过一般都是支持的
• 在定时器中我们怎么支持呢？

role="timer" aria-live="polite" aria-atomic="true"
aria-atomic这个属性就是让时分秒每一次变化都会进行读取

• 要是有弹出层的话，需要进行头部聚焦，但是有的人写了头部聚焦，但是没什么作用，在添加一个属性就可以tabIndex="-1"，这是在react中所以使用了驼峰，一般tabindex

• 如果还没有看到自己想要的答案，那么看第三步，面向百度编程，希望尽你我所能，让更多的残疾人士也能感受到世界的神奇之处