Missing ARIA label and non-decorative SVG in Accessibility widget button

Ask the Community General Questions
1

Hello,
I noticed an accessibility issue with the Elfsight Accessibility widget on my website.

When running automated accessibility checks (LambdaTest), the floating accessibility button is flagged for:

  • Missing accessible name (aria-label)

  • SVG icon not marked as decorative (aria-hidden=“true”)

To temporarily resolve this, I implemented a JavaScript fix that adds an appropriate ARIA label (“Open accessibility settings”) and marks the SVG as decorative.

Here’s the simplified version of my workaround:

(function(){
  function enhance(){
    var portal = document.querySelector('#__EAPPS_PORTAL, [id^="__EAPPS_PORTAL"]');
    if(!portal) return;
    var btn = portal.querySelector('button');
    if(!btn) return;

    // Add accessible name
    var lang = (document.documentElement.lang || 'it').toLowerCase();
    var label = lang.startsWith('en')
      ? 'Open accessibility settings'
      : 'Apri impostazioni di accessibilità';
    btn.setAttribute('aria-label', label);

    // Mark SVG as decorative
    var svg = btn.querySelector('svg');
    if(svg){
      svg.setAttribute('aria-hidden','true');
      svg.setAttribute('focusable','false');
      var t = svg.querySelector('title, desc'); if(t) t.remove();
    }
  }
  enhance();
  new MutationObserver(enhance).observe(document.documentElement,{childList:true,subtree:true});
})();

Could you please confirm whether this accessibility improvement is planned for a future release?

It would be helpful to know when I can safely remove the custom fix and rely on the updated widget instead.

Thank you for your attention and support.

accessibility-issue-001
accessibility-issue-0012030×822 69.3 KB

2 Likes
3

Hi there and welcome to the Community, @mickhele :waving_hand:

Thank you so much for bringing this to our attention!

Our devs will look into this, and I’ll update you once I have their response :slightly_smiling_face:

2 Likes
4

Hi there, @mickhele :waving_hand:

Our devs checked things and found that the floating button has an aria-label attribute without the script you’ve used:

image
image1575×929 228 KB


Could you please double-check it? If you still see a missing aria-label attribute without using a custom script, please send me a screenshot. We’ll gladly look into this further.

As for the SVG icon not marked as decorative, our devs will try to fix it and I’ll update you once it’s done :slightly_smiling_face:

2 Likes
5

I confirm that the issue is now only with the SVG, which is not marked as decorative.

Furthermore, I would like to point out that if I click on the option “Safe for epileptic seizures”, the “Motion Effects” (https://elementor.com/academy/how-to-add-scrolling-effects-to-your-website/) created with the page builder Elementor (WordPress) doesn’t stop.

Thanks!

2 Likes
6

Got it, thanks!

We’ll check the issue with the Seizure Safe mode as well. I’ll keep you updated :slightly_smiling_face:

2 Likes
7

Hi there, @mickhele :waving_hand:

Thank you for waiting!

The thing is that currently the Seizure Safe mode disables only CSS animations. On your website, you’re using the JS animation, which is why it’s still in place with the Seizure Safe mode enabled.

Our devs are aware of these issues, and we do have plans to resolve it along with the “SVG icon not marked as decorative”. We can’t promise a soon fix, but as soon as we have any news, we’ll immediately inform you here :slightly_smiling_face:

1 Like