简介
无障碍、HTML 小细节、焦点、a11y、Accessibility、框架选择
无障碍开发还是应该从 HTML 开始聊起，无论是盲人阅读器还是浏览器等工具最核心的部分还是在 HTML，毕竟没了 CSS 只是不美观了，没了 JavaScript 只是少了交互和无限扩展的可能性。
有的同学会说了产品和老板拿着鞭子在后头赶马车哪里有时间写这些。现实是这样的，但是在选择UI框架的时候可以选择 无障碍 做得好的来提升网站的友好度，有句话说得好 居庙堂之高则忧其民，处江湖之远则忧其君，灵活变通下不影响生活体验岂不是美哉？
键盘与交互HTML 标签元素中还有一种比较少人知道的分类方法：交互标签 和 非交互标签，在无障碍开发中需要留意的便是这二者。交互标签 往往会和 焦点 一起出现，按下 tab 键选择页面上的 交互标签 这个时候交互标签会被 蓝色的 焦点 框覆盖，如果想反向选择可以使用 shift + tab。
在掘金个人主页里按下 tab 键后，蓝色的焦点框会从 logo 到 首页一个个链接遍历下来，在这个过程中可以发现 链接、按钮、搜索框 都会产生焦点。细心的同学如果打开控制台会还会发现，跳转的顺序和标签在 HTML 中出现的先后顺序有关。
运动觉障碍的用户，例如霍金大大就可以利用他的三个指头配合 tab 和 shift + tab 来浏览 掘金 并在掘金上做交互性的操作。除此之外键盘上的 方向键 也是移动和浏览页面必不可少的一部分，你可以使用 上下键 来是的页面可以上下滚动，也可以在 select 标签 中选择选项。
更多无障碍群体内容可以阅读 无障碍世界调试工具
正所谓 工欲善其事必先利其器 对于被 焦点 选中的元素，可以通过 document.activeElement 来获取。当然也可以使用插件来完成，这里推荐谷歌浏览器的一款插件 accessibility developer tools 。
交互标签通过这个测试可以知道关于交互标签的情报便是 链接、按钮、搜索框 是交互标签，下面用选择器来总结一下 交互标签：
const tags = [
"a[href]", "area[href]", "audio[controls]", "video[controls]",
"input:not([disabled])", "select:not([disabled])",
"textarea:not([disabled])", "button:not([disabled])",
"iframe", "object", "embed", "[contenteditable]",
"[tabindex="0"]",
];
const allTagsDOM = document.querySelectorAll(tags.join(","));
console.log(allTagsDOM);
非交互标签
除了 交互标签 中提到的标签外都属于 非交互标签，有些开发老司机可能会问：
如果想让 非交互标签 变成 交互标签 怎么办？
使用自定义标签例如 select 或者 button 怎么办？
变成交互标签这里便需要一个很经常被忽略掉的标签 tabindex：
它根据 tabindex 从小到大来控制 tab 的跳动顺序，虽然可以控制整个页面的浏览顺序，但是最好只使用 0 来指定 tabindex 属性。在上面也提到过打开控制面板查看页面结构 会发现 tab 默认的跳转顺序和 标签顺序是一致的，如果破坏掉了这个顺序对于一些不兼容 tabindex 的盲人辅助工具、浏览器会造成无法兼容的情况。
破坏标签顺序从下面例子也能了解到 页面结构顺序 非常重要，如果屏幕阅读器不支持 tabindex 时便会先读取footer标签的中内容，对于盲人来说可能会一头雾水不知道网站怎么使用：
main header
除此之外当使用 css 样式 float: right 改变页面渲染的排列顺序也可能会造成影响，对于习惯从右向左阅读的用户来说会造成困惑找不到焦点的位置。
当自定义元素时需要把元素默认的 焦点 功能模拟出来进行替换即可。在上文提到了 非互动标签 转换 互动标签 利用 tabindex 这个属性来完成，其实还有一个小技巧利用 tabindex=-1 设置标签后，对应的 DOM 节点将会拥有 focus() 方法，利用这一点可以配合 JavaScript 可以实现非常多的功能。
主要需要注意的是 tab键、enter键、方向键、space键 的功能。
看不见的元素提到看不见的元素很多同学可能会一头雾水，最常见的看不见标签便是隐藏的导航菜单栏：
上面讲到的 交互标签 会按顺序被 tab 选中成为焦点，导航菜单中的元素是一个个的 a[href]，当在使用 tab 浏览的时候焦点会被锁定在这个隐藏的菜单之中。如果没有把鼠标悬浮在首页上时，用户可能会产生困惑 焦点去哪里了。
这个时候的解决方法便是使用 display:none 或者 visibility:hidden 来控制标签不在 tab 的选着范围中。两者区别是 display:none 会让元素在渲染树中消失，不占用任何空间，visibility:hidden 则保留元素占据的空间，也依旧在渲染树中。当需要的时候使用 display:block 和 visibility:visible 进行显示。
掘金的隐藏菜单做得挺好的，不会让焦点跳转到 隐藏菜单，美中不足的是只能通过鼠标悬浮来 显示菜单 ，不能通过 tab 和 enter 进行选中操作。实例 主内容快速切换
通过点击菜单栏来进行页面的切换，但是你有思考过当切换完菜单，用户要浏览内容还得按多少下 tab 才能进入内容标签嘛？如果菜单栏有五六十个的情况是多么可怕，你还真别说没有 某东 和 某宝 的菜单项就有这么多：
不过当选中标签按下 enter 时，他们会直接打开新的页面算是减少了用户需要 tab 的次数，不过在新页面上还是要重新点击多次 tab 才能浏览内容。我们可以利用 锚点 和 tabindex=-1 来帮助用户快速切换内容焦点：
快速进入内容主要内容
这下用户按下 tab 便可以快速选择是否直接浏览内容，但是这个 a 标签 会影响到页面的美观，可以利用 css 样式中的 position: absolute 和 :focus 来帮助隐藏 a 标签 功能保持不变codepan
.super-skip {
position: absolute;
top -40px;
left: 0;
z-index:100;
}
.super-skip:focus {
top: 0;
}
快速切换菜单
在单页面浏览中用户会在 菜单 中选择 菜单项，但是页面内容改变的却还是要 tab 浏览完剩下的标签才能将 焦点 切换到 页面内容，可以利用 tabindex=-1 和 focus() 来快速的将焦点切换至页面内容 codepan：
Alerthome
post
user
在使用弹出自定义 Alert 时，由于 Alert 的内容也在 dom 元素里，使用 tab 进行切换时会导致切换的焦点 无法落在 Alert 对话框中，这里推荐阅读 SweetAlert 的源码它的无障碍做得非常棒，重点阅读 getFocusableElements 和 restoreActiveElement 这两个函数。
主要的流程分为：
利用 document.activeElement 记录当前的焦点元素和页面 x 和 y 坐标。
选着当前 Alert 对话框中的 变成交互标签 上文中提到的 tags。
设置第一个 tag 的属性为 focus()。
设置最后一个 tag 被点击时需要循环重置到第一个 tag。
如果关闭 Alert 则通过一开始记录的焦点元素和页面 x 和 y 坐标进行恢复。
挑选框架在 Element UI 中的自定义元素都做得不错，就是对于视障用户 焦点focus 的颜色区分度不够，就连小二自己都看不清已选择的元素时被focus在哪里，不过可以通过修改 is-focus 来修改样式颜色：
Radio 无障碍中 tab 和 space 都有实现。
Checkbox 无障碍中 tab 和 space 都有实现。
Select 无障碍中 tab 和 enter 都有实现。
TimePicker无障碍中 tab 和 enter、方向键 都有实现。
Material UI 在无障碍上就做得非常好，而在 Ant Design 无障碍相关的 交互元素 就做得不怎么好了，如果产品目标群体中有需要 无障碍 相关的服务，在选择框架时可以试试其中的 交互元素 做得如何，毕竟站在巨人的肩膀上比自己造轮子快又好。
无障碍相关内容H1 の 小秘密
img の 小九九
无障碍世界
扼住焦点的喉咙
一起成长在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。
如果您想让更多人看到文章可以点个 点赞。
如果您想激励小二可以到 Github 给个 小星星。
如果您想与小二更多交流添加微信 m353839115。
本文原稿来自 PushMeTop
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103492.html
showImg(https://segmentfault.com/img/remote/1460000018891197); 简介 无障碍、WAI、ARIA、a11y、Accessibility、框架选择 如何向 视障用户 介绍兔子长什么样？有的同学可能会说： 毛茸茸的长耳朵。 短短圆圆的小尾巴。 红红的眼睛。 那如何向 视障用户 介绍网页长什么样？有看过 语义化与无障碍树 的同学可能会说： ...
简介 可视区域、页面优化、DOM节点多、图片懒加载、性能 可视区域是一个前端优化经常出现的名词，不管是显示器、手机、平板它们的可视区域范围都是有限。在这个 有限可视区域 区域里做到完美显示和响应，而在这个区域外少做一些操作来减少渲染的压力、网络请求压力。在 每日 30 秒之 对海量数据进行切割 中的使用场景，我们就是利用了 有限可视区域 只渲染一部分 DOM 节点来减少页面卡顿。 既然 可视区域 ...
showImg(https://segmentfault.com/img/remote/1460000018836440); 简介 无障碍、DOM 小细节、前端开发、a11y、Accessibility 无障碍的英文为 Accessibility 由于单词拼写过长往往被缩写为 a11y 其中 11 指的是中间有11个字母。 无障碍指的是在使用过程中，不管什么类型的用户都可以正常使用。生活中最常见的...
简介 字符串、数字、数组、对象、时间、类型、等于 科学家发现，人脑中会分泌多种能让人感到快乐、安全和成就感的物质，这些物质统称为快乐素。通常情况下，快乐素的释放水平很低，维持我们心情平静。只有当我们完成了预设目标，作为奖励，大脑才会增加快乐素的分泌，让人感受到满足和成功的喜悦。 这是之前看到的一篇关于 大脑奖励机制 文章的一段话，为了要获得奖励我们需要有预设目标，而是每日 30 秒系列也是为了帮助...
showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 简介 分页、优化、可视区域、无限加载 写前端页面时最经常遇到的开发需求之一就是 渲染后端数据返回的数据对象，当数据对象数量极多的时候便需要进行分页。 常见的分页方式有三种： 在页面底部生成 上一页、下一页、页面列表 按钮。 用户可以很直接的选择...
阅读 1134·2019-08-30 12:44
阅读 641·2019-08-29 13:03
阅读 2550·2019-08-28 18:15
阅读 2417·2019-08-26 10:41
阅读 3080·2019-08-26 10:28
阅读 3028·2019-08-23 16:54
阅读 1982·2019-08-23 15:16
阅读 800·2019-08-23 14:55
