Google Reviews app needs Alt-text for ADAcompliance

[Shelby_Meyer]

The Google Reviews app is wonderful but fails ADA compliance. I used the WAVE test (https://wave.webaim.org/) and it detects over 80 missing alt-text and 2 color contrast issues. Will these be resolved soon?

[Max]

Hello there, @Shelby_Meyer and welcome to the Community

I’ve just checked your website using the WAVE tool and don’t see the errors mentioned there:

Could you please send me a screenshot of what you see in your WAVE report?

[Bob_Wilson]

This is very surprising. Although Google itself does not prompt the reviewer for alt text or dynamically inject it, Elfsight specifically does ( Google Reviews: Enjoy improved image accessibility ).

Right-click the webpage in question and select View Page Source, then search (Ctrl+F) for <img , which is the opening tag for images. Check if alt= exists between the opening & closing tag > . If it does, then WAVE was likely critiquing some other area of the page.

[Shelby_Meyer]

This is what I get every time on my end.
The errors, contrast errors and alerts are all from the Google Reviews app.
Would I be using an old version or something along those lines?

[Shelby_Meyer]

You can see the code at the bottom where it says elfsight.

[Shelby_Meyer]

I have vibe-coded my own content management system in Python. (I’m still perfecting it). One of my apps will scan my entire website. It looks for ALL images, captions, alt-text, file paths, image size, broken links etc, and produces an Excel file. Its been a great help since I have hundreds of images. Nearly every image on my site has been verified to have all parameters. I still have a small number to finish.

[Max]

Got it, thanks for sharing screenshots!

We’ve fixed the issue with this script added to the Custom JS field on the Settings tab of your widget’s settings:

function hideSvg(scope) {
  (scope ?
    scope.querySelectorAll('svg:not([aria-hidden])') :
    util.findAllElements('svg:not([aria-hidden])')
  ).forEach((svg) => {
    svg.setAttribute('aria-hidden', 'true');
    svg.setAttribute('focusable', 'false');
  });
}

util.waitForAllElements('svg').then(() => hideSvg());

const root = util.getWidgetRoot();
if (root) {
  new MutationObserver(() => hideSvg()).observe(root, {
    childList: true,
    subtree: true
  });
}

Please check it once again and let me know if the errors have been eliminated

[Shelby_Meyer]

Thanks! That cured the bulk of the problems.

The redundant links appear to be 1 link for each review. Not sure if anything can be done about that. The 2 contrast errors might be the app sitting over my light gray background.

[Max]

Thank you for the feedback!

Please let me check it with the devs once again. I’ll report back once I have their response

[Max]

Hi Shelby!

Our devs have reviewed the issues you reported, and I’d be happy to share an update:

1. Contrast Errors: These are related to the widget’s info panel, which is only visible to you as the widget owner. This panel isn’t rendered for regular website visitors, so these errors won’t affect their experience.

2. Skipped Heading Level: This issue isn’t related to the Google Reviews widget:

3. Redundant Link: We’ve updated the script in your widget to address this issue, so it should now be resolved:

function hideSvg(scope) {
  (scope ?
    scope.querySelectorAll('svg:not([aria-hidden])') :
    util.findAllElements('svg:not([aria-hidden])')
  ).forEach((svg) => {
    svg.setAttribute('aria-hidden', 'true');
    svg.setAttribute('focusable', 'false');
  });
}

function fixAvatarLinks() {
  util.findAllElements('a.es-review-author-block-avatar-link[href]').forEach((a) => {
    a.removeAttribute('href');
    a.style.cursor = 'pointer';
    a.addEventListener('click', (e) => {
      e.target.closest('.es-review-author-block-container')?.querySelector('.es-review-author-block-author-name')?.click();
    }, {
      capture: true
    });
  });
}

util.waitForAllElements('svg').then(() => hideSvg());
util.waitForAllElements('a.es-review-author-block-avatar-link').then(fixAvatarLinks);

const root = util.getWidgetRoot();
if (root) {
  new MutationObserver(() => {
    hideSvg();
    fixAvatarLinks();
  }).observe(root, {
    childList: true,
    subtree: true
  });
}

Could you please run another WAVE test and let us know if everything looks good on your end?