Google Custom Search Accessibility

Question

Когда мы включаем возможность Google Custom Search на нашем веб-сайте, мы получаем автоматический код, возвращенный из Google, содержащий некоторые бренды Google - изображения, которые не имеют альтер-тегов для обеспечения доступности. Я не мог найти решение, кроме как написать свой собственный 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», где «Google» является изображение логотипа. Эта фраза не имеет смысла для пользователя программы чтения с экрана без альтернативного текста.

Вот раздел плагина Google Custom Search в вопрос:

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