网站无障碍化简介
文章来自于团队内部分享准备的内容
1、什么是无障碍化，都有哪些障碍
2、iOS如何开启旁白
3、网页如何让屏幕阅读器更好工作
一、什么是无障碍化，网站用户都有哪些障碍
在平时日场生活中，我们经常能看见这样的标志
诸如地铁站这样的公共设施中一定会有这种无障碍通道，帮助行动有障碍的居民至少能够使用地铁这种公共设施。但通常无障碍的设计容易被我们这样健全的人忽略，比如盲道被占：
那么，在网站中都有哪些人群属于残障群体
1、视觉障碍
比如盲人、视力低下、色彩障碍，这一类用户在整个残障群体占比相对最高，比如红绿色盲，无法分辨红色或者绿色等，甚至无法区分出各种颜色之间的区别，因此也有阅读网站推出色盲模式或者高对比度模式
而视障人群更多的是使用屏幕阅读器，这一块做的最好的是iOS，后面的模块会介绍如何使用iOS开启屏幕阅读器。
2、听觉障碍
听觉障碍顾名思义就是听力有问题，在一些视频网站可能会遇到视频没有字幕的情况，对听力上有障碍的用户来说是一种非常痛苦的情况。
3、运动障碍
一些需要按照规定路线和时间完成的操作，对运动有障碍的人群来说，是一件特别痛苦的事。
4、认知障碍
比如与晕动症和感官超载相关，像癫痫之类，受不了刺激的视觉动画，比如摇晃、强光、重复闪光。
还有学习障碍，阅读困难等，网站文案使用一些晦涩难懂的成语或者排版过于拥挤，导致长时间阅读产生感觉文字在旋转扭曲不良生理反应等等。
iOS如何开启旁白
首先我们在设置中找到辅助功能，然后打开旁白
也可以喊Siri出来打开旁白，这样对盲人来说更方便。
主要操作如图：
我们使用屏幕阅读器来看一下怎么打开Safari，然后访问百度和360搜索都有哪些差异。
网页如何让屏幕阅读器更好工作
通过几个例子让大家更好理解这些属性的区别
比如我们大量使用React的项目，通常网页内容会使用div来承接内容，比如：
<div>
<div>
<div>章节一</div>
<div>章节二</div>
<div>章节三</div>
</div>
<div>
<div>章节一内容</div>
<div>章节二内容</div>
<div>章节三内容</div>
</div>
</div>让我们试试开了屏幕阅读器，它是怎么念这段文字：
尝试闭上眼睛来感受一下访问这个页面的感受
来一点语义化标签
<div>
<nav>
<div>章节一</div>
<div>章节二</div>
<div>章节三</div>
</nav>
<article>
<div>章节一内容</div>
<div>章节二内容</div>
<div>章节三内容</div>
</article>
</div>
加上一下label的for
<label for="email">邮箱</label>
<input type="text" id="email"> 
增加role
<div>
<nav>
<div role="tab">章节一</div>
<div role="tab">章节二</div>
<div role="tab">章节三</div>
</nav>
<article>
<div>章节一内容</div>
<div>章节二内容</div>
<div>章节三内容</div>
</article>
</div>
可以听到增加了标签的提示以及导航进度的提示
aria-labelledby
<div>
<nav>
<div id="tab1" role="tab">导航章节一</div>
<div id="tab2" role="tab">导航章节二</div>
<div id="tab3" role="tab">导航章节三</div>
</nav>
<article>
<input aria-labelledby="tab1"></input>
<input aria-labelledby="tab2"></input>
<input aria-labelledby="tab3"></input>
</article>
</div>
把标题和整个对话框捆绑在一起
<div role="dialog" aria-labelledby="dialogheader">
<h2 id="dialogheader">选择文件</h2>
弹窗内容
</div>
更多例子：
但里面的例子尝试了没听出区别
aria-label
label属性能够让屏幕阅读器在读到对应的元素的时候读指定的文本内容
<input type="text" class="form-control" id="name" placeholder="请输入名称" aria-label="请输入名称，这里是特殊提醒">
aria-label只在交互组件上生效，比如输入框，按钮等
<div aria-label="这里是特殊提醒">普通文本</div>
aria-describedby
让屏幕阅读器来读出额外的描述内容
<div role="dialog">
<button aria-label="关闭按钮" aria-describedby="descriptionClose">X</button>
<div>对话框内容</div>
<div id="descriptionClose">点击关闭这个对话框，来返回上级页面</div>
</div>
aria-hidden
让屏幕阅读器来隐藏指定的元素，还是刚才的例子
<div role="dialog">
<button aria-label="关闭按钮" aria-describedby="descriptionClose">X</button>
<div>对话框内容</div>
<div id="descriptionClose" aria-hidden="true">点击关闭这个对话框，来返回上级页面</div>
</div>
更多的交互： aria-haspopup 和 aria-expanded
<div role="dialog">
<a role="button" aria-haspopup="true" aria-expanded="false" >对话框标题</a>
<div>展开的内容</div>
</div>
<div id="percent-loaded" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100">
进度
</div>
<div role="menuitemcheckbox" aria-checked="true">Sort by Last Modified</div>
上面这些就是常用的几种属性，当然还有其他方式，可以看看协议中所有的aria属性列表：
