javascript - Google 自定义搜索辅助功能

Question

当我们在网站上添加 Google 自定义搜索功能时，我们会收到从 Google 返回的自动代码，其中包含一些 Google 品牌(图像)，但这些代码没有可访问性的 alt 标签。除了编写自己的 JavaScript 来向这些图像添加 alt 标签之外，我找不到其他解决方案。这是我的解决方案，但我的问题是:这是我们应该做还是不应该做的事情？我想确保网站的所有部分都通过可访问性测试。

var x = document.getElementsByClassName("gsc-branding-img");

for (i = 0; i < x.length; i++) { 
    if(x[i].tagName == "IMG") {
        x[i].alt = "";
    }
}

Answer 1

相关图像是 Google Logo ，它作为短语“由 Google 提供支持”的一部分呈现，其中“Google”是 Logo 图像。对于没有替代文本的屏幕阅读器用户来说，此短语没有任何意义。

以下是相关 Google 自定义搜索插件的部分:

      <td class="gsc-branding-text">
        <div class="gsc-branding-text">powered by</div>
      </td>
      <td class="gsc-branding-img">
        <img src="https://www.google.com/uds/css/small-logo.png" class="gsc-branding-img">
      </td>

以下是向该图像添加替代文本的解决方案的变体:

document.querySelector('img.gsc-branding-img').alt = "Google"

view it at jsfiddle

您还可以将文本内容添加到父标记并使用 CSS 在视觉上隐藏该文本。