轻松改造公众号排版 SKILL，让文章对视障更友好

504431097

前阵子看 KHub 的文章中，图片配的文字有些特别，我猜是给视障人士看图用的。二十年前在微软做开发的经验跳了出来——这些文字，不应该写到图片的 alt 字段里吗？


问过作者，又将信将疑打开网页查看，才发现公众号的排版工具里真的没有给图片加备注的方法。这意味着多年来那么多公众号，文章都很难做到无障碍。令我震惊和羞愧的是，我们竟然都对此都浑然不觉。


现在排版全靠 AI，是时候解决这个问题啦。
我去 codex 里发指令：
修改 XX 排版 skill，添加根据图片内容配 alt text 的步骤。
很快，不管照片还是排版时 AI 生的图，alt 属性都加上了详尽的解释。




我喜滋滋把测试文章发给朋友，请他们帮测试，其实是想邀功。
但立刻就被打脸了——还有好多细节需要修正。
我这才留意到原来小小的装饰图案在视障人听来也是一张图；也才知道用  strong 标签或 b 标签，看上去都是加粗高亮变醒目，但读屏软件读出来可完全不一样。


怎么办？当然是让 codex 去学习并迭代喽。
去找一下最通用的网页信息无障碍的规范，根据规范要求，更新排版 skill。
十多分钟后，符合 W3C/WAI 要求的排版 skill 诞生了。
是不是就 OK 了呢？用它对文章排个版试试。打开手机上的朗读或旁白功能，闭眼听一遍，就发现问题啦。图片备注好啰嗦令人没有耐心听，还和正文混在在一起听起来行文逻辑都变奇怪了。
让 codex 再去学，再修改。两三轮迭代后基本达标啦。
这是我试下来比较 OK 的改造方案。各位有自己排版 skill  的伙伴们，请跟你的 AI 说这句话：
根据最通用的网页信息无障碍的规范要求，更新【排版 skill】（此处替换你的 公众号排版 skill 名称）。  要代入视障人士听文章的场景，思考标题、要点、引用等的写法，确保看文章听文章都能有良好体验。  Skill 要通过识图为图片添加 alt 备注，图片开头要添加“图 N”编号。alt 备注需要准确、简洁、传达意图，可以想想如果你在给一个完全看不到这个网页的人打电话，你如何用一两句话把这张图片最核心的信息或功能告诉他。具体细节参考 W3C 的 alt 决策树 https://www.w3.org/WAI/tutorials/images/decision-tree/ 和 https://www.w3.org/WAI/tutorials/images/
终于能让我的 skill 排版的文章在无障碍朋友面前不羞愧了。过程中我学到了好些无障碍的细节知识，越学越觉得还有好多得继续改。期待关注无障碍的朋友们可以多提意见呀。
对微信喊个话
如果你打开了旁白功能，点击右上方的这个 logo，听起来还是不太对吧？
因为！！该死的公众号编辑器，没法编辑图片备注也就罢了，编辑好的它还瞎改，把空白的 alt 给删了，role 和 aria-hidden 两个属性也都删了。
我的排版 skill 生成的代码是这样的，用了三重保险的 img alt="" 、role="presentation"  和 aria-hidden="true"


但贴到公众号编辑器后就变成这样的了。


我还尝试了用 API 上传内容到草稿箱。没用！也被替换得一个不都剩。
真的很难相信，从 2009 年就开始做信息无障碍的腾讯，公众号的无障碍支持竟然那么差劲。
甚至他们自己的无障碍文章，图片也没有恰当的说明，还是挺讽刺的。
是我使用方法不对吗？无障碍的朋友可以来指教一下么？
最近微信灰度放出了好了 AI 功能，什么 AI 代人写朋友圈、AI 代人读公众号。把 token 浪费在这样去人味的功能上很让人烦。有微信的朋友能喊个话吗？还是把 AI 用到正途上把，比如——为公众号文章一键补全无障碍的功能。
最后的最后，说件测试时的小趣事。
开启旁白功能后我无意中三指敲屏幕三次，屏幕黑了但手机仍旧能被操作，瞬间陷入混乱。我瞎点一气，手机播报了一堆不相干的功能，似乎打开了好多并不想打开的应用，完全不知道该怎么退出。用电脑搜索找到对策、三指再次敲三下，才恢复正常。

我终于对盲人用手机的麻烦有了一丢丢体感。黑屏的那个瞬间，我感觉自己才是真正的盲人。