作者｜Nino Ross Rodriguez
译者｜无明
Web 开拓职员和内容编辑职员常常会忘却或忽略了 img 标签的 alt 属性，这是一个可以提升网站可访问性和 SEO 性能的主要部分，这个属性常日用来描述图片：
<img src=\公众/cute/sloth/image.jpg\"大众 alt=\公众A brown baby sloth staring straight into the camera with a tongue sticking out.\"大众 >
如果你常常在网络上发布内容，你就该当知道，为图片供应描述性文本是一件很呆板的事情。当然，如果只有几张图片倒没什么问题，但如果我们说的是数百或数千张图片呢？你该怎么办？
让我们来看看利用谷歌、IBM 和微软等公司供应的打算机视觉和图像识别做事自动为图片天生描述性文本的一些可能性。
alt 属性的文本有什么用？
alt 属性是一小段 HTML 代码，用于描述页面上显示的图片，但在 Web 开拓和编辑内容时常常被忽略。它是如此的不起眼，以至于它彷佛对普通用户没有任何影响，但它确实具有非常主要的用场：
屏幕阅读器的 Web 可访问性：假设我们有一个包含大量图片的页面，但没有一张图片包含了 alt 属性文本。利用屏幕阅读器进行冲浪的用户只能听到“image”这个词，这对他们来说这不是很有用。他们只知道这是一张图片，除此之外没有其他任何信息。如果有了 alt 属性文本，屏幕阅读器就可以帮助视障人士“看到”图片里有什么，以便更好地理解页面的内容。有人说一张图片赛过千言万语，但如果没有 alt 属性文本，这些用户就错失落了这些千言万语。如果无法加载图片，就显示文本：Web 彷佛是绝对可靠的，就像纽约一样，从来不须要睡觉，但缺点的连接确实是存在的，如果发生这种情形，图片每每无法被精确加载，并且涌现“破坏”。alt 文本是一种安全方法，它会显示在页面上涌现“破坏”图像的位置，为用户供应后备内容。SEO 性能：图片的 alt 文本也有助于提升 SEO 性能。虽然它并不能让网页的搜索排名更靠前，但它也是提升 SEO 性能的一个考虑成分。在理解了这些主要性之后，希望你能够在开拓和内容编辑期间加入精确的 alt 文本。但是，试图为大量积压的图像进行详细描述可能是一项艰巨的任务，特殊是如果你的韶光很紧迫或者奔波于多个项目之间。
如果有一种方法可以在上传图片时运用 alt 文本该有多好！
如果有办法检讨页面是否短缺 alt 属性，并自动添补它们，那该有多好！
办理方案来了！
打算机视觉（或图像识别）实际上已经涌现了相称长一段韶光。谷歌、IBM 和微软等公司都供应了自己的公开 API，开拓职员可以利用这些功能来识别图像以及图像中的内容。
有些开拓职员已经在利用这些做事，并创建了自己的插件来天生 alt 文本。以 Sarah Drasner 的天生器（https://codepen.io/sdras/details/jawPGa）为例，它演示了如何利用 Azure 的打算机视觉 API 为上传的图片或 URL 链接的图片创建 alt 文本。
Jacob Peattie 开拓了一个自动 alt 文本插件（https://wordpress.org/plugins/automatic-alternative-text/），这也是一个利用了 Azure 打算机视觉 API 的 WordPress 插件。它基本上是事情流的一个补充，许可用户上传图片并自动天生 alt 文本。
人工智能的参与
我曾经考试测验过一些人工智能做事，我敢说，Azure 打算机视觉天生的结果是最好的。谷歌和 IBM 供应的做事肯定也有他们的专长，它们仍旧可以识别出图像并得到精确的结果，但微软的做事非常好，非常准确，以至于我认为没有必要再去考虑其他选项。
创建图像识别插件非常大略。首先，访问微软 Azure Computer Vision（https://azure.microsoft.com/en-au/services/cognitive-services/computer-vision/）。你须要登录或创建帐户，这样才能获取插件所需的 API 密钥。
进入仪表盘后，搜索并选择“Computer Vision”，然后填写必要的信息。
等待平台启动一个打算机视觉实例，在实例启动后就可以利用 API 密钥。
现在开始进入有趣的部分！
出于演示的目的，我将利用普通的 JavaScript 代码。对付其他措辞，你可以查看文档：
https://westus.dev.cognitive.microsoft.com/docs/services/56f91f2d778daf23d8ec6739/operations/56f91f2e778daf14a499e1fe
你可以直接复制和粘贴下面的代码，只须要更换占位符就可以了。
var request = new XMLHttpRequest();
request.open('POST', 'https://[LOCATION]/vision/v1.0/describe?maxCandidates=1&language=en', true);
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Ocp-Apim-Subscription-Key', '[SUBSCRIPTION_KEY]');
request.send(JSON.stringify({ \"大众url\公众: \"大众[IMAGE_URL]\公众 }));
request.onload = function () {
var resp = request.responseText;
if (request.status >= 200 && request.status < 400) {
// Success!
console.log('Success!');
} else {
// We reached our target server, but it returned an error
console.error('Error!');
}
console.log(JSON.parse(resp));
};
request.onerror = function (e) {
console.log(e);
};
好吧，让我们来看看 AI 做事的一些关键术语。
位置：这是在获取订阅密钥之前选择的做事的订阅位置。如果由于某种缘故原由忘却了位置，可以转到“Overview”页面，并在“Endpoint”下找到它。
订阅密钥：这是为插件解锁做事的密钥，可以在“Keys”页面中得到。个中有两个，但利用哪一个并不主要。
图片 URL：这是须要获取 alt 文本的图片的路径。请把稳，发送给 API 的图片必须知足特定的哀求：
文件类型必须是 JPEG、PNG、GIF、BMP；文件大小必须小于 4MB；尺寸该当大于 50×50 像素。轻而易举
感谢这些大公司为开拓职员开放他们的做事和 API，现在任何人都可以相对轻松地利用打算机视觉。作为一个大略的演示，我将下面的图片上传给 Azure Computer Vision API。
这个做事返回以下这些详细信息：
{
\"大众description\公众: {
\"大众tags\"大众: [
\"大众person\"大众,
\公众holding\公众,
\"大众cellphone\"大众,
\公众phone\公众,
\"大众hand\"大众,
\公众screen\公众,
\"大众looking\"大众,
\公众camera\"大众,
\"大众small\"大众,
\公众held\公众,
\"大众someone\公众,
\公众man\"大众,
\"大众using\公众,
\"大众orange\"大众,
\"大众display\"大众,
\公众blue\"大众
],
\"大众captions\公众: [
{
\公众text\"大众: \"大众a hand holding a cellphone\公众,
\"大众confidence\公众: 0.9583763512737793
}
]
},
\"大众requestId\"大众: \"大众31084ce4-94fe-4776-bb31-448d9b83c730\公众,
\"大众metadata\"大众: {
\"大众width\"大众: 920,
\"大众height\"大众: 613,
\"大众format\公众: \"大众Jpeg\公众
}
}
你可以从中选择可能用于图片的 alt 文本。如何构建这个功能取决于你：
你可以创建一个 CMS 插件，并将其添加到内容事情流中，当上载图片并将其保存到 CMS 中时，会天生图像的 alt 文本。你可以开拓一个 JavaScript 插件，如果加载的图片短缺 alt 文，可以即时添加 alt 文本。你可以创建一个浏览器扩展程序，当它创造网页中的图片短缺 alt 文本时，会自动为它们添加 alt 文本。你可以编写代码来搜索现有数据库或内容存储库，找有缺失落的 alt 文本，并更新它们，或创建拉取要求做出相应的变动。请把稳，这些做事并非 100％准确。它们有时候会返回低置信度和与主题完备不一致的描述。但是，这些平台也在不断学习和改进。毕竟，罗马不是一天建成的。
