CODEWITHSUNDEEP
javascriptaccessibilitygoogle-custom-search
CodeChefMarc
CodeChefMarc

Reputation: 13

Google Custom Search Accessibility

When we include Google Custom Search capability on our website, we get automatic code returned from Google containing some Google branding - images - that do not have alt tags for accessibility. I couldn't find a solution other than to write my own JavaScript to add alt tags to these images. Here is my solution, but my question: is this something that we should or shouldn't do? I want to make sure all parts of the website pass accessibility tests.

var x = document.getElementsByClassName("gsc-branding-img");

for (i = 0; i < x.length; i++) { 
    if(x[i].tagName == "IMG") {
        x[i].alt = "";
    }
}

Upvotes: 1

Views: 1073

Answers (2)

Blitnee
Blitnee

Reputation: 1

This article on Making Google CSE Accessible was helpful in building a solution (for your same question) in a previous project I worked on.

You can build a callback like:

window.__gcse = {
  callback: imgAltTagsFix
};  

var imgAltTagsFix = function() {
  $('img.gsc-branding-img').attr("alt", "Google Custom Search Branding");
  $('input.gsc-search-button').attr('alt', "Google Custom Search Button");
};

Be sure to check out the Using the JavaScript API to render elements section for more details on how to expand this solution.

Upvotes: 0

ckundo
ckundo

Reputation: 1569

The image in question is the Google logo, and it's presented as part of a phrase "powered by Google", where "Google" is the logo image. This phrase doesn't make sense to a screen reader user without alternative text.

Here's the section of the Google Custom Search plugin in question:

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

Here's a variation on your solution to add alternative text to that image:

document.querySelector('img.gsc-branding-img').alt = "Google"

view it at jsfiddle

You could also add the text content to the parent tag and visually hide that text with CSS.

Upvotes: 1

Related Questions