hanav 助力无障碍导航栏开发

42 阅读2分钟

“无障碍”这个词熟悉又陌生,经常听到却察觉不到实践。粗略举个例子,浏览网页的时候,如果鼠标是自行车,无障碍就是双脚行走,也许自行车让我们更快抵达目标,但不会因此放弃双脚行走的能力,况且双脚更灵活。

无障碍让应用从“能用”变得“好用”。

这一次我实现了一个无障碍的导航栏库 hanav,他有一些特别的特性:

  • ♿️无障碍——ARIA 标签增强屏幕阅读器的访问;
  • 🎹无障碍——完全键盘控制;
  • 🍯细腻动画;
  • 📱响应式独立移动端视图组件;
  • 🎨高度自定义。

Edit hanav-demo

hanav 诞生于商业产品需求,离职之后我不断迭代,那么 hanav 独立成长于开源世界。下面是 hanav 的灵感来源:

AppleVercelRadix UIGoogle
Apple 官网导航栏Vercel 官网导航栏Radix UI 导航栏组件Google 安卓开发者官网导航栏

上面动图展示的 4 个网站,尤其是 Apple 和 Radix UI 做的无障碍非常出色,具备无障碍的同时,又有细腻丝滑的过渡动画,实打实做到了人用人爱。正是因为有这样的先驱带头普及,才有更多的企业、产品、开发者和用户了解实践推广受益,我也是其中之一。

下面展示 hanav 的动画:

一个网页提供了一个导航栏,当鼠标悬浮在触发器按钮上、切换菜单、移出按钮,出现了丝滑的动画:菜单面板从导航栏内部平滑滑出,切换到另一个菜单时,面板的高度顺滑地变高或变低,并且菜单的内容像履带一样左移或者右移。选择了导航栏的自定义 y 轴动画选项、面板跟随选项、动态宽度选项后,出现了和之前不一样的动画:菜单面板以渐隐的方式出现,切换菜单时,面板会进行顺滑地位移,面板始终以菜单对应的触发器按钮为中心运动,并且面板的宽度是以动画形式变化的

下面的动图展示了在适配键盘导航之后的导航栏,使用键盘访问的模样:

在一个网页中使用 Tab 和 Shift-Tab 导航,当聚焦导航栏触发器按钮时按下回车,焦点从按钮跳跃至菜单面板第一个元素,继续 Tab,按钮到达面板里最后一个可聚焦元素,接着 Tab,按钮又回到了第一个可聚焦元素,按下 Escape,焦点从面板回到了触发器按钮。在面板展开时,通过鼠标点击面板,接着按下 Tab 或 Shift-Tab,焦点会聚焦面板第一个可聚焦元素或最后一个可聚焦元素

下面展示 macOS 下屏幕阅读器旁白“转子”(属于无障碍)对 hanav 的使用:

在一个包含 nav 标签的网页中激活了苹果“旁白”,通过旁白的“转子”工具快速定位到了导航栏内容

接着,只有大家的指导、喜爱和应用,才有茁壮于社区的 hanav。hanav 非常适合用在企业官网或产品官网,有很多网站的导航栏都有类似的模式。

在线体验:https://wswmsword.github.io/examples/hanav/

标星 Star:https://github.com/wswmsword/hanav

无障碍导航栏全攻略:https://juejin.cn/post/7443264648155299880