视障|【IT之家学院】改善视障用户的网页体验——替代文本的那些事儿

欢迎来到 IT 之家学院，这里是无障碍实验室。时隔一月，再次与大家见面，我感到非常愉快。今天，我们来一起探讨替代文本的相关问题。
长久以来，视障用户都是在屏幕阅读器的辅助下，才得以赶上互联网大潮，进而享受到互联网带来的红利。这一切都建立在互联网产品与屏幕阅读器具有良好兼容性的基础上。体现最明显的一点便是：产品各功能性组件应确保具有可读性较高的文本型标签。如若不然，依托文本合成语音的屏幕阅读器也只好表示爱莫能助了，只能干巴巴的读出 “未加标签” 来安慰一下你那孤寂的灵魂。
互联网的早期时代，受限于网络传输能力，绝大多数产品都十分体面地通过文字来呈现内容，因此无障碍问题暴露得并不明显。而伴随互联网基础建设的日趋完善，网络迈进高速发展的快车道，功能堆砌和设计花哨有了先决条件，一场场美化运动掀起一阵阵 “血雨腥风”，在普通用户看来顶多算是有碍观瞻，但对于视障用户而言，那可真就是叫苦不迭了，他们只能苦哈哈地听着一串又一串的 “未加标签” 勉强过活。
不过，任何事物的发展，无外乎从低级快速迈入高级，再由高级逐渐趋于完善，无障碍同样遵循这个原则。在经历了早期的垦荒时代后，终于迎来了希望的曙光。就在 2020 年 12 月 24 日，工业和信息化部下发了《互联网应用适老化及无障碍改造专项行动方案》，方案的总体要求强调：针对视障人士，应解决按钮标签和图片信息不可读的问题。
其中，按钮标签和图片信息均可通过替代文本的形式添加，同时也不会影响现有的视觉体验。因此，为了让更多的开发者能充分理解这一特性，我们特此撰写了这篇文章，希望能对大家带来些许帮助。
什么是替代文本？替代文本，一种用于补充或替代非文本内容的文字性说明，可编程式地提供或从现有文本中引用，通常用于为非文本控件创建标签，或为非装饰性内容提供简要描述，具有十分广泛的应用场景。
几乎所有的语言都支持替代文本。例如，HTML 规定 img 标签必须提供的 alt 属性，它可在浏览器无法显示图像时输出文字信息，更重要的，这些文字信息有助于屏幕阅读器用户清晰直观地了解图像内容。又如为元素提供额外信息的 title 属性，当元素获得鼠标指针时弹出工具提示，但从某种角度上说，它并不能作为首选的文本替代方案。
事实上，由 HTML 5 原生控件构建的页面，其无障碍体验是非常优秀的。因其支持自定义控件而具有丰富的扩展性，广受开发者的认可。W3C 为了使自定义控件能获得与 HTML 5 原生控件相同的无障碍体验，加强自定义控件的语义化支持，制定了 WAI-ARIA 技术规范。通过该项技术规范实施页面开发，能最大限度地保障各类障碍人群的无障碍体验。
在 WAI-ARIA 中，通过 aria-label 与 aria-labelledby 属性为元素创建标签，从而达到替代文本的目的。“标签” 的信息应当是简短而明了的，它是用户最先获取到的控件信息，有着超然的地位；当标签无法准确传达控件的信息时，开发者可提供 aria-description 与 aria-describedby 属性，为用户提供更为详细的内容描述。
应用 aria-label 创立替代文本控件的标签不为文本型，或标签的文本没有准确传达控件的目的，可使用替代文本提供更为明确的标签。例如，一个点击发送 “滑稽” 表情的按钮，它的标签由 emoji 表情组合而成，就像这样：
????????
文章插图

绝大多数的屏幕阅读器支持 emoji 表情的朗读，但这并不意味着所有用户能理解这个组合表情。因此，我们通过替代文本来告知用户，它具有 “滑稽” 的含义。