封面

简介

无障碍、DOM 小细节、前端开发、a11y、Accessibility

无障碍的英文为 Accessibility 由于单词拼写过长往往被缩写为 a11y 其中 11 指的是中间有11个字母。

无障碍指的是在使用过程中,不管什么类型的用户都可以正常使用。生活中最常见的就是无障碍设施 相信很多人都吐槽过,让我们先从生活例子前端开发 探讨探讨 无障碍 相关内容。

本文内容偏科普,作为接下来几篇前端 无障碍 文章的引子。

生活例子

盲道 是生活中最常见到的无障碍设施了,它的本意是帮助盲人老花眼等视力障碍人群进行方向指引,让所有人都可以无障碍的行走在道路上。可是现实生活中的盲道往往和实际意义背道而驰:

盲道

这样的盲道相信大家肯定不止一次吐槽过它到底有没有用,除了盲道生活中还有很多这样的无障碍设施:

  • 公交车的 特殊座椅,设计初衷给 老弱病残孕 使用,但是更多的时候是被 年轻人 给占用。
  • 动车站的 无障碍电梯,设计初衷给使用 轮椅老人 等行动不便的人使用,但是每次都能看到很多人去占用它。
  • 电梯中的数字键下设置着 盲文 方便所有人无障碍使用。
  • 纸币上的也有 盲文 方便所有人无障碍使用。

与我何干

很多同学可能会有这样的问题 与我何干?其实除了基数较多的 特殊群体,我们有时候也会 暂时性 的成为 特殊群体。在特殊群体时间性上分为了:暂时性、永久性、情景性。

暂时性

离小二身边最近的例子便是 阿零 同学,打篮球摔倒时不小心用手去支撑地板导致骨折脱臼。在一些需要双手操作的情景下会无能为力,比如有些手机应用需要用到 两指缩放等操作,iPhone 提供了 辅助触控 来实现无障碍:

触控辅助

谁能保证自己一辈子都 完好无恙 呢?就算是 两块胸肌八块腹肌 的叉叉学长在连续一个多月加班下,由于脊柱压迫导致了暂时性失明,并不是身强力壮就不会出事。同学们还是要多运动运动,不要久坐和埋头在电脑面前。

永久性

小二的小姨夫就是天生的 红绿色盲,大家不要以为这个比例很低:

  • 我国男色盲率:4.71+-0.074%
  • 我国女色盲率:0.67+-0.036%
  • 我国色盲基因携带者的频率 :8.98%

大多数的 PC 游戏都有帮助 色盲 的颜色反转,例如大家常玩的 LOL 就有提供大家可以试试。iPhone 在辅助功能中也提供了:显示调节色彩滤镜对比度增强等功能来帮助 色盲色弱视力困难用户。

色彩滤镜

情景性

情景性 是生活中最经常接触的无障碍。在会议上班有时需要将手机调制静音,当 微信 好友发来 语音 可以通过长按语音将其转化为 文字

色彩滤镜

很多同学没想到吧?生活中的一些情景下也是需要无障碍来帮助我们。

无障碍分类

无障碍主要分为:运动觉、视觉、听觉、知觉,下面介绍几个相关例子来帮助理解:

运动觉

运动觉指的 运动障碍灵巧性障碍

  • 骨折导致的操作不便,可以使用语音或者辅助设备等。
  • 颈椎病导致头部不能方便转动,可以使用头部、眼部跟踪器等。
  • 笔记本电脑的触控面板失灵 或者 正在乘坐公交、地铁等不方便使用鼠标的场景 ,可以利用 键盘快捷键 和 网页无障碍功能等(下篇文章讲到)。

视觉

  • 老花眼和视力障碍,使用 手机放大器显示放大器 等,不得不提的就是有些网站使用 maximum-scale=1.0 来禁止页面被缩放,这些用户该如何是好?
  • 色盲、色弱,网页提供一定的 对比度颜色 使用或者切换的工具。
  • 盲人,提供可以帮助 阅读器辨识页面 的工具,其实程序员中还有 盲人程序员

听觉

  • 听力障碍,使用助听器、人造耳蜗等,在使用软件或者网页,不能仅仅只给出 错误提示音 还需要对错误进行视觉提示

知觉

  • 对于 ADD 难语证,应该减少 页面干扰认知负担

力所能及

在前端页面开发过程中,可以在 力所能及 的范围内使用 无障碍阅读 相关技巧:

  • 如果目标群体并不需要 无障碍阅读 可以考虑不使用。
  • 日常开发任务重无暇顾及时,可以力所能及使用一部分,当闲暇时对前端页面进行优化。

四个参照

  • 可感知,并不是所有人可以看清页面上的东西,例如针对色盲、色弱用户对页面的颜色进行一些处理。
  • 可操作,并不是所有人都可以使用和常人一样的工具,例如是否可以不使用 鼠标触摸屏 就能操作网页。
  • 易理解,设计过于 复杂不一致 会对使得用户困惑,例如输入框只有设置 placeholder 而没有设置 描述标签,用户可能输入到一半就忘记自己在操作什么。
  • 兼容性,用户是否能够通过盲人键盘、屏幕阅读器来使用页面,最熟知的便是 霍金大大 使用三个手指头来操作设备。

三个主题

接下来的文章将围绕下面三个主题,其中 语义化 相关的内容在 SEO 系列文章中就提到过 H1 の 小秘密img の 小九九SEO 初体验 便是 语义化 的一部分,实现 SEO 的同时还能帮助到 特殊群体用户 岂不是妙哉。

  • 焦点:使用键盘 tab 下一项选择,tab + shift 上一项选择,合理的设置页面的焦点帮助用户提供更多使用可能
  • 语义化:通过语义化帮助 无障碍相关 工具理解页面。
  • 视觉设计:通过颜色和对比度、空间布局等帮助用户方便感知和理解页面。

无障碍相关内容

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

  • 如果您想让更多人看到文章可以点个 点赞
  • 如果您想激励小二可以到 Github 给个 小星星
  • 如果您想与小二更多交流添加微信 m353839115

微信公众号

本文原稿来自 PushMeTop


书籍推荐