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直觀地隱藏該文本。