每日 30 秒 ⏱ HTML Cosplay

简介

无障碍、WAI、ARIA、a11y、Accessibility、框架选择

如何向 视障用户 介绍兔子长什么样？有的同窗可能会说：

• 毛茸茸的长耳朵。
• 短短圆圆的小尾巴。
• 红红的眼睛。

那如何向 视障用户 介绍网页长什么样？有看过 语义化与无障碍树 的同窗可能会说：

• header 标签表示一个网页的页眉。
• main 标签表示一个网页的内容。
• footer 标签表示一个网页的页脚。

哎呦不错哦~ 那你给我表演一下怎么描述 导航 呢？

导航

如今

在 HTML5 语义化标签的加持下导航能够这样写：

<nav>
    <a href="home">主页</a>
    <a href="users">用户</a>
</nav>
复制代码

不一样用户理解：

• 普通用户经过 显示效果 识别出是导航。
• 程序员经过 nav 标签 识别出是导航。
• 视障用户经过 屏幕阅读器 识别出是导航。

过去

这个时候有同窗想过在 <nav> 标签尚未出现的时候，只靠 div 和 span 标签一把梭是时候怎么写的？

<div class="navigation">
    <a href="home">主页</a>
    <a href="users">用户</a>
</div>
复制代码

不一样用户理解：

• 普通用户经过 显示效果 识别出是导航。
• 程序员经过 class="navigation" 识别出是导航。
• 视障用户经过 屏幕阅读器 识别出是两个连接。

这对于 视障用户 多么不友好，他们除了知道有两个连接并不能识别出是导航。

Cosplay

聪明的同窗确定想到了：

• 是否能够指定一个规范？
• 是否能够经过 cosplay 来把 div 标签 变成 nav 标签？

确实存在一个规范叫作 Web Accessibility Initiative - Accessible Rich Internet Applications 缩写 WAI-ARIA，它的做用就和同窗们想到的同样经过角色扮演来描述 html 使得 视力障碍 用户能够理解 html 所表达的含义。

使用 WAI-ARIA 来表单 nav 标签，屏幕阅读器便会帮助视障用户识别出是导航 ：

<div class="navigation" role="navigation">
    <a href="home">主页</a>
    <a href="users">用户</a>
</div>
复制代码

好奇宝宝

好奇宝宝确定会问：但是有的页面有 主导航 和 副导航 甚至还有 面包屑导航、奇奇怪怪不知道什么的导航 正经常使用户能够经过视觉秒理解是什么，那视障用户怎么办呢？

竟然能想到这么厉害的问题，不过不要紧 WAI-ARIA 已经定义好了经过 aria-label 标签来描述是什么：

<div class="navigation" role="navigation" aria-label="主导航">
    <a href="home">主页</a>
    <a href="users">用户</a>
</div>
<div class="navigation" role="navigation" aria-label="奇奇怪怪不知道什么的导航">
    <a href="sister">小姐姐</a>
    <a href="brother">小哥哥</a>
</div>
复制代码

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