可访问性是一种让尽可能多的用户可以使用你的网站的做法，包含残疾人士。大多数网站基于目标用户的考虑，不会进行可访问性的设计。但是国外某些组织会对可访问性的缺失进行处罚。
可访问性优点
除了法律层面的考虑，其实可访问性也有其他优点。
- 1. 增加网站的访问量。相当于扩大了15%的人群。
除了残疾人士，我们通常也会遇到低速网络环境，只使用手机用户等。
- 2. 有利于SEO，使用了原语HTML。
- 3. 提升品牌公众形象
残疾问题类型
1. 有视觉障碍的人
包括盲人、视力水平低下者，色盲。大多数视觉障碍人士会使用缩放功能，某些用户使用屏幕阅读器，这是一种大声朗读数字文本的软件。
屏幕阅读器示例如下：
- 有些是付费产品， 比如 JAWS (Windows) 和 Window Eyes (Windows).
- 有些是免费产品， 比如 NVDA (Windows)， ChromeVox (Chrome, Windows 和 Mac OS X)， 和 Orca (Linux).
- 有些内置在操作系统中，比如 VoiceOver (Mac OS X and iOS)， Narrator (Microsoft Windows， 也叫讲述人)， ChromeVox (on Chrome OS)，和 TalkBack (Android).
2. 有听觉障碍的人
这些人使用辅助技术访问。辅助技术可以指任何帮助助听器损失或语音，语音或语言障碍进行沟通的人的任何设备。
3. 有行动障碍的人
有些人可能难以做出使用鼠标所需的精准手部动作，而另一些人则可能受到的影响更为严重，可能会严重瘫痪到需要使用工具与计算机进行交互的地步。
这种残疾也可能是由于年老体衰导致，而不是任何特定的创伤或状况造成，也可能是由于硬件限制所致——有些用户可能没有鼠标。
4. 有认知障碍的人
认知障碍涵盖了一类范围广泛的残疾，从能力最受限的智障人士到随着年龄增长而导致思考和记忆困难的所有人。 该范围包括了患有精神疾病的人，例如抑郁症和精神分裂症患者。 还包括有学习障碍的人，例如阅读障碍患者和有注意力缺陷的多动症患者。 重要的是，尽管认知障碍的临床定义存在很多差异，但与之相关的人们会遇到同一类功能问题。 这类问题包括很难理解页面内容，难以记住如何完成任务，以及因不一致的网页布局而产生困惑。
可访问性帮助工具
chrome浏览器
axe DevTools - Web Accessibility Testing
firefox浏览器
axe - Web Accessibility Testing – Get this Extension for 🦊 Firefox (en-US)
有时该工具无法使用：We're sorry, but axe DevTools was unable to analyze the current tab
解决办法：
In that case, go to chrome://extensions, find the extension and click "details" There's an "Allow access to file URLs" option there that you need to enable.
可访问性问题类型
通过上面的devTool可以检测出四种等级的issues。
常见问题如下：
1. cirtical
cirtical级别的issuse如下， 主要针对依靠屏幕阅读器的用户，如视力障碍的人：
- Images must have alternate text
解决该类问题：添加aria-label=""属性
- Buttons must have discernible text
有些人习惯用空标签模拟banner中滑块样式等，这种需要给button 添加aria-label属性。
2. serious
seroius级别的问题如下：
- Elements must have sufficient color contrast
规则要求如下： Ensure color contrast of at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image. Large text has been defined in the requirements as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels).
3. moderate4. minor
解决可访问性问题
参考:dequeuniversity.com/rules/axe/4…
这里列出了所有的规则，及其对应的解决方案
