这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前言
随着老龄化的加重以及疫情的影响，我国老年网民越来越多。截至2021年12月，我国60岁及以上老年网民规模达1.19亿，60岁及以上老年人口互联网普及率达43.2%。这部分人在前端设计时并未被考虑到，被挡在了互联网门口之外，与前端解决人机交互问题相违。
随着疫情的严重，不会使用互联网的老年人在生活中越来越不便，国务院开始推进互联网适老化改造，在2020年推出互联网应用适老化及无障碍改造专项行动方案，中国信息通信研究院也在2022年5月发布信息无障碍白皮书。
同时，抖音、快手也在2019年上线无障碍版本，知乎也在2022年推出无障碍模式，越来越多的大平台推出无障碍模式，无障碍开发也越来越重要。
什么是前端？
第一节课（前端与HTML）给出的答案如下：
- 解决 GUI 人机交互问题
- 跨终端
- PC与移动端
- 客户端与小程序
- VR与AR
- Web技术栈
省流：前端工程师用Web技术栈来解决多端GUI人机交互问题。
什么是适老化？
适老化是指充分考虑老年人的想法与身体而做出的设计。
老年人的人机交互问题
目前大部分开发者都是默认用户会使用电脑/手机的，从而忽略了那些上了年龄的老人，他们相较于较年轻人来说思维滞后并有着生理障碍。
生理障碍问题
随着老年人的年龄的增长，身体多感官衰老、身体机能减退对互联网的学习与使用都造成了极大的困难，如视觉、听觉、触觉减退都能导致老年人无法使用。
思维问题
老年人随着年龄的增长记忆力减弱、思维滞后，他们记不住图标的意思，也理解不了操作手势。而行动迟缓又导致了误触频发，点击变长按、单击变双击等等。
抗拒心理
并不是所有的老年人一开始都抗拒使用，许多老年人一开始愿意去尝试使用电脑又或者手机，但是由于他们的生理障碍、思维问题，无法实现他们想要的结果，从而导致他们越来越抗拒使用互联网。
还有一部分老年人觉得扫码支付、网络购物等方式不安全，并不相信互联网，从而抗拒使用互联网。
适老化建议
感知方面
字号、字体
选用非衬线字体保证可读性。如图衬线字体有边角装饰，而非衬线字体则没有。
字号需要至少大于18dp/pt，除此之外，最好提供字号调整、字体加粗等选项。
字、行间距
字间距不应小于1px，行间距应选用1.5倍 —2倍。
对比度
提高颜色对比度以及颜色色相的对比，比如黄蓝对比、红绿对比等。
文本对比度
文字上前后景色对比度应满足WCAG2.0的最低要求4.5 : 1，若字号大于18dp/pt时文本及文本图像对比度至少为3 : 1。
验证码
验证码最好使用无感验证，若无感验证不通过或者无法使用，可以使用语音验证或者滑块验证并提供以使用引导。
操作方面
组件大小
可点击区域尺寸不应小于60×60dp/pt。
操作手势
尽量使用点击操作，并且应对操作的结果提供反馈，如语音提示等。
对于长按、拖动等手势，应该留足等待时间，如2.5s — 4s。
页面操作时间
页面应在用户操作完后再发生变化，并且应该避免弹窗广告等。
理解方面
操作引导
页面应该显著提示无障碍功能启用位置，并且对于主要功能提供操作引导等。
兼容方面
无障碍标准
应遵守无障碍标准WCAG2.0。
使用语义化标签，不应该乱用HTML标签，如<span>标签当超链接<a>标签使用。
不应该随意改变聚焦（focus）的顺序，代码如下，点击空白页面后，使用Tab键可以查看聚焦顺序。
不应被选中（聚焦）的元素应该使用 CSS 样式user-select: none;防止被选中（聚焦）。
总结
无障碍并不仅仅是适老化，对于残疾人士也包含在内，甚至对于我们正常人来说也享受着无障碍的功能，比如语音输入、语音转文字等。
国外无障碍技术有许多可以借鉴的地方，比如澳大利亚政府站点，可以使用Tab键聚焦配合屏幕阅读器可以从头到尾的“浏览”一遍，甚至对于有大段内容的地方，在聚焦前还会问题要不要跳过，对于正常访问则会隐藏此询问，如下图：
参考
该文章部分内容来自于以下课程或网页：
