Google自定义搜索引擎结果页上的缩略图alt属性

Question

Running through some accessibility testing and seeing that GCSE results are displaying thumbnail images with no alt attribute. It looks like I'll have to use javascript to add this attribute, but I feel dirty in the way I've gone about doing this.

I know about firing a callback function via:

window.__gcse = {
  callback: myCallback
};

And I am able to fire a function, but I seem to have to use a setTimeout() function to ensure the images are there. I've tried using both a jQuery load() as well as on.('load', fn...) but neither seem to do the job of adding the attribute. However, using a setTimeout to give the search results some time to generate does work, but I'm afraid of this being a dirty hack.

// add some alt tags after google custom search has loaded results
function myCallback() {
  setTimeout(function() {jQuery('.gs-image').attr('alt','Article Thumbnail');}, 500); // empty string better than generic text
  setTimeout(function() {jQuery("img.gsc-branding-img").attr('alt','Google');}, 500);
  setTimeout(function() {jQuery(".gsc-search-button-v2").attr('alt','Search');}, 500);
}

Any ideas?

Answer 1

I have been able to add alt text for accessibility for the magnifying glass search button, but so far I have not been able to add it for the Google branding image. I got this idea from https://productforums.google.com/forum/?hl=en#!topic/customsearch/Owey1Sj6oB8;context-place=forum/customsearch

(Be sure to replace 000000000000000000000:aaaaaaaaa with your own Google Custom Search Engine ID.)

<script>var myCallback = function() {   
document.getElementsByClassName('gsc-search-button gsc-search-button-v2')[0].alt = "Search Icon"; }; 
window.__gcse = {   callback: myCallback };   
  (function() {
    var cx = '000000000000000000000:aaaaaaaaa';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search linktarget="_parent"></gcse:search>