文章转载自│无障碍设计小组
作者│夏冰莹
随着公众号、B站、抖音、播客等自媒体的爆发性增长，大家的碎片时间似乎越来越多地花在浏览互联网原创内容上，也有越来越多的人投身于创作者的行列。
光是在疫情期间，我身边就有好多朋友（包括我自己）因为闲得无聊而开始做知识分享、录vlog、当up主等等。
如果你是业余创作者、专业新媒体人、或是通过社交媒体做宣传的内容运营/广告策划人，请听我说一句：

是时候审视一下你分享的内容是否无障碍友善啦！

插图：一排微笑招手的残障人士，

包括轮友、手臂截肢、右腿打石膏、

右腿佩戴假肢、牵引导盲犬
在提到信息无障碍的时候，大家一般想到的都是互联网产品的无障碍 —— 设计开发app和网站时应该考虑到残障用户、打造所有人都能使用的产品。我一直以来也写过很多这方面的倡导文章。
但是，"信息无障碍"的根本概念是：所有人都可以平等地获取内容、享受信息化时代的便利和价值。网络内容 — 包括文章、视频、播客等 — 也都是信息无障碍当中必不可缺的一环。
中国有1700万视障人士、2700万听障人士（2016年数据），随着人口老龄化，这个数量还在不断增长。正在读这篇文章的你，也会在不久的未来成为眼花耳背的障碍人士。
除此之外，研究表示高达15%-20%的人口患有一定程度的阅读障碍 [1]，但绝大多数不会就医也无法被确诊，只会默默因为阅读困难而苦恼。
大家做内容创作，相信初衷都是想把自己的故事分享给更多人。如果你的内容无法被有障碍的人们观看，就相当于预先把上千万人拒之门外、对他们说"你们没资格看我的创作"。
或许，你从来没想到过“残障人群也会看我的内容”这个问题。残障人士似乎总是这样被社会强制隐形化，哪怕有4400多万视障与听障人士，主流社会却几乎没有机会听到他们对信息和娱乐的诉求。
无论身体状况如何，大家对优质互联网内容的兴趣都是一样的。希望内容创作者们都能以"为所有观众提供友善易懂的内容"作为前提去创作。
本文内容：图文创作无障碍指南
在这篇文章中，我会针对图文创作（包括公众号、博客、知乎、论坛、微博、小红书等）提出5条建议，让你的文章能被更多人轻松浏览。
下次我会继续讨论视频和播客创作的无障碍考量。
01
避免把文字嵌入图片里
这个问题在公众号文章中尤其常见，在其他平台也会看到。内容平台提供的的排版工具有限，所以很多创作者会把想要的文字排版做成图片、插入文章里。
比如我随手找的这篇知乎文章，为了给段落标题加上边框设计，就把标题做成了图片：
为了给[前言]和[前期及设备]这两个标题

添加黑色边框的设计，

作者
就把文字排版做成了图片
这种处理有两个问题：
第一，很多视障人士（包括盲人和部分低视力人士）是通过一种叫读屏软件的东西操作手机和电脑的。读屏软件会把屏幕上的文字朗读出来，让视障人士不用看屏幕也能听到所有内容（详细科普：盲人怎么用手机？如何打造视障友善的 app？）
但是，如果你把文字嵌入图片里，视障用户就读不出来了。有些擅长技术的视障用户会用图像识别工具来提取图里的文字，但是操作起来很麻烦、准确度也不能保证。
第二，现在很多app都支持黑暗模式，也有不少人（包括我自己）为了眼睛更舒适，不论昼夜都开着黑暗模式。这时候，为了明亮模式做的内嵌文字图片看起来就会非常突兀和刺眼。
同一篇文章在黑暗模式下，

白色底色的标题图片就很显眼
没有视力障碍的人都会觉得白花花的图片夹在黑暗模式里很刺眼，对光敏感的人就更是如此。我在做无障碍设计的过程中，了解到大部分低视力人群都喜欢一直开着黑暗模式，因为看明亮的页面很容易让眼睛感到疲劳和刺痛。
停止把文字嵌入图片的坏习惯，能给所有读者带来更好的体验。
公众号创作者可以利用排版编辑器（比如秀米/壹伴/135等）寻找模板，这样不用图片也能达到漂亮的排版效果。
我参与过的糖果罐「糖话」访谈计划，之前一直是用图片内嵌文字的方式来做排版的，但在一位听障创业者的采访文章发布之后、有很多残障社区的伙伴反馈说图片不可读，于是他们立刻重新采用文字排版发布了文章、并且在后续的推文中不再把文字做成图片。
左图：修改前的文章，

文字内嵌在图片里，黑暗模式下很明显；

右图：修改后的文章，

使用文字排版，黑暗模式适配就好得多
修改后的文章
中加入了这样一段介绍，值得所有内容创作者反思学习：
“
「糖话006」发出后，不少关注无障碍的朋友们反馈 ，文章内部分文字内嵌在图片里，视障人士没办法直接用读屏软件获取信息，还得使用OCR工具将图片转文字后再读屏，增加了获取信息的难度。

反思之余，我们也发现，在公众号生态中，将文字内容制成图片，以节约排版时间，优化排版视觉效果的做法相当普遍。但因此也把1700万视障人群隔离在优质媒体内容外了。

于是我们在这篇文章做了以下调整：
1. 修改排版，尽量不把文字内容做成图片；
2. 所有配图都加上文字描述注解

未来我们也会持续改进排版的传播性、功能性和视觉效果。一个小小的公众号能带来的改变是有限的，但我们希望成为改变的开始。
”
02
为图片添加文字描述
上面糖果罐的描述中也提到，除了不把文字做成图片之外，给文章配图加上描述也是视觉无障碍的重要环节，因为视障用户无法看见或看清图片、需要通过额外的注释来理解图片内容。
如果是在自己的网站/博客上发布内容，可以用图片属性中的替代标签（alt text）来添加隐形的注释，这样只有使用读屏软件的用户才会听到。Alt text的应用方式请参考 img元素 - MDN开发文档 [2]。
如果是在其他内容平台发文章，知乎用户请通过内置的图片描述、公众号用户请通过文字排版，在图片下方插入明文注释。为了让看不到画面的人也能了解图片内容，无障碍友善的图片注释会比常见的为明眼人写的注释更详细一些。
例子来自我上一篇关于耐克运动鞋的文章，

图片下方加入这段描述文：

左手佩戴假肢的运动员演示FlyEase Go的穿脱方式

更多例子参考这篇文章中的所有配图。
如果是小红书、微博这类无法直接在图片旁边添加描述的内容平台，可以在文内加入描述。
之前我在知乎发的一条想法配有两张图片，

就在想法文内写上了图片描述：

图一 - CH活动-聊聊accessibility[下略]

图二：我的CH个人资料页
顺提，国外的主流内容平台（脸书，Ins，Twitter等）大多都可以在发布图片的时候自定义无障碍标签。希望国内的内容平台也能跟进啊~
03
使用清晰可读的配色
在公众号或博客发布内容时，是可以自由搭配颜色的。但需要注意，如果文字色和背景色的明度太接近、或者使用了花哨的背景图片的话，文字会很难阅读。
即便你自己能看清这个配色，对于中老年人、在光线很强的地方用手机的人、没戴眼镜躺在床上玩手机的人等等，可能都会看起来很吃力。
下面这几个糟糕的案例，全部来自某知名公众号排版编辑器的模板。公众号作者在选择模板的时候真的要三思！
视力健全的人都看得很吃力的配色：

文字颜色太淡、

文字色和背景色很接近、

文字放在花哨的背景图片或者纹理上
推荐一个实用的配色选择工具：
color.review

（网址就是 http://color.review）
用这个工具选择前景色和背景色的时候，它会直接在选色器里标注出对比度的分界线（推荐配色对比度要在4.5:1以上，也就是超过中间的那条白线，这个数字来自 WCAG 互联网内容无障碍指南 [3]）。如果你的配色对比度计算出来超过4.5:1，就是可读性比较好的色彩搭配。
color.review网站使用范例
公众号作者在选择封面图的时候还需要注意这点：
一并推送两条或以上消息的时候，第一条的标题会叠加在封面图上。如果封面图颜色较淡、或者图片复杂的话，标题就可能会看不清。那样不光对视力障碍者不友善，也可能会大大影响文章的点击率。
浅黄色、复杂的封面图，

导致白色标题很难看清
在制作封面图的时候叠加深色的保护色或滤镜，标题就会更容易阅读。
即便用复杂的照片当封面图，

在添加保护色之后也能清晰读出标题
04
增加文章的易读性
在文章开头也提到了，高达15%-20%的人口患有一定程度的阅读障碍 [1]，但是多数人并不了解「阅读障碍」这个概念，只是会觉得读文字很吃力、不喜欢读书。
即便没有阅读障碍，大部分人也都并不喜欢阅读长篇文字，反正我每次必须要读论文的时候，很快就会犯瞌睡...
但是，写文章时采用一些排版技巧，就能提高文章的易读性、让所有人读起来都更轻松。
这两篇文章，你更愿意读哪篇？

左：手写体、长段落、

紧凑的字距和行距

右：标准字体、短段落与列表、

加宽字距/行距、插入配图

内容与版面
  • 尽可能使用列表（比如你正在读的这个列表）。
  • 使用简短的词汇和句子。不要故意使用复杂语法或者卖弄辞藻。
  • 使用短段落。手机阅读时，一个段落尽量不要超过5行。
  • 在适当的间距插入配图，避免满屏密密麻麻都是文字
    。

文字样式
  • 避免太小的字号。中文字号推荐在15号或以上（我自己的公众号使用16号字）。
  • 适当增加字距和行距，读起来会更轻松。公众号推荐字间距1或以上、行间距1.75或以上。
  • 加粗关键词，方便读者快速扫到重点。
  • 避免使用非常规字体，比如手写体、海报体等。偶尔作为装饰还可以忍受，但这些字体的辨识性很差，不适合大面积使用。
这些建议总结自我对阅读障碍人群的研究，但其实也都算是常识，大部分写文章的人估计都会有意无意地遵循其中一些规则。
这些规范对所有读者都能提高文章的易读性，对于低视力和有阅读障碍的人当然更是如此。
05
制作图例时不依赖颜色区分信息
大约8%的男性与约0.5%的女性有色盲。如果在制图的时候用颜色来代表某种信息，就会有很多色盲读者无法获取你想表达的信息。
这是我之前看到的一盘关于货拉拉跳车事件的讨论文章：
文章截图
文章里的地图配图里，用红/绿/蓝三种颜色标注出了三条不同的路线，并且分析了“绿线”与“红线”的优劣。但是，有红绿色盲的人是看不出红色与绿色的区别的，ta们看到"绿线"vs"红线"的时候就只能一脸懵逼了。
地图图例的红绿色盲模拟效果，

红色和绿色的线条颜色看起来很接近

在制作图例的时候，额外加入文字来进行区分（比如1, 2, 3 或 a, b, c），就可以了。这样，即便无法区分颜色，也可以通过文字来理解图例。
在图例中标注 [A 原定路线] [B 实际路线]，

文章中就可以使用 [A 绿线] 和 [B 红线]

来指这两条线路
在上图里我也顺便纠正改了一下原图设计中的两个问题：配色可读性差、缺少图片描述。


图文内容创作的注意事项就讲到这里啦，最后总结一下：


图文内容无障碍规范
  1. 避免在图片里嵌入文字
  2. 为图片添加文字描述
  3. 使用清晰可读的配色
  4. 增加文章的易读性
  5. 制作图例时不依赖颜色区分信息

下次会继续讲视频和播客的无障碍规范，up主和播主们请持续关注喔~
文内链接：
Dyslexia Basics - International Dyslexia Association

https://dyslexiaida.org/dyslexia-basics/
<img>：图像嵌入元素 - MDN互联网开发者文档

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
WCAG 互联网内容无障碍指南 2.1

https://www.w3.org/Translations/WCAG21-zh/
也可以点底部阅读原文 去知乎看更多讨论
往期推荐：
辞典甄选 | 书单05：Web设计代码的初步认知
辞典精译 | 划重点！2021年移动端10大设计趋势
辞典说 | 艺术盛宴「奥斯卡」，每届都值得回味与期待
辞典精译 | 没时间读Google材料设计指南？掌握这10个要点也可以！
  UX 辞典  
• 扫码加辞典酱 •
• 成为学习交流小队一员吧 •
形象理解用户体验，时刻关注设计趋势
Powered by Canopy Institute of Design
2020©UX Pedia. All Rights Reserved
「喜欢UX辞典的推送，请设置个 星标☆ 」
「下次就能 第一时间 看到惹」
 赞了吗  在看吗 
 戳下这里呗  别害羞 :  ) 
继续阅读
阅读原文