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 徽标，它作为短语 "powered by Google" 的一部分显示，其中 "Google" 是徽标图像。如果没有替代文本，此短语对屏幕 reader 用户没有意义。

这是有问题的 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 在视觉上隐藏该文本。

Answer 2

这篇关于 Making Google CSE Accessible 的文章有助于我在之前的项目中构建解决方案（针对您的同一问题）。

您可以像这样构建回调：

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");
};

请务必查看 Using the JavaScript API to render elements 部分，了解有关如何扩展此解决方案的更多详细信息。

Google 自定义搜索辅助功能

Google Custom Search Accessibility

javascript

accessibility

google-custom-search