如何自动搞定全站图片的alt属性?(23)

发布于2019-04-20 11:57:56

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开发和编辑内容时经常被忽略。它是如此的不起眼,以至于它似乎对普通用户没有任何影响,但它确实具有非常重要的用途:

在了解了这些重要性之后,希望你能够在开发和内容编辑期间加入正确的alt文本。但是,试图为大量积压的图像进行详细描述可能是一项艰巨的任务,特别是如果你的时间很紧迫或者奔忙于多个项目之间。

如果有一种方法可以在上传图片时应用alt文本该有多好!如果有办法检查页面是否缺少alt属性,并自动填充它们,那该有多好!

解决方案来了!

计算机视觉(或图像识别)实际上已经出现了相当长一段时间。谷歌、IBM和微软等公司都提供了自己的公开API,开发人员可以利用这些功能来识别图像以及图像中的内容。

有些开发人员已经在使用这些服务,并创建了自己的插件来生成alt文本。以Sarah Drasner的生成器为例,它演示了如何使用Azure的计算机视觉API为上传的图片或URL链接的图片创建alt文本。

Jacob Peattie开发了一个自动alt文本插件,这也是一个使用了Azure计算机视觉API的WordPress插件。它基本上是工作流的一个补充,允许用户上传图片并自动生成alt文本。

人工智能的介入

我曾经尝试过一些人工智能服务,我敢说,Azure计算机视觉生成的结果是最好的。谷歌和IBM提供的服务肯定也有他们的专长,它们仍然可以识别出图像并得到正确的结果,但微软的服务非常好,非常准确,以至于我认为没有必要再去考虑其他选项。

创建图像识别插件非常简单。首先,访问微软Azure Computer Vision。你需要登录或创建帐户,这样才能获取插件所需的API密钥。

进入仪表盘后,搜索并选择“Computer Vision”,然后填写必要的信息。

等待平台启动一个计算机视觉实例,在实例启动后就可以使用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服务的一些关键术语。

位置:这是在获取订阅密钥之前选择的服务的订阅位置。如果由于某种原因忘记了位置,可以转到“Overview”页面,并在“Endpoint”下找到它。

订阅密钥:这是为插件解锁服务的密钥,可以在“Keys”页面中获得。其中有两个,但使用哪一个并不重要。

图片URL:这是需要获取alt文本的图片的路径。请注意,发送给API的图片必须满足特定的要求:

易如反掌

感谢这些大公司为开发人员开放他们的服务和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文本。如何构建这个功能取决于你:

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

英文原文:https://css-tricks.com/using-artificial-intelligence-to-generate-alt-text-on-images/

更多内容,请关注前端之巅。

会议推荐

2019年6月,GMTC全球大前端技术大会2019即将到来。小程序、Flutter、移动AI、工程化、性能优化…大前端的下一站在哪里?点击下图了解更多详情。