Google Custom Search Accessibility

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

有问题的图像是谷歌的标志，它的表现为“搭载谷歌”一语，在“谷歌”是标识形象的一部分。这个短语对没有替代文本的屏幕阅读器用户没有意义。

下面是谷歌自定义搜索插件有问题的部分：

 <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直观地隐藏该文本。