桌面端的无障碍设计分析

　　关于无障碍的问题，近年来已经受到越来越多的关注，不止移动端，桌面端也需要进行无障碍设计。那么桌面端应该如何实现无障碍设计呢？本文作者对此进行了分析，一起来看一下吧。

　　作为一名设计师，我的求生欲告诉我，肯定需要。但是对于桌面端应该如何实现无障碍设计，我并不确定。

　　因此，我进行了详细的研究。随着调查的深入，越发认识到这个问题并不简单。我决定分享我所知道的调研结果，也希望能对大家有所帮助。

　　提到无障碍设计，许多人可能首先想到残障人士。但残障人士的范畴实在是过于庞大。作为设计师，如果我们要为他们提供服务，就需要对残障人士进行相应的划分。只有了解不同残障人士所面临的主要问题，才能更好地进行设计。

　　双耳听力丧失或听觉障碍，包括全聋、重听和听力弱化。很多双耳全聋的人也无法正常说话，因此通常使用手语进行沟通。除全聋外，还有许多听力弱化的人，如我的父亲左耳听不到声音。

　　随着年龄增长，记忆力、视力、听力和辨别能力会严重下降。许多老人连最基本的手机也无法使用，因此需要提供 棒棒机 来服务于他们（四川的俗语，简称老年机）为此小米的多亲手机就非常流行。

　　主要指四肢不灵活或需要使用辅助设施的人，以及在某些环境下无法正常通过手部操作的人。例如 B 站的心理咨询师朱铭骏，他是一名高位截肢的消防员，依旧能够通过嘴巴控制鼠标按键上网打英雄联盟。

　　上面讲到的这几类人士也是我们目前 互联网无障碍设计 我所能想到的用户，并且在不同类型上，无障碍人士的人数分布上也会有所不同，情况如下：

　　关于无障碍问题怎么编写asp代码表格内容，近年来已经受到越来越多的关注。在移动行业中，我们可以发现移动端对于无障碍的支持已经相对较为友好，很多软件都推出了自己的 无障碍模式 / 老年模式，国家层面也出台相应法规，强制要求无障碍的信息化产品必须改造。

　　关于无障碍的解决方案，特别是在桌面端产品的无障碍解决方案，目前市面上比较成熟的一共有以下几种方案：

　　通常阅读会包含它的类型以及内容，比如 下图当中的按钮，通过读屏软件就会阅读为：链接 - 网页，链接 - 资讯，链接 - 视频。

　　在 Win 以及 Mac 当中，都会默认提供类似的功能，因此视障人士使用自己的电脑上网，其实是有相应的功能来提供类似能力。

　　刚才讲的工具，主要都是针对于系统层面。那假设现在给到你一个场景。我是一名视障人士，假设我在别人的电脑当中要进入到一个网页去做相应的操作，这时候我应该怎么办？

　　因此应用层面的工具，可以帮助到上面这个场景的用户去做使用。那关于应用层面的无障碍工具，主要是在浏览器当中去封装一个工具插件。

　　我们可以打开 知乎、百度贴吧、等网站，在网站的角落都会提供这样一个无障碍入口，提示可以进入无障碍模式。

　　通过鼠标 hover，能够快速阅读页面信息，为视障人士提供便利。我们可以在读屏设置中设定阅读速度，快速跳转到对应模块，并启用大字幕。

　　在鼠标 hover 时，主要阅读网页信息的类型和内容，例如顶部的导航中，选择顶部信息阅读则为：链接；网页，链接；资讯，链接；视频。

　　通过 Alt+ 1、2、3、4、5、6，来实现对内容区域的快速定位，因为在整个网页当中，页面非常的长，对于本身就是弱势的残障人士来说，就是可以将网页当中的多个内容进行定位，进行实现锚点的快速跳转。

　　放大则是将页面显示的信息放大，进而可以查看更多的内容。我原本以为放大是一个没什么用的功能，但是直到看到真的有残障人士通过放大页面，去写 vue3 的前端代码，让我感到很吃惊。

　　放大主要针对的是 ** 视力障碍、视力较弱 ** 的人，通过页面放大，他们也能看清显示器的内容，而这种方式也会分为两种，系统层级与应用层级。

　　它的功能非常简单，就是放大屏幕当中的页面内容，进而能够给让低视力的用户看信息更为清晰。这个同样在 Win 和 Mac 上都有类似工具。

　　在 Mac 当中就是打开 辅助功能 - 缩放 ，勾选键盘锁缩放就可以缩放整个屏幕，随后我只需要按住 Command+Alt+8 就可以实现快速的缩放效果。

　　在浏览器当中，首先我们可以通过 ctrl+ ctrl- 快速缩放整个浏览器页面，只是整体页面的比例会有调整。

　　同时也可以使用刚才提到的工具asp学习，去缩放浏览器，不过它的缩放会有相应限制，一般只能缩放到 130%

　　变色的设计主要在显示器上去做调整，因为这部分内容很少能够在个别应用当中体现，所以在显示器上，我们可以设置 蓝、绿、红 三种颜色的比例进而实现对色弱用户的支持。

　　在网页设计中，也可以采用相同的解决方案来提供配色的选择。用户可以点击配色选项，切换不同的配色风格。将白色背景换成其他颜色，以支持色弱人士。

　　最近在很多网站上都出现了类似功能，比如斗鱼直播，有字幕功能；Youtube B 站也有字幕的显示，目的都是语音直接展示成为文字。

　　我记得在阿里云的一次设计分享会当中，着重强调了无鼠标操作。就是我们只有键盘也能够在阿里云上完成具体的使用操作。针对这种特殊场景，阿里云主要完成的表示鼠标 Hover 时的操作体验。

　　其实其目的也非常简单，因为大多数情况下鼠标媒介对于设计师来说都是非常重要的一种形式，我们通过 无鼠标的方式，就能够解决用户在没有鼠标这种特殊的状态当中，也能够保证他的体验最底线，因此这对于这款产品来说也是一个无障碍设计。

　　关于这个问题，在了解完所有的无障碍内容过后，自己也在思考，真的有必要吗？我想引用之前生活当中的一件事，希望能够对大家有所启发。

　　在去年的一个深夜当中，当时大概是凌晨的 3 点左右，我家门外传来了非常猛烈的敲门声，还在睡梦当中的我迷迷糊糊的走到门前，因为是深夜我下意识提高警惕，不敢开门。透过猫眼一看是一个外卖员，我就在门外喊话说，我没有点外卖，然后门外的外卖员焦急地指着订单，然后不停地敲门。这样的博弈持续了 15 分钟以后（中间是不停的拉扯，我就不赘述）。

　　我最终非常小心地打开了门，透过门缝观察这个外卖员，然后他焦急地指了指手中的订单，然后给我不停地指电话地址，我突然意识到他是一个聋哑人士，于是我便让他拨打电话，随后让这个顾客下楼取餐（篇幅关系，中间其实还有很长的沟通时间，就省略了）。

　　当时这个外卖员他是没有任何办法，因为顾客的地址错误导致了他在这里浪费了非常多的时间。随后我又会想，为什么这位外卖员会选择深夜送餐，可能就是因为深夜人少、单价高，他能够跑更少的订单挣更多的钱……

　　而对于无障碍的设计也是一样，因为使用的人群不是我们这群正常人，我们根本没有办法去评判这个设计的好坏，而在很多产品的基础设计当中，我们要去考虑残障人士的使用问题。

　　比如在企业微信的注册页面时，微信团队考虑到会有年长的用户群体，因此我们再输入号码是企业微信的数字，会默认放大来提示用户，并且会根据不同的分段来让用户对号码进行校验。

　　再比如，在使用百度搜索相关信息之后，我们如何快速返回搜索框并调整我们的搜索关键词呢？我以前的方法是将鼠标移动到搜索框中，现在我们可以通过按住斜杠键（/）快速聚焦光标，从而实现无鼠标的全程操作。

　　刚才我们看到各大网站里面对于无障碍模式的支持，其中包括贴吧，知乎。微博等等。那这些网站他们的这个技术是从何而来？如果我想要做应该怎么办？

　　我们只需要引用这个代码，就能够实现刚才的所有功能。但是这个代码库它本身是需要付费的。为此我在网上也寻找了一些平替的方案。

　　点击了过后，发现其实就是将上诉提到的功能进行重做，同时在页面布局上进行了简化。将页面的信息放大处理。通过这样的方式，从系统的角度实现了老年人的信息阅读。

　　关于无障碍，我们能立即想到的是电视和网页的 WCAG 规范。其中，我们需要在设计颜色对比度时进行明确的设定。

　　该行业的要求分为 AA 级和 AAA 级。更明确的颜色和更高的对比度能够确保更多色盲人群能够阅读。这也能满足更多用户的阅读场景。

　　WCAG 的AA 级要求小文本与背景的对比度至少为 4.5：1，大文本与背景的对比度至少为 3：1。

　　WCAG 的AAA 级要求小文本与背景的对比度至少为 7：1，大文本与背景的对比度为 4.5：1。

　　关于无障碍设计，我相信在行业不断发展的过程中，我们或许会有更多更好的解决方案。但无障碍设计本身没有一个绝对的价值。我只是总结了目前行业中的这些方案。

　　CE 青年请编写实现上述功的asp代码，微信公众号：CE 青年，人人都是产品经理专栏作家。专注 B 端设计领域，一个 2B 行业的 2B 设计师。