逐日 30 秒 ⏱ 扼住核心的喉咙

2019年9月1日 176次阅读 来源: zhangxiangliang

简介

无停滞、HTML 小细节、中心、a11y、Accessibility、框架遴选

无停滞开辟照样应当从 HTML 最先聊起，无论是瞽者浏览器照样浏览器等东西最中心的部份照样在 HTML，毕竟没了 CSS 只是不雅观了，没了 JavaScript 只是少了交互和无穷扩大的可能性。

有的同砚会说了产物和老板拿着鞭子在背面赶马车那里有时间写这些。现实是如许的，然则在遴选UI框架的时刻能够遴选 无停滞 做得好的来提拔网站的友好度，有句话说得好 居庙堂之高则忧其民，处江湖之远则忧其君，天真变通下不影响生涯体验岂不是美哉？

键盘与交互

HTML 标签元素中另有一种比较少人晓得的分类要领：交互标签 和 非交互标签，在无停滞开辟中须要注重的就是这二者。交互标签 往往会和 中心 一同涌现，按下 tab 键遴选页面上的 交互标签 这个时刻交互标签会被 蓝色的 中心 框掩盖，假如想反向遴选能够运用 shift + tab。

在掘金个人主页里按下 tab 键后，蓝色的中心框会从 logo 到 首页一个个链接遍历下来，在这个过程当中能够发明 链接、按钮、搜刮框 都邑发生中心。仔细的同砚假如翻开掌握台会还会发明，跳转的递次和标签在 HTML 中涌现的先后递次有关。

《逐日 30 秒 ⏱ 扼住核心的喉咙》

运动觉停滞的用户，比方霍金大大就能够应用他的三个指头合营 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：

<element tabindex="number">

它依据 tabindex 从小到大来掌握 tab 的跳动递次，虽然能够掌握全部页面的浏览递次，然则最好只运用 0 来指定 tabindex 属性。在上面也提到过翻开掌握面板检察页面构造 会发明 tab 默许的跳转递次和 标签递次是一致的，假如损坏掉了这个递次关于一些不兼容 tabindex 的瞽者辅助东西、浏览器会形成没法兼容的状况。

损坏标签递次

从下面例子也能相识到 页面构造递次 异常重要，假如屏幕浏览器不支持 tabindex 时便会先读取footer标签的中内容，关于瞽者来讲可能会一头雾水不晓得网站怎样运用：

代码
<!-- 一般递次 -->
<!--<header>header</header>-->
<!--<main>main</main>-->
<!--<footer>footer</footer>-->

<!-- tabindex 掌握递次 -->
<footer tabindex='3'>footer</footer>
<main tabindex='2'>main</main>
<header tabindex='1'>header</header>
结果

《逐日 30 秒 ⏱ 扼住核心的喉咙》

损坏显现递次

除此之外当运用 css 款式 float: right 转变页面衬着的分列递次也可能会形成影响，关于习气从右向左浏览的用户来讲会形成疑心找不到中心的位置。

代码
<style>
    button { float: right; }
</style>

<button>1</button>
<button>2</button>
<button>3</button>
结果

《逐日 30 秒 ⏱ 扼住核心的喉咙》

自定义元素

当自定义元素时须要把元素默许的 中心 功用模仿出来举行替代即可。在上文提到了 非互动标签 转换 互动标签 应用 tabindex 这个属性来完成，实在另有一个小技能应用 tabindex=-1 设置标签后，对应的 DOM 节点将会具有 focus() 要领，应用这一点能够合营 JavaScript 能够完成异常多的功用。

重要须要注重的是 tab键、enter键、方向键、space键 的功用。

看不见的元素

提到看不见的元素许多同砚可能会一头雾水，最常见的看不见标签就是隐蔽的导航菜单栏：

《逐日 30 秒 ⏱ 扼住核心的喉咙》

上面讲到的 交互标签 会按递次被 tab 选中成为中心，导航菜单中的元素是一个个的 a[href]，当在运用 tab 浏览的时刻中心会被锁定在这个隐蔽的菜单当中。假如没有把鼠标悬浮在首页上时，用户可能会发生疑心 中心去那里了。

这个时刻的解决要领就是运用 display:none 或许 visibility:hidden 来掌握标签不在 tab 的选着局限中。二者区别是 display:none 会让元素在衬着树中消逝，不占用任何空间，visibility:hidden 则保存元素占有的空间，也依旧在衬着树中。当须要的时刻运用 display:block 和 visibility:visible 举行显现。

掘金的隐蔽菜单做得挺好的，不会让中心跳转到
隐蔽菜单，美中不足的是只能经由过程鼠标悬浮来
显现菜单 ，不能经由过程
tab 和
enter 举行选中操纵。

实例

主内容疾速切换

经由过程点击菜单栏来举行页面的切换，然则你有思索过当切换完菜单，用户要浏览内容还得按若干下 tab 才进入内容标签嘛？假如菜单栏有五六十个的状况是何等恐怖，你还真别说没有 某东 和 某宝 的菜单项就有这么多：

《逐日 30 秒 ⏱ 扼住核心的喉咙》

不过中选中标签按下 enter 时，他们会直接翻开新的页面算是减少了用户须要 tab 的次数，不过在新页面上照样要从新点击屡次 tab 才浏览内容。我们能够应用 锚点 和 tabindex=-1 来协助用户疾速切换内容中心：

<a class="super-skip" href="#content">疾速进入内容</a>

<nav>
    <a class="menu-items" data-page="home" href="/home">Home</a>
    <a class="menu-items" data-page="post" href="/post">Post</a>
    <a class="menu-items" data-page="user" href="/user">User</a>
</nav>

<main id="content" tabindex="-1">
    重要内容
</main>

这下用户按下 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：

<style>
    .page {
        display: none;
    }

    .active {
        display: block;
    }
</style>

<nav>
    <a class="menu-items" data-page="home" href="/home">Home</a>
    <a class="menu-items" data-page="post" href="/post">Post</a>
    <a class="menu-items" data-page="user" href="/user">User</a>
</nav>

<div class="home page active">
    <h1 class="title" tabindex="-1">home</h1>
</div>

<div class="post page">
    <h1 class="title" tabindex="-1">post</h1>
</div>

<div class="user page">
    <h1 class="title" tabindex="-1">user</h1>
</div>

<script>
    const doms = document.querySelectorAll('.menu-items');
    const items = Array.from(doms);

    function superSkip(e) {
        const page = e.target.getAttribute('data-page');
        const oldPage = document.querySelector('.active');
        const newPage = document.querySelector(`.${page}`);
        const newPageTitle = document.querySelector(`.${page} .title`);

        // 切换页面
        oldPage.classList.remove('active');
        newPage.classList.add('active');

        // 设置中心
        newPageTitle.focus();
        e.preventDefault();
    }

    items.forEach(i => i.onclick = superSkip);
</script>

Alert

在运用弹出自定义 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 无停滞相干的 交互元素 就做得不怎样好了，假如产物目标群体中有须要 无停滞 相干的效劳，在遴选框架时能够尝尝个中的 交互元素 做得怎样，毕竟站在伟人的肩膀上比本身造轮子快又好。

无停滞相干内容

一同生长

在疑心的城市里总少不了并肩偕行的
同伴 让我们一同生长。

  • 假如您想让更多人看到文章能够点个 点赞。
  • 假如您想鼓励小二能够到 Github 给个 小星星。
  • 假如您想与小二更多交换增加微信 m353839115。

《逐日 30 秒 ⏱ 扼住核心的喉咙》

本文原稿来自
PushMeTop

    原文作者：zhangxiangliang
    原文地址: https://segmentfault.com/a/1190000018850232
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞