网页是互联网的组成部分,浏览器是开启互联网大门的钥匙。对于生活在信息时代下的我们而言,每一个人都很难离开网络而生活,其中也包括盲人这一残障群体。

 本文的引子是如下一条新闻

IT之家3月18日消息,微软Edge无障碍功能迎来好消息,现在该浏览器能够自动生成图片标签,也就是意味着屏幕阅读器能够描述图像的内容,即使这些图像没有包含alt文本。对于那些想知道图片内容但看不到的盲人或其他视障用户来说,这是一个非常有帮助的功能。

微软也指出,这些自动生成的标签仍然不如页面作者自己提供的alt文本好,因为作者可能知道更多关于图像的具体内容,而Edge所能提供的信息肯定有不准确的地方。尽管如此,考虑到“屏幕阅读器处理的图像中有一半以上缺少alt文本”,微软认为,这一解决方案还是有帮助。

  也许,你看完这条新闻很懵,也许你会赞叹于微软的暖心之举,不过笔者可不是这样认为的。一起跟随笔者仔细剖析这条新闻被后的那些细节吧!

这项功能解决了什么问题?

  任何一项心功能的开发都源于有相应的需求。要理解微软为什么为 Edge 开发一项从图片中提取描述性信息的功能,就要先了解一下背景知识。

  你有思考过,你撰写的文章也会被盲人朋友阅读吗?文章配图的内容又应该怎样友好地传达给视障读者呢?实际上,你的文章很有可能会被盲人用户阅读到,先不要吃惊,还是来了解一下帮助视障者上网的辅助技术吧。

失明的视障者通过屏幕阅读器(国内通常称作读屏软件)来浏览网页。屏幕阅读器可将网页中的文本信息大声朗读出来。

当视障者遇到图片的时候,依赖图片提供的替换文字说明了解图片中的内容。替换文字说明用清晰明了的文字描述图片/图表中的信息,以帮助视障者更好地理解网页及图片所要表达的内容,这对于 Web 页面实现让所有人可被访问至关重要。因此,网页作者应尽可能给每一幅图片添加准确的替代文字描述信息。

  为了能让盲人等障碍用户准确获取图片中的有效信息,应该给每一张图片添加清晰明了的、必要的替换文字说明

  然而,现实情况是大量的图片缺少了有价值的、明了的替换文字说明。思考一下可能有这么几个方面的原因:

  • 网页作者不知道图片的替换文字说明的重要性。他们可能根本不会预想到,会有盲人阅读到他们撰写的图文。

  • 贴图更简单,可以避免排版的麻烦。常见于很多微信公众号转发的一些信息。

  • 电商的海报页,需要用图片来展示他们的产品。

  基于这样的现实情况。作为Edge 浏览器的开发者的微软,想起了自己有相应的技术可以改善视障者的网页体验——借助于计算机视觉的力量。

  当视障者打开一张网页后,如果 Edge 浏览器发掘页面内包含未添加替换文字说明的图像,就把该图像提交到 Azure 计算机视觉云服务,接着将获取到的有价值的信息补充到图像的替换文字说明上面去。

  这样,对于视障者来说,上网冲浪的体验就大大改善了。通过计算机视觉提供的一些信息,他们可大致了解图像中的内容,也更容易理解图文要表达的内涵。

  题外话,,早在 Edge 浏览器之前, Google Chrome 浏览器已经率先实现了该特性。

我是视障者,我如何体验这项服务呢?

  目前,该项服务只在 Windows、Linux 和 MacOS 版的 Edge 浏览器中提供。

  由于图像需要发送到云端处理,这项服务需要你主动开启并接受微软的隐私条款,开启的方法如下:

  1. 启动 Microsoft Edge 浏览器,并打开“设置”页面,切换到“辅助功能”分类。你也可直接访问 edge://settings/accessibility 来打开该设置页面。

  2. 点击 “从 Microsoft 获取屏幕阅读器的图像说明” 复选框,接着在弹出的对话框中同意隐私声明。

  启用该功能以后,你就可以尝试浏览那些不太友好的页面。Edge 浏览器应该开始帮助你描述图片中的文字了。

  由于该项功能刚刚推出,难免会遇到几个问题。在这里也一并写出来,希望微软能关注到并及时优化吧。

  • 描述性文字可能是英语的。由于 Azure 计算机视觉服务的原因,很多描述性文案是英语的,希望微软能及时汉化。

  • 对于那些添加了错误替换文字说明的图像,无法享受到该项服务。希望微软可以在图像的右键菜单中提供强制手动获取替换文字说明的菜单项。

我是网页作者,我如何做会对视障者朋友更友好?

  如果你是网页作者/新媒体编辑,恰好读到了这篇文章。我希望你也能力所能及的做一些事情,让盲人小伙伴的网络生活更精彩。

  首先要明确。即使诸如 Edge/Chrome 浏览器提供了描述图像的功能,也不能认为网页作者就高枕无忧了。Edge/Chrome 浏览器通过计算机视觉提供的服务依然极为有限,并且网页作者依然要对自己的网页负责,做好网页中图像的正确说明工作,添加必要的标记信息。

  为图像添加描述文本有多种方法,下面一一介绍,希望你能采纳最适合你的图文的一种方法。

提供有价值的替换文字

  给图像添加替换文字说明是最简单、也最常用的方法。这种方法有两个好处。其一是不会影响到明眼阅读者的体验,替换文字说明指会提供给使用屏幕阅读器的视障者;其二,当图片无法被显示的时候,替换文字说明就会显示出来,帮助读者搞明白这里原来是一张怎样的图片。

  在 HTML 中,添加替换文字说明的方法是给 img 图像标签增加一个 alt 属性,并设置对应的描述文本值。

  你可参考这里的教程了解更多有用的信息。

  对于使用 Word 写作的创作者,可参考这里的说明来提供有用的替换文字说明。值得要说的是,比较心版本的 Microsoft Word 会自动给插入的图像添加替换文字说明。可见微软对于无障碍是多么的重视。创作者只需要进一步打磨生成的替换文字就好了。

  另外需要强调的是,替换文字说明尽量要用一两句话描述清楚图像的主要内容。不是越多越好,也不是越详细越好。简明扼要,突出重点才是视障者所需要的。

在图片周围添加描述性文字

  有的平台可能不允许作者简单的指定图片的替换文字说明,或者文字说明也希望可以帮助到明眼读者的话,可以把描述性的文字放到图像的旁边。

装饰性的图片,无需说明

  如果一张图片只是装饰性的、没有任何有用信息传达的,例如说背景图像,就应该提供一个空白的替换文字说明,以提示屏幕阅读器,忽略该图像。详细你可参看这里的指南教程。

  • 在 HTML 中, 给 img 标签提供一个空值的 alt 属性即可。

  • 如果你在 Microsoft Word 中写作,在“替换文字”对话框中选中“标记为装饰”复选框。

最后小结

  在图文无处不在的网络世界里,我们希望每一个人都能找到有用的内容。微软敏锐的发现了少数人的需求,并用科技的力量力所能及的提供一些便利。这正是科技发出的最暖心的光。在为微软点赞之后,我们更希望网页创作者能主动承担起责任,让每一福图的美传达给每一个人。

  举手之间,做出一些改变,就可以让世界更美好。让每一个人参与进互联网的绚丽生活中来吧!

参考资料

  要了解更多吗?以下是关于本文的一些参考资料。

  1. 微软 Edge 浏览器上线暖心无障碍功能:可自动生成图片描述 - IT之家

2.. Appears to say: Microsoft Edge now provides auto-generated image labels - Microsoft Edge Blog

  1. 聆听“讲述人”朗读的文本——了解 Windows 屏幕阅读器讲述人

  2. Web Content Accessibility Guidelines——Web 无障碍指南

  3. 语言支持 - 计算机视觉 - Azure Cognitive Services | Microsoft Docs

  4. 编写有效可选文字的须知 - Office 支持

  5. <img>:图像嵌入元素 - HTML(超文本标记语言) | MDN

让视障者的网络之路少一些障碍——微软为 Edge 浏览器开发自动图像描述功能并呼吁网页作者补充图片的替换说明的更多相关文章

  1. 自学工业控制网络之路1.1-工业控制系统发展历程CCS DCS FCS

    返回 自学工业控制网络之路 自学工业控制网络之路1.1-工业控制系统发展历程CCS DCS FCS 工业控制系统是对诸如图像.语音信号等大数据量.高速率传输的要求,又催生了当前在商业领域风靡的以太网与 ...

  2. 自学工业控制网络之路1.2-典型的现场总线介绍PROFIBUS

    返回 自学工业控制网络之路 自学工业控制网络之路1.2-典型的现场总线介绍PROFIBUS 目前看来,现场总线标准不会统一,多标准并存现象将会持续. 现场总线国家标准: 中国的DeviceNet和AS ...

  3. 自学工业控制网络之路1.3-典型的现场总线介绍FF

    返回 自学工业控制网络之路 自学工业控制网络之路1.3-典型的现场总线介绍FF 1994年6月,ISP和WORLDFIP合并成立现场总线基金会FF.1998年,FF基金会开发了HSE 10/100Mb ...

  4. 自学工业控制网络之路1.4-典型的现场总线介绍CAN

    返回 自学工业控制网络之路 自学工业控制网络之路1.4-典型的现场总线介绍CAN 1991年3月,发布了CAN技术贵干v2.0,包含了A.B两部分.CAN2.0A给出报文标准格式,CAN2.0B给出了 ...

  5. 自学工业控制网络之路1.5-典型的现场总线介绍DeviceNet

    返回 自学工业控制网络之路 自学工业控制网络之路1.5-典型的现场总线介绍DeviceNet 2002年10月DeviceNet被批准为中国国家标准GB/T18858.3-2002,并于2003.4. ...

  6. 自学工业控制网络之路1.6-典型的现场总线介绍Interbus

    返回 自学工业控制网络之路 自学工业控制网络之路1.6-典型的现场总线介绍Interbus 1987年正式公布,其主要技术开发者为德国的PhoenixContact公司.1996年,INTERBUS成 ...

  7. 自学工业控制网络之路2.2-PROFINET

    返回 自学工业控制网络之路 自学工业控制网络之路2.2-PROFINET PROFINET由PROFIBUS国际组织(PROFIBUS International,PI)推出,是新一代基于工业以太网技 ...

  8. python 之路,Day27 - 主机管理+堡垒机系统开发

    python 之路,Day27 - 主机管理+堡垒机系统开发   本节内容 需求讨论 构架设计 表结构设计 程序开发 1.需求讨论 实现对用户的权限管理,能访问哪些机器,在被访问的机器上有哪些权限 实 ...

  9. iOS网络高级编程:iPhone和iPad的企业应用开发之错误处理

    本章内容 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWluZ2h1YXdlbmthbmc=/font/5a6L5L2T/fontsize/400/fi ...

随机推荐

  1. python获取本地时间,时间戳与日期格式相互转换

    附上代码与运行结果截图: import time # 获取当前时间 now = time.localtime() # 格式化日期 now_ = time.strftime('%Y-%m-%d %H:% ...

  2. Git初始化常用方法

    准备工作 安装git sudo apt install git 创建一个ssh密钥 如果已经有ssh密钥了,则这一步不要执行 ssh-keygen -t rsa -C '账号' 复制公钥内容 gedi ...

  3. Python -用虚拟环境保存库文件

    如果你同时负责多个 Python 项目,或者想要轻松打包某个项目及其关联的库文件,再或者你担心已安装的库之间可能有冲突,那么你可以安装一个 Python 虚拟环境来分而治之.当一个 Python 库不 ...

  4. 测试odbc连接sqlsever数据库是否成功的代码

    1 #include<stdio.h> 2 #include<stdlib.h> 3 #include<windows.h> 4 #include<sql.h ...

  5. 使用IDEA开发SpringBoot不加载application.yml配置文件的解决方案

    1.如果启动项目不加载application.yml配置文件,那么请确认下是否应用了Resources为项目资源文件夹 2.如果项目起初是可以正常使用的,突然不知道改了什么,然后进行启动项目的时候不加 ...

  6. ActiveMQ数据接收类型问题

    一.问题描述 最近开发了一个工具,功能是监听ActiveMQ消息然后做相应的处理,本地自测没有问题,但是部署在现场出现如下报错: [WARN ] [2020-08-27 19:49:42] [org. ...

  7. 学习zabbix(七)

    zabbix自定义监控项 1.创建主机组,可以根据redis.mysql.web等创建对于的主机组 2.创建主机 3.创建Screens 4.自定义监控项 zabbix_agentd.conf配置文件 ...

  8. freemarker与vue使用图片路径获取问题,可双单引号一起使用则可

    <el-table :data="leftPage.datas" style="width: 100%"  @selection-change=" ...

  9. 第一天·浏览器内核及Web标准

    一·浏览器及浏览器内核 1.常见的浏览器 (1)IE浏览器 IE是微软公司旗下浏览器,是目国内用户量最多的浏览器.IE诞生于1994年,当时微软为了对抗市场份额占据将近百分之九十的网景Netscape ...

  10. 活字格发布新版本,插件公开,引领Web开发新潮流

    日前,活字格Web 应用生成平台发布V4.0版本,首次公开插件机制,强大的扩展性和系统集成能力,引起业内瞩目. 活字格是由西安葡萄城自主研发的 Web 应用生成平台,提供易用的类Excel可视化设计器 ...