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徽标，它是由Google＆＃34;提供的短语的一部分，其中＆＃34; Google＆＃34;是徽标图像。这个短语对没有替代文本的屏幕阅读器用户没有意义。

以下是Google Custom Search插件的相关部分：

＆＃13;

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

＆＃13;

以下是您为该图片添加替代文字的解决方案的变体：

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自定义搜索辅助功能

2 个答案: