简介
无障碍、WAI、ARIA、a11y、Accessibility、框架选择
如何向 视障用户 介绍兔子长什么样？有的同学可能会说：
毛茸茸的长耳朵。
短短圆圆的小尾巴。
红红的眼睛。
那如何向 视障用户 介绍网页长什么样？有看过 语义化与无障碍树 的同学可能会说：
header 标签表示一个网页的页眉。
main 标签表示一个网页的内容。
footer 标签表示一个网页的页脚。
哎呦不错哦~ 那你给我表演一下怎么描述 导航 呢？
导航 现在在 HTML5 语义化标签的加持下导航可以这样写：
不同用户理解：
普通用户通过 显示效果 识别出是导航。
程序员通过 nav 标签 识别出是导航。
视障用户通过 屏幕阅读器 识别出是导航。
过去这个时候有同学想过在 标签还没有出现的时候，只靠 div 和 span 标签一把梭是时候怎么写的？
不同用户理解：
普通用户通过 显示效果 识别出是导航。
程序员通过 class="navigation" 识别出是导航。
视障用户通过 屏幕阅读器 识别出是两个链接。
这对于 视障用户 多么不友好，他们除了知道有两个链接并不能识别出是导航。
Cosplay聪明的同学肯定想到了：
是否可以指定一个规范？
是否可以通过 cosplay 来把 div 标签 变成 nav 标签？
妈耶你们也真的是太聪明啦！确实存在这一个规范叫做 Web Accessibility Initiative - Accessible Rich Internet Applications 缩写 WAI-ARIA，它的作用就和同学们想到的一样通过角色扮演来描述 html 使得 视力障碍 用户可以理解 html 所表达的含义。
使用 WAI-ARIA 来表单 nav 标签，屏幕阅读器便会帮助视障用户识别出是导航 ：
好奇宝宝
好奇宝宝肯定会问：可是有的页面有 主导航 和 副导航 甚至还有 面包屑导航、奇奇怪怪不知道什么的导航 正常用户可以通过视觉秒理解是什么，那视障用户怎么办呢？
妈耶你们真的是有够聪明，居然能想到这么厉害的问题，不过没关系 WAI-ARIA 已经定义好了通过 aria-label 标签来描述是什么：
WAI-ARIA
可能还是有同学不是很能理解 WAI-ARIA 是什么，简单来说 WAI-ARIA 便是视障用户的 UI：
| 用户 | 兔子 | 页面 |
|---|---|---|
| 普通用户 | 看到兔子样子 | 看到页面效果 |
| 视障用户 | 知道兔子构成 | 知道页面构成 |
通过上面的导航例子也大概知道了 WAI-ARIA 的使用方法，但是 WAI-ARIA 并没有这么简单，它其实定义了一系列的属性和角色来帮助 视力障碍 用户理解页面，只不过导航的结构比较简单，如果像是复杂一点的 多项选择 除了要使用 WAI-ARIA 规定的标签，还有实现 WAI-ARIA 规定的 焦点、键盘事件 等。
更多内容可以阅读 WAI-ARIA 这份文档算是详细描述了所有的规则，如果觉得复杂可以阅读 WAI-ARIA 实践，如果觉得英语看不来可以阅读 饿了么前端团队翻译的 WAI-ARIA 实践。
题外话 关于学习有的人很奇怪对事物的认识取决于第一次，比如小二先接触的 LOL 后面玩 DotA 对正反补兵很不适应。所以在小二看来应该在学习 HTML 的时候应该穿插部分 WAI-ARIA 内容，在学习部分 JavaScript 后应该穿插实现几个 WAI-ARIA 规定的角色，当然现在学习也不迟。
现实情况如果大家有追更小二就会记得：
扼住焦点的喉咙 挑选框架时提到的 Element UI 部分语义化做的还不错。
如果你真的点进去上文提到的 饿了么前端团队翻译的 WAI-ARIA 实践 你就会发现：这个项目停止在了 2018年7月26日 而且没有完全翻译完。
可能是因为某些原因导致的，但是通过阅读 饿了么前端团队翻译的 WAI-ARIA 实践 在每篇文章底部 Example 中重复出现 Material 和 Element，小二个人能感受到的是翻译这篇文章和写相关代码同学对帮助 无障碍群体的热情。
社会挺现实的大家都忙忙碌碌、加班赚钱有很多需要的事情要去做小二也不例外，无障碍可能是个遥远的话题。小二这几篇文章也只能是帮大家认识一下这个群体和给出相关的知识，本来还想讲一下 无障碍视觉设计 相关内容，但是 鱼头哥哥 最近分享了几篇相关文章都挺好的。
期望如果可以使用 heading 和 语义化、图片加上 alt 也挺好。
如果还可以选择一个无障碍做得好的框架，比如二哲哥哥常说的 material ui。
如果挺可以选择阅读 material ui 源码和 WAI-ARIA。
最后希望鱼头哥哥的 无障碍世界 可以实现。
无障碍相关内容H1 の 小秘密
img の 小九九
无障碍世界
扼住焦点的喉咙
语义化与无障碍树
HTML Cosplay
一起成长在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。
如果您想让更多人看到文章可以点个 点赞。
如果您想激励小二可以到 Github 给个 小星星。
如果您想与小二更多交流添加微信 m353839115。
本文原稿来自 PushMeTop
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103592.html
showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 简介 安全、注入攻击、XSS 13岁女学生被捕：因发布 JavaScript 无限循环代码。 这条新闻是来自 2019年3月10日 很多同学匆匆一瞥便滑动屏幕去看下一条消息了，并没有去了解这段代码是什么，怎么办才能防止这个问题。事情发生后为了抗议日本...
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 简介 SEO、Meta、搜索引擎优化、简单教程 细心的同学可能发现了开头出现了关键字，这是为什么呢？阅读完本文后大家就会明白了。 同学们有没有想过互联网上用户、网站 有多少呢？这里提供一个网站 internet live stats 里面实时的给出了...
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 简介 SEO、Meta、搜索引擎优化、简单教程 细心的同学可能发现了开头出现了关键字，这是为什么呢？阅读完本文后大家就会明白了。 同学们有没有想过互联网上用户、网站 有多少呢？这里提供一个网站 internet live stats 里面实时的给出了...
showImg(https://segmentfault.com/img/remote/1460000018653055?w=900&h=500); 简介 字符编码、字符长度错误、截取字符错误、UTF8、Unicode 计算机重重底层之下都是由 0 和 1 组合，但是你知道他们是怎么一步步变成字符串的嘛？在我们现实生活中最常见的例子可以通过 wo 在新华字典中找到 我 这个字。同样计算机通过 0 ...
showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 简介 heading 标签、SEO、无障碍阅读 ps: 内容有点多，本来只想讲一个点，但是关联性太强了，所以辛苦大家了。 在学习 HTML 标签的时候，很多教程只告诉你 怎么用 而没有讲清楚 是什么，让我们一起从 h1 到 h6 开始重新认识 HTM...
阅读 841·2021-11-25 09:44
阅读 1034·2021-11-19 09:40
阅读 6911·2021-09-07 10:23
阅读 1948·2019-08-28 17:51
阅读 1082·2019-08-26 10:59
阅读 1903·2019-08-26 10:25
阅读 3095·2019-08-23 18:22
阅读 848·2019-08-23 16:58
