为什么要打造无障碍网站？
我们平时开发网站大多是针对非残疾人用户使用，但是有少部分残疾人用户 （例如：盲人）想要使用你的网站的时候该怎么办呢？他们只能借助屏幕阅读等辅助设备去访问网站。如何让屏幕阅读器更好的识别我们研发的网站呢？这便是本文主要要讲述的内容
如何打造无障碍网站？
屏幕阅读器在识别网站标签的时候通常会识别到文字，通过语音播报的形式传递给盲人信息。既然屏阅读器能识别到文字，那需要前端工程师做什么工作呢？这便是我接下来要说的
前端工程师要做的工作便是让屏幕阅读器更高效的识别网站，以及如何让自己的网站通过屏幕阅读器更友好的让盲人用户使用
如何更友好的让盲人用户使用你的网站呢？
-
通过aria-label属性，播报自定义语音内容
对于盲人用户来说，你的网站是不可见的，只能通过辅助设备，通过接收语音报内容来接收网站的信息。如果单纯是文字播报，盲人并不能区分哪个是按钮，哪个是下拉框，哪个是链接。这时候aria-label便起到了作用，通过aria-label你可以自定义语音播报内容，让盲人用户识别。
<button aria-label="这个是个按钮">按钮</button>
<a aria-label="这是跳转XXX的链接">链接</a>
屏幕阅读器识别到标签的aria-label属性，便会播报指定的内容，这样盲人用户便能区分标签的类
-
aria-expanded、aria-disabled、aria-required等属性辅助盲人用户更好的操作
这类属性通常是表示控件的一些状态，例如aria-expanded可以表示下拉框是否展开的状态，只需要设置string型的true或false即可，语音播报会同步控件的状态
-
通过aria-hidden优化屏幕阅读器解析
aria-hidden并非指控件状态，设置该属性则屏幕阅读器会过滤该控件，这可以很大提升屏幕阅读器的解析，例如一些标识性的图片、无意义的修饰控件，设置aria-hidden不仅能提升屏幕阅读器的解析，而且对盲人用户来说，可以过滤掉一些无意义的信息
如何验证以上的属性呢？
win10系统自带屏幕阅读器的功能，只需要开启自述者功能，再指定跟随鼠标，我们便可以模拟盲人用户使用你的网站啦！
aria-*标签只是提升Accessibility的一种手段，还有图片的alt属性、颜色对比度(更友好的针对色盲及色弱用户)等
如何验证Accessibility呢？
使用强大的lighthouse，Chrome浏览器自带的性能分析工具
