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

时间:2016-11-14 14:28:28

标签: javascript accessibility google-custom-search

通过一些辅助功能测试并看到GCSE结果显示的是没有alt属性的缩略图。看起来我将不得不使用javascript来添加这个属性,但是我觉得这样做很脏。

我知道通过以下方式触发回调函数:

window.__gcse = {
  callback: myCallback
};

我可以触发一个函数,但我似乎必须使用setTimeout()函数来确保图像存在。我已经尝试过使用jQuery load()以及。('load',fn ...)但似乎都没有做添加属性的工作。但是,使用setTimeout为搜索结果提供一些生成时间确实有效,但我担心这会是一个肮脏的黑客。

// 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);
}

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我已经能够为放大镜搜索按钮的辅助功能添加替代文字,但到目前为止我还无法为Google品牌形象添加它。我从https://productforums.google.com/forum/?hl=en#!topic/customsearch/Owey1Sj6oB8;context-place=forum/customsearch

得到了这个想法

(请务必使用您自己的Google自定义搜索引擎ID替换000000000000000000000:aaaaaaaa。)

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