Google自定义搜索可访问性

Question

当我们包括谷歌自定义搜索功能在我们的网站，我们得到自动代码从谷歌返回的一些谷歌品牌-图片-没有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自定义搜索插件的相关部分：

​

      <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"

在摇摆不定时观看

您还可以将文本内容添加到父标记中，并使用CSS直观地隐藏该文本。

Answer 2

这篇关于使Google易于访问的文章在我之前的一个项目中帮助构建了一个解决方案(针对同样的问题)。

您可以构建一个回调，例如：

window.__gcse = {
  callback: imgAltTagsFix
};  

var imgAltTagsFix = function() {
  $('img.gsc-branding-img').attr("alt", "Google Custom Search Branding");
  $('input.gsc-search-button').attr('alt', "Google Custom Search Button");
};

有关如何扩展此解决方案的更多详细信息，请参阅使用JavaScript API呈现元素部分。