如何在推特上兼顾无障碍访问
由 Mux 赞助的 DEV 全球展示挑战赛:展示你的项目!
我整理了一些自己常用的推特技巧,希望能帮助大家更好地理解和使用无障碍功能。希望对其他人也有帮助。
如果您还不熟悉“替代文本”或“屏幕阅读器”,请查看本文末尾的“术语解释”部分。
快速链接/各部分概览:
(前提条件)启用替代文本。
Twitter 支持为图片添加替代文字。目前,您仍需明确选择启用此功能。要启用此功能,请访问 Twitter 设置中的“辅助功能”选项卡,并启用“撰写图片描述”。
我仍然希望有一天 Twitter 能默认启用此选项(甚至强制要求启用),而不是让用户选择加入。
为图片提供有意义的替代文字
编写替代文字时,想象一下你在向坐在你对面桌旁的朋友描述这张图片。想想你会如何描述,才能在对方看不到图片的情况下,完整地传达这条推文的含义。
- 上下文至关重要。同一张图片根据上下文可能需要不同的替代文字。(再次强调,想想你要如何向朋友描述这张图片。)
- 不要啰嗦,尽量简洁明了地表达清楚意思。
- 避免使用“图片……”或“图形……”。标签本身已经隐含了上下文信息
<img/>,在替代文本中再添加这些信息是多余的。 .在替代文本末尾添加句号( )。这将使屏幕阅读器“暂停一下”。
替代文字示例:
- @RobotHugsComic在Twitter 上发布的这条精彩推文提供了一些关于如何为推文中的图片添加有效替代文字的绝佳示例。
- WebAIM还提供了关于alt 文本中上下文重要性的优秀指南,以及alt 文本错误示例。
在包含动态 GIF 的推文中直接提供“替代文本”。
我之所以把“alt text”用引号括起来,是因为目前在 Twitter 上无法为动态 GIF 图片提供 alt text(即直接添加alt属性)。很多人现在都直接在包含 GIF 图片的推文内容中添加替代文本:
多词标签请使用驼峰式命名法或帕斯卡式命名法。
驼峰式命名法中,单词之间没有空格连接。首字母小写,每个后续单词的首字母大写。(例如:iPhone、eBay)。帕斯卡式命名法是驼峰式命名法的一个子集,其中首字母也大写。
驼峰式或帕斯卡式井号标签更容易被屏幕阅读器读取,也更容易被视力正常的用户阅读。
#ThisIsPascalCase#thisIsCamelCase#thisislowercase
请注意标点符号和特殊符号的使用。
前段时间,“举牌兔”梗很流行。一条推文会配上一只ASCII兔子,它举着一块牌子,牌子上的文字通常都是大写字母。用屏幕阅读器阅读这种文字内容……简直让人抓狂。
(这条推文只是一个例子,并非意在针对发推者。我选择这条推文仅仅是因为它是我个人比较喜欢的一条。)
下面这段屏幕录制视频演示了如何使用 Mac 内置屏幕阅读器“VoiceOver”朗读这条推文:
在这种情况下,要考虑一下这条推文的文字如果被朗读出来会是什么样子。更好的做法可能是将表情包以图片的形式呈现,并添加合适的替代文字。
这包括表情符号。引用阿德里安·罗塞利的话:
一般来说,应避免使用过多表情符号。要知道,不同的屏幕设置和尺寸可能会导致表情符号难以辨认,不同的文化背景(以及语境)也会改变它们的含义。但除此之外,在屏幕阅读器中,表情符号只会显得冗长。
不仅在推文正文中要考虑这一点,还要在你的推特显示名称中考虑这一点:
养成习惯!
我花了一段时间才养成考虑所有这些因素的习惯,而且我离完美还差得很远。我本来想在这里推荐一个推特机器人账号“ Please Caption!”,它会在我忘记添加替代文字时礼貌地提醒我。可惜的是,推特似乎已经改变了机器人的工作方式,而且这个账号(希望只是暂时的?)已经停止服务了。
条款
如果您不熟悉某些重要术语,本文将为您提供相关信息。
替代文本
替代文本(alt文本)为非文本内容提供文本替代方案。屏幕阅读器会朗读这些文本,而不是图像。它向依赖非视觉方式浏览网页的用户(例如盲人用户、低视力用户、认知障碍用户、聋盲用户等)传达图像的内容和功能。
替代文字为:
- 由屏幕阅读器朗读
- 如果文件未加载,则在浏览器中显示此图像。
- 可被搜索引擎抓取,因此可被搜索引擎索引。
屏幕阅读器
屏幕阅读器是一种将数字文本转换为合成语音的软件程序。
相关链接
- Adrian Roselli撰写的《如何提升您的推文可访问性》
- Twitter 有替代文本!(但有一些注意事项)作者:Adrian Roselli。
- 林赛·科帕奇 (Lindsey Kopacz)著《撰写有意义的替代文本》。
- 来自Hootsuite 博客的关于社交媒体包容性设计你需要知道的一切。




