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

无聊上爱盲

楼主 无聊上爱盲说：
转载 IT之家无障碍实验室
2021-08-06 17:19
已关注
欢迎来到 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 表情组合而成，就像这样：
<button>??</button>
图片
绝大多数的屏幕阅读器支持?emoji 表情的朗读，但这并不意味着所有用户能理解这个组合表情。因此，我们通过替代文本来告知用户，它具有 “滑稽” 的含义。
<button?aria-label="滑稽">??</button>
图片
如你所见，aria-label 属性中填充的字符串即为替代文本。在本例中，屏幕阅读器将朗读为 “滑稽 按钮”，及 aria-label 的值与元素类型被读出，控件的 innerText 则被忽略。所以，我们可以很快得出，当 aria-label 与 innerText 同时存在时，aria-label 的优先级高于 innerText 。
当你考虑好一切，决定使用?aria-label 时，请确保填写了恰当的值。切忌将其设为空值，这虽然不影响屏幕阅读器获取 innerText 的信息，但并不能保障所有的屏幕阅读器都能良好兼容。尤为重要的，控件中 innerText 已经明确传达含义了的，无需额外提供替代文本，除非开发者认为替代文本具有更精准的表达。
通过?aria-labelledby 关联标签
从?aria-labelledby 这一属性名称上不难察觉，该属性可用于为控件关联替代文本。换言之，dom 中若存在可用的文本，即可通过该属性引用文本的元素 id ，使其作为控件的替代文本。令人赞叹的是，该属性还可关联多个元素 id ，而你仅需将元素 id 按从左到右的顺序依次排列，并用空格分割，aria-labelledby 将逐一创建关联，并按照你规定的顺序朗读。
例如，一个支持输入页码后跳转页面的编辑框，它所拥有的标签被拆分成了若干个元素，我们就可通过?aria-labelledby 这样的神仙属性来关联，而不再需要费劲巴力的通过 aria-label 手动填写了。
<span?id="numero">?第?</span>
<input?type="text"?id="input"?value="1"?
aria-labelledby="numero?input?page?total"?/>
<span?id="page">?页?</span>
<span?id="total">?共?5?页?</span>
图片
当用户使用?tab 键聚焦至该编辑框时，屏幕阅读器将朗读为 “第 1 页 共 5 页 可编辑文本 1”。显然，“可编辑文本” 前的内容是我们关联的标签，之后为输入字段的 value 属性值。如果没有关联标签，这样的编辑框在屏幕阅读器下会表现得十分糟糕，如何朗读完全取决于浏览器与屏幕阅读器的配合了。
细心的你或许已经发现，我们将?input 的元素 id 一并加入到 aria-labelledby 中，还指定了它的出场顺序，也正如你所看到的，value 的初始值被作为标签的一部分。这样做的好处在于，视障用户编辑字段时，能在标签上直接反馈输入结果，进一步加强了标签的语义化表达。
需要引起重视的是，aria-labelledby 遵循与 aria-label 同样的原则，及确保关联文本具有简明扼要的标签意义。所不同的是，aria-labelledby 的优先级高于 aria-label ，当二者同时存在时，仅 aria-labelledby 生效， W3C 也更推崇使用 aria-labelledby 。当 DOM 中含有可用文本时，请通过 aria-labelledby 属性关联它，而并非手动填写 aria-label ，除非开发者认为后者的表现更为优异。
更易于理解的描述性文本
在非常痛苦的阅读了上述这些味同嚼蜡般的文字后，渐渐地拼凑出了一个脉络，并决定改造自己维护的页面，但沮丧的发现，仍有极个别顽固的组件无法准确传达含义，于是有人可能打算顺着网线摸过来给笔者一顿老拳，我劝你想开些，毕竟本文还没结束，中途下车的拒不退票。
在经过上述步骤，仍然无法精准传达控件含义的，就可祭出终极大法，及aria-description 与aria-describedby 属性。结合此前内容，基本不再需要笔者展开叙述了。aria-description 与 aria-label 用法一致，可供开发者自定义的创建描述信息；aria-describedby 则与 aria-labelledby 对应，可从 dom 中关联可用文本。同样地，描述性文本也具有优先级， aria-describedby 的优先级高于 aria-description ，因此?W3C 推荐使用 aria-describedby 。
事实上，我们只要类比?HTML 即可轻松的理解这些属性。aria-label 与 aria-labelledby 更接近于元素的 innerText，具有标签的表现形式；而?aria-description 与 aria-describedby 类似于 HTML 的 title 属性，有所差异的，aria-description 与 aria-describedby 的文本描述不具有 title 属性的工具提示浮窗。
这仍然是一个发送 “滑稽” 表情的按钮，只不过，我们加入了描述性文本，使用户能更明确该按钮的目的。
<button?aria-label="滑稽"?aria-description="?点击以发送?“滑稽”?表情?">??</button>
此时，屏幕阅读器将朗读为 “滑稽?按钮 点击以发送‘滑稽’表情”，目的和作用表达得都非常明确。但非常遗憾的是，该属性并没有在当前流行的?WAI-ARIA 版本中定义，就目前而言，仅 chromium?和 Firefox?浏览器具有良好的支持，这也是更推荐使用 aria-describedby 属性的根本原因吧。
仍然是这个页码编辑框，现在，加入了 aria-describedby 属性，使它的易用性迈上了一个新的台阶。
<span?id="pagination">?页码：</span>
<span?id="numero">?第?</span>
<input?type="text"?id="input"?
???????value="2"?
???????aria-labelledby="pagination"?
???????aria-describedby="numero?input?page?total"?/>
<span?id="page">?页?</span>
<span?id="total">?共?5?页?</span>
图片
经过上述简单修改，该编辑框在屏幕阅读器下朗读为 “页码：?可编辑文本 2 第 2 页 共 5 页”，啧啧，多么明确的表达。
写在文末
从本质上讲，笔者是一个嘴笨笔拙的人，拉拉杂杂的堆砌了这些文字，在通读全文后，若确有疑惑存在的，欢迎在评论区留言，笔者会在评论区领教各位的刀法绝伦。
此后，笔者争取以月更一篇的频率，持续撰写此类题材的文章。一来借助 IT 之家的声望，向大众普及一波信息无障碍；二来便于广大开发者从这个专题中能够汲取到相关经验；第三，也是最重要的，这将是笔者个人的一次技术总结，也磨练我的写作能力吧。望大家一如既往的支持我们，支持无障碍，谢谢！
IT号是什么？如何成为IT号作者？ 立即查看
IT号是什么？如何成为IT号作者？
立即查看
责任编辑：下士闻道

本楼来自 天坦百宝箱VIP会员

无聊上爱盲

沙发 无聊上爱盲说：
自己坐个沙发。
本楼来自 天坦百宝箱VIP会员

江静月

板凳 江静月说：
做个地板。
本楼来自 天坦百宝箱

冰淇淋

地板 冰淇淋说：
做一下地板。

来自：掌上乐园

Qishao

5楼 Qishao说：
那我就飘着

勇敢的骑士

6楼 勇敢的骑士说：
现在不是都已经是文字识别时代了吗还用这些屏幕朗读和talk back的吗，那我只能说他们只能浏览一些基本东西不能浏览网页这些无不无障碍的东西，但像现在的四大读屏厂商应该有的人已经知道了都具备文字识别功能而且特别强大，其实我想啊，咱们安卓读屏软件能不能也做出一个像苹果图形的本质文本地文字识别功能，就是不用网络自己本地的识别，就类似现在苹果最新出的那个

来自论坛Android