使用人工智能生成图像的替代文本

无论您是网页开发人员还是内容编辑，都经常会忘记或忽略制作网站可访问性和 SEO 性能的最重要部分之一：图像替代文本。您知道，那个看似很小的图像属性，它描述了一张图像

​​​<img src="/cute/sloth/image.jpg" alt="A brown baby sloth staring straight into the camera with a tongue sticking out." >

如果您定期在网络上发布内容，那么您就知道想出描述性文本可能是件很繁琐的事情。当然，5-10 张图像还可以。但如果我们谈论的是数百张或数千张图像呢？您有这样的资源吗？

让我们看看一些使用谷歌、IBM 和微软等公司的计算机视觉和图像识别服务的可能性，这些服务可以自动生成图像的替代文本。他们有这些资源！

提醒：替代文本有什么用？

在网页开发和内容录入过程中经常被忽略的 alt 属性是一小段 HTML 代码，它描述了页面上出现的图像。它非常不起眼，以至于它似乎对普通用户没有任何影响，但它确实有非常重要的用途

• 屏幕阅读器的网页可访问性：想象一个页面有很多图像，但没有一个包含替代文本。使用屏幕阅读器浏览的用户的耳边只会听到“图像”这个词，这并没有什么用。好的，这里有一张图片，但它是什么？包含替代文本可以让屏幕阅读器帮助视障人士“看到”那里有什么，并更好地理解页面内容。人们常说，一张图片胜过千言万语，而这正是用户可能会错过的千言万语的上下文。
• 如果图像无法加载，则显示文本：万维网似乎是无懈可击的，就像纽约市一样，它从不眠，但不可靠和有故障的连接是真实存在的，如果发生这种情况，那么图像往往无法正确加载并“损坏”。替代文本是一种保障措施，它在“损坏”图像所在的位置的页面上显示，为用户提供内容作为回退。
• SEO 性能：图像上的替代文本也有助于 SEO 性能。虽然它不能真正帮助网站或页面飞速跃居搜索结果的榜首，但它是 SEO 性能需要牢记的一个因素。

了解了这些内容的重要性，希望您能够在开发和内容录入过程中包含正确的替代文本。但您的档案状况良好吗？想出一个大型图像库的详细描述可能是一项艰巨的任务，尤其是当您要应对紧张的期限或必须在其他项目之间挤出时间的时候。

如果有一种方法可以将替代文本应用于上传的图像呢？并且！如果有一种方法可以检查页面中缺少的替代标签并自动为我们填写它们呢？

有可用的解决方案！

计算机视觉（或图像识别）实际上已经提供了一段时间了。谷歌、IBM 和微软等公司都公开了自己的 API，以便开发人员可以利用这些功能，并使用它们来识别图像以及其中的内容。

已经有开发人员利用了这些服务，并创建了自己的插件来生成替代文本。例如，Sarah Drasner 的生成器，它展示了如何使用 Azure 的计算机视觉 API 通过上传或 URL 为任何图像创建替代文本。太棒了！

​​查看 Pen
​​使用 Azure 的计算机视觉 API 动态生成的替代文本 by Sarah Drasner (@sdras)
​​on CodePen.​​

还有 Jacob Peattie 的 自动替代文本，它是一个 WordPress 插件，使用相同的计算机视觉 API。它基本上是工作流程的一个补充，允许用户上传图像并自动生成替代文本。

​​这些工具通常有助于加快内容管理、编辑和维护流程。即使是思考描述性文本的努力也已经最小化，并交给了机器！

亲自体验 AI

我已经设法尝试了一些 AI 服务，并且可以自信地说，Microsoft Azure 的计算机视觉产生了最好的结果。谷歌和 IBM 提供的服务当然也有自己的优势，仍然可以识别图像并获得正确的结果，但微软的服务如此出色，如此准确，以至于在我看来，没有必要选择其他服务。

创建您自己的图像识别插件非常简单。首先，前往 Microsoft Azure 计算机视觉。您需要登录或创建一个帐户，以便为插件获取 API 密钥。

在仪表板上，搜索并选择 **计算机视觉**，然后填写必要的信息。

等待平台完成计算机视觉实例的启动。开发的 API 密钥将在完成启动后可用。

让有趣而棘手的部分开始吧！为了演示的目的，我将使用原生 JavaScript。对于其他语言，您可以查看 文档。以下是一个可以直接复制粘贴的代码，您可以用它来替换占位符。

​​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 服务的一些关键术语。

• 位置：这是在获取订阅密钥之前选择的服务的订阅位置。如果您由于某种原因忘记了位置，则可以转到概述屏幕，并在端点下找到它。

​​

• ​​订阅密钥：这是用于我们插件使用的服务的解锁密钥，可以在密钥下获得。有两个，但使用哪个并不重要。
• ​​图像 URL：这是正在获取替代文本的图像的路径。请注意，发送到 API 的图像必须满足特定要求
  • 文件类型必须为 JPEG、PNG、GIF、BMP
  • ​文件大小必须小于 4MB
  • ​​尺寸应大于 50px x 50px

小菜一碟

​​由于大型公司向开发人员开放了他们的服务和 API，因此现在任何人都可以相对轻松地利用计算机视觉。作为一个简单的演示，我将下面的图像上传到了 Microsoft Azure 的计算机视觉 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"
    }
}

​​从那里，您可以挑选出可能用于图像的替代文本。您如何在此功能之上构建取决于您的业务

• ​​您可以创建一个 CMS 插件并将其添加到内容工作流程中，在上传图像时生成替代文本，并将其保存在 CMS 中。
• ​​您可以编写一个 JavaScript 插件，在图像加载后动态添加替代文本，尤其是当图像缺少替代文本时。
• ​​您可以编写一个浏览器扩展，在任何网站上找到缺少替代文本的图像时，为其添加替代文本。
• ​​您可以编写代码，扫描您现有的数据库或内容库，查找任何缺少的替代文本，并更新它们或打开拉取请求以建议更改。

​​请注意，这些服务并非 100% 准确。它们有时会返回低置信度评分，以及与主题完全不符的描述。但是，这些平台一直在不断学习和改进。毕竟，罗马不是一天建成的。