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

事实上，我们只要类比 HTML 即可轻松的理解这些属性。aria-label 与 aria-labelledby 更接近于元素的 innerText，具有标签的表现形式；而 aria-description 与 aria-describedby 类似于 HTML 的 title 属性，有所差异的，aria-description 与 aria-describedby 的文本描述不具有 title 属性的工具提示浮窗。
这仍然是一个发送 “滑稽” 表情的按钮，只不过，我们加入了描述性文本，使用户能更明确该按钮的目的。
????????此时，屏幕阅读器将朗读为 “滑稽按钮点击以发送‘滑稽’表情”，目的和作用表达得都非常明确。但非常遗憾的是，该属性并没有在当前流行的 WAI-ARIA 版本中定义，就目前而言，仅 chromium 和 Firefox 浏览器具有良好的支持，这也是更推荐使用 aria-describedby 属性的根本原因吧。
仍然是这个页码编辑框，现在，加入了 aria-describedby 属性，使它的易用性迈上了一个新的台阶。
页码：第页共 5 页
文章插图

经过上述简单修改，该编辑框在屏幕阅读器下朗读为 “页码：可编辑文本 2 第 2 页共 5 页”，啧啧，多么明确的表达。
写在文末从本质上讲，笔者是一个嘴笨笔拙的人，拉拉杂杂的堆砌了这些文字，在通读全文后，若确有疑惑存在的，欢迎在评论区留言，笔者会在评论区领教各位的刀法绝伦。
【视障|【IT之家学院】改善视障用户的网页体验——替代文本的那些事儿】此后，笔者争取以月更一篇的频率，持续撰写此类题材的文章。一来借助 IT 之家的声望，向大众普及一波信息无障碍；二来便于广大开发者从这个专题中能够汲取到相关经验；第三，也是最重要的，这将是笔者个人的一次技术总结，也磨练我的写作能力吧。望大家一如既往的支持我们，支持无障碍，谢谢！