让视障者的网络之路少一些障碍——微软为 Edge 浏览器开发自动图像描述功能并呼吁网页作者补充图片的替换说明
网页是互联网的组成部分,浏览器是开启互联网大门的钥匙。对于生活在信息时代下的我们而言,每一个人都很难离开网络而生活,其中也包括盲人这一残障群体。
本文的引子是如下一条新闻:
IT之家3月18日消息,微软Edge无障碍功能迎来好消息,现在该浏览器能够自动生成图片标签,也就是意味着屏幕阅读器能够描述图像的内容,即使这些图像没有包含alt文本。对于那些想知道图片内容但看不到的盲人或其他视障用户来说,这是一个非常有帮助的功能。
微软也指出,这些自动生成的标签仍然不如页面作者自己提供的alt文本好,因为作者可能知道更多关于图像的具体内容,而Edge所能提供的信息肯定有不准确的地方。尽管如此,考虑到“屏幕阅读器处理的图像中有一半以上缺少alt文本”,微软认为,这一解决方案还是有帮助。
也许,你看完这条新闻很懵,也许你会赞叹于微软的暖心之举,不过笔者可不是这样认为的。一起跟随笔者仔细剖析这条新闻被后的那些细节吧!
这项功能解决了什么问题?
任何一项心功能的开发都源于有相应的需求。要理解微软为什么为 Edge 开发一项从图片中提取描述性信息的功能,就要先了解一下背景知识。
你有思考过,你撰写的文章也会被盲人朋友阅读吗?文章配图的内容又应该怎样友好地传达给视障读者呢?实际上,你的文章很有可能会被盲人用户阅读到,先不要吃惊,还是来了解一下帮助视障者上网的辅助技术吧。
失明的视障者通过屏幕阅读器(国内通常称作读屏软件)来浏览网页。屏幕阅读器可将网页中的文本信息大声朗读出来。
当视障者遇到图片的时候,依赖图片提供的替换文字说明了解图片中的内容。替换文字说明用清晰明了的文字描述图片/图表中的信息,以帮助视障者更好地理解网页及图片所要表达的内容,这对于 Web 页面实现让所有人可被访问至关重要。因此,网页作者应尽可能给每一幅图片添加准确的替代文字描述信息。
为了能让盲人等障碍用户准确获取图片中的有效信息,应该给每一张图片添加清晰明了的、必要的替换文字说明。
然而,现实情况是大量的图片缺少了有价值的、明了的替换文字说明。思考一下可能有这么几个方面的原因:
网页作者不知道图片的替换文字说明的重要性。他们可能根本不会预想到,会有盲人阅读到他们撰写的图文。
贴图更简单,可以避免排版的麻烦。常见于很多微信公众号转发的一些信息。
电商的海报页,需要用图片来展示他们的产品。
基于这样的现实情况。作为Edge 浏览器的开发者的微软,想起了自己有相应的技术可以改善视障者的网页体验——借助于计算机视觉的力量。
当视障者打开一张网页后,如果 Edge 浏览器发掘页面内包含未添加替换文字说明的图像,就把该图像提交到 Azure 计算机视觉云服务,接着将获取到的有价值的信息补充到图像的替换文字说明上面去。
这样,对于视障者来说,上网冲浪的体验就大大改善了。通过计算机视觉提供的一些信息,他们可大致了解图像中的内容,也更容易理解图文要表达的内涵。
题外话,,早在 Edge 浏览器之前, Google Chrome 浏览器已经率先实现了该特性。
我是视障者,我如何体验这项服务呢?
目前,该项服务只在 Windows、Linux 和 MacOS 版的 Edge 浏览器中提供。
由于图像需要发送到云端处理,这项服务需要你主动开启并接受微软的隐私条款,开启的方法如下:
启动 Microsoft Edge 浏览器,并打开“设置”页面,切换到“辅助功能”分类。你也可直接访问 edge://settings/accessibility 来打开该设置页面。
点击 “从 Microsoft 获取屏幕阅读器的图像说明” 复选框,接着在弹出的对话框中同意隐私声明。
启用该功能以后,你就可以尝试浏览那些不太友好的页面。Edge 浏览器应该开始帮助你描述图片中的文字了。
由于该项功能刚刚推出,难免会遇到几个问题。在这里也一并写出来,希望微软能关注到并及时优化吧。
描述性文字可能是英语的。由于 Azure 计算机视觉服务的原因,很多描述性文案是英语的,希望微软能及时汉化。
对于那些添加了错误替换文字说明的图像,无法享受到该项服务。希望微软可以在图像的右键菜单中提供强制手动获取替换文字说明的菜单项。
我是网页作者,我如何做会对视障者朋友更友好?
如果你是网页作者/新媒体编辑,恰好读到了这篇文章。我希望你也能力所能及的做一些事情,让盲人小伙伴的网络生活更精彩。
首先要明确。即使诸如 Edge/Chrome 浏览器提供了描述图像的功能,也不能认为网页作者就高枕无忧了。Edge/Chrome 浏览器通过计算机视觉提供的服务依然极为有限,并且网页作者依然要对自己的网页负责,做好网页中图像的正确说明工作,添加必要的标记信息。
为图像添加描述文本有多种方法,下面一一介绍,希望你能采纳最适合你的图文的一种方法。
提供有价值的替换文字
给图像添加替换文字说明是最简单、也最常用的方法。这种方法有两个好处。其一是不会影响到明眼阅读者的体验,替换文字说明指会提供给使用屏幕阅读器的视障者;其二,当图片无法被显示的时候,替换文字说明就会显示出来,帮助读者搞明白这里原来是一张怎样的图片。
在 HTML 中,添加替换文字说明的方法是给 img 图像标签增加一个 alt 属性,并设置对应的描述文本值。
你可参考这里的教程了解更多有用的信息。
对于使用 Word 写作的创作者,可参考这里的说明来提供有用的替换文字说明。值得要说的是,比较心版本的 Microsoft Word 会自动给插入的图像添加替换文字说明。可见微软对于无障碍是多么的重视。创作者只需要进一步打磨生成的替换文字就好了。
另外需要强调的是,替换文字说明尽量要用一两句话描述清楚图像的主要内容。不是越多越好,也不是越详细越好。简明扼要,突出重点才是视障者所需要的。
在图片周围添加描述性文字
有的平台可能不允许作者简单的指定图片的替换文字说明,或者文字说明也希望可以帮助到明眼读者的话,可以把描述性的文字放到图像的旁边。
装饰性的图片,无需说明
如果一张图片只是装饰性的、没有任何有用信息传达的,例如说背景图像,就应该提供一个空白的替换文字说明,以提示屏幕阅读器,忽略该图像。详细你可参看这里的指南教程。
在 HTML 中, 给 img 标签提供一个空值的 alt 属性即可。
如果你在 Microsoft Word 中写作,在“替换文字”对话框中选中“标记为装饰”复选框。
最后小结
在图文无处不在的网络世界里,我们希望每一个人都能找到有用的内容。微软敏锐的发现了少数人的需求,并用科技的力量力所能及的提供一些便利。这正是科技发出的最暖心的光。在为微软点赞之后,我们更希望网页创作者能主动承担起责任,让每一福图的美传达给每一个人。
举手之间,做出一些改变,就可以让世界更美好。让每一个人参与进互联网的绚丽生活中来吧!
参考资料
要了解更多吗?以下是关于本文的一些参考资料。
2.. Appears to say: Microsoft Edge now provides auto-generated image labels - Microsoft Edge Blog
让视障者的网络之路少一些障碍——微软为 Edge 浏览器开发自动图像描述功能并呼吁网页作者补充图片的替换说明的更多相关文章
- 自学工业控制网络之路1.1-工业控制系统发展历程CCS DCS FCS
返回 自学工业控制网络之路 自学工业控制网络之路1.1-工业控制系统发展历程CCS DCS FCS 工业控制系统是对诸如图像.语音信号等大数据量.高速率传输的要求,又催生了当前在商业领域风靡的以太网与 ...
- 自学工业控制网络之路1.2-典型的现场总线介绍PROFIBUS
返回 自学工业控制网络之路 自学工业控制网络之路1.2-典型的现场总线介绍PROFIBUS 目前看来,现场总线标准不会统一,多标准并存现象将会持续. 现场总线国家标准: 中国的DeviceNet和AS ...
- 自学工业控制网络之路1.3-典型的现场总线介绍FF
返回 自学工业控制网络之路 自学工业控制网络之路1.3-典型的现场总线介绍FF 1994年6月,ISP和WORLDFIP合并成立现场总线基金会FF.1998年,FF基金会开发了HSE 10/100Mb ...
- 自学工业控制网络之路1.4-典型的现场总线介绍CAN
返回 自学工业控制网络之路 自学工业控制网络之路1.4-典型的现场总线介绍CAN 1991年3月,发布了CAN技术贵干v2.0,包含了A.B两部分.CAN2.0A给出报文标准格式,CAN2.0B给出了 ...
- 自学工业控制网络之路1.5-典型的现场总线介绍DeviceNet
返回 自学工业控制网络之路 自学工业控制网络之路1.5-典型的现场总线介绍DeviceNet 2002年10月DeviceNet被批准为中国国家标准GB/T18858.3-2002,并于2003.4. ...
- 自学工业控制网络之路1.6-典型的现场总线介绍Interbus
返回 自学工业控制网络之路 自学工业控制网络之路1.6-典型的现场总线介绍Interbus 1987年正式公布,其主要技术开发者为德国的PhoenixContact公司.1996年,INTERBUS成 ...
- 自学工业控制网络之路2.2-PROFINET
返回 自学工业控制网络之路 自学工业控制网络之路2.2-PROFINET PROFINET由PROFIBUS国际组织(PROFIBUS International,PI)推出,是新一代基于工业以太网技 ...
- python 之路,Day27 - 主机管理+堡垒机系统开发
python 之路,Day27 - 主机管理+堡垒机系统开发 本节内容 需求讨论 构架设计 表结构设计 程序开发 1.需求讨论 实现对用户的权限管理,能访问哪些机器,在被访问的机器上有哪些权限 实 ...
- iOS网络高级编程:iPhone和iPad的企业应用开发之错误处理
本章内容 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWluZ2h1YXdlbmthbmc=/font/5a6L5L2T/fontsize/400/fi ...
随机推荐
- Java多线程之线程同步【synchronized、Lock、volatitle】
线程同步 线程同步:当有一个线程在对内存进行操作时,其他线程都不可以对这个内存地址进行操作,直到该线程完成操作, 其他线程才能对该内存地址进行操作,而其他线程又处于等待状态,实现线程同步的方法有很多. ...
- C# WinForm 设置按纽为透明,使用背景色
今天开发登陆界面时,遇到一个窗体控制设置问题: 1.将按纽设置为透明: 2.并且使用背景图片的颜色: 3.并且需要当点击这个按纽时,仍然显示背景图片颜色: 4.去掉按纽边框显示线: 需要的效果如下: ...
- 面向对象编程(C++篇4)——RAII
目录 1. 概述 2. 详论 2.1. 堆.栈.静态区 2.2. 手动管理资源的弊端 2.3. 间接使用 2.4. 自下而上的抽象 3. 总结 4. 参考 1. 概述 在前面两篇文章<面向对象编 ...
- C++ 文件加解密
通过文件二进制数据 与密钥进行异或处理,可加密文件 #ifndef __ENCRYPT__HEAD__ #define __ENCRYPT__HEAD__ #include <fstream&g ...
- mysql 客户无感知迁移_亿级账户数据迁移,不用数据库工具还能怎么搞?
原标题:亿级账户数据迁移,不用数据库工具还能怎么搞? 背景 在阿里巴巴内部"大中台,小前台"的组织和业务体制,使前线业务更加敏捷,赋能业务积极迎接未来挑战和机遇,在阿里大中台能力建 ...
- 面试官:说一下Synchronized底层实现,锁升级的具体过程?
面试官:说一下Synchronized底层实现,锁升级的具体过程? 这是我去年7,8月份面试的时候被问的一个面试题,说实话被问到这个问题还是很意外的,感觉这个东西没啥用啊,直到后面被问了一波new O ...
- 是否可以继承String类?
String 类是final类,不可以被继承. 补充:继承String本身就是一个错误的行为,对String类型最好的重用方式是关联关系(Has-A)和依赖关系(Use-A)而不是继承关系(Is-A) ...
- jQuery--选择器案例实战
1.案例需求 jquery最基础的选择器部分已经基本结束,来一个简单案例总结回顾下学的东西. 案例需求: 用一个按钮控制元素的显示与隐藏,页面如下,从第五个开始,不要最后一个,控制他们的显示和隐藏. ...
- css 迷惑的position
迷惑的position 小加发现实际开发中position使用频率很高,但很多人却对position不是很了解,导致开发中出现各种问题,现在让我门一起来看看这个迷惑的position吧~ static ...
- 一个模仿微信群聊的H5页面
开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品. 页面的主体是群聊对话,同时在对话中包含了很多 ...