Accessibility Issue with Scroll-to-Top Button (ARIA-hidden focusable element)

Hey Diana,
Thanks for the login, I added this code to your theme functions.php file:

function change_aria_hidden_for_scroll_top_link_when_it_shows() { ?>
  <script>
window.addEventListener('scroll', function() {
  const scrollTopLink = document.getElementById('scroll-top-link');

  if (!scrollTopLink) return;

  const style = window.getComputedStyle(scrollTopLink);
  const rect = scrollTopLink.getBoundingClientRect();
  const inViewport = rect.width > 0 && rect.height > 0;

  const ariaValue = (style.display !== 'none' && style.visibility !== 'hidden' && inViewport) ? 'false' : 'true';

  scrollTopLink.setAttribute('aria-hidden', ariaValue);

  const childSVGs = scrollTopLink.querySelectorAll('svg');
  childSVGs.forEach(svg => {
    svg.setAttribute('aria-hidden', ariaValue);
  });
});
  </script>
  <?php
}
add_action( 'wp_footer', 'change_aria_hidden_for_scroll_top_link_when_it_shows', 99 );

It changes the aria-hidden for the scroll-top-link and the SVG icon when it shows, from false to true.
I tested in the browser DOM and it works. Unfortunately we don’t have access to the AXE tool as it looks like a paid tool, but I did check in WAVE. Unfortunately, while in the live browser the code works, the WAVE tool doesn’t update the DOM so it doesn’t look like it is working, perhaps this is a limitation of the free version, I don’t know.
I tried to add this to your snippet Header Footer Code Manager plugin but it didn’t work there, the plugin seems limited, if you find this workshop for you and If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the above code and save, after you remove it from the theme functions.php file so it will not be lost when you update.

PS for testing this is the snippet with console log comments that I tested with that will show that the aria-hidden changes while the page is scrolled:

function change_aria_hidden_for_scroll_top_link_when_it_shows_log() { ?>
  <script>
window.addEventListener('scroll', function() {
  const scrollTopLink = document.getElementById('scroll-top-link');

  if (!scrollTopLink) {
    console.log('Element #scroll-top-link not found.');
    return;
  }

  const style = window.getComputedStyle(scrollTopLink);
  const rect = scrollTopLink.getBoundingClientRect();
  const inViewport = rect.width > 0 && rect.height > 0;

  console.log('Scroll event triggered.');
  console.log('Display:', style.display);
  console.log('Visibility:', style.visibility);
  console.log('BoundingClientRect:', rect);
  console.log('In viewport:', inViewport);

  const ariaValue = (style.display !== 'none' && style.visibility !== 'hidden' && inViewport) ? 'false' : 'true';

  console.log(#scroll-top-link is ${ariaValue === 'false' ? 'visible' : 'hidden'}. Setting aria-hidden to ${ariaValue}.);

  // Set on the main link
  scrollTopLink.setAttribute('aria-hidden', ariaValue);

  // Set on any child SVGs
  const childSVGs = scrollTopLink.querySelectorAll('svg');
  childSVGs.forEach(svg => {
    svg.setAttribute('aria-hidden', ariaValue);
    console.log('Updated child SVG aria-hidden to', ariaValue);
  });
});

  </script>
  <?php
}
add_action( 'wp_footer', 'change_aria_hidden_for_scroll_top_link_when_it_shows_log', 99 );

don’t use both snippets at the same time, this is just for proof of work.

Best regards,
Mike

Hi,
The plugin Header Footer Code Manager is limited and only allows HTML & JS, where WPCode allows these and PHP & CSS, in the past I tested both and found WPCode, the free version, to be much better considering that most snippets are PHP. I would recommend replacing Header Footer Code Manager with WPCode, or use a child theme.
But since your AXE & WAVE is not reporting the change to aria-hidden correctly I don’t think that we can create a solution that will help. If you watch the DOM in the browser you will see that the aria-hidden does change on scroll. We could set the aria-hidden to false always, but then on page load you would see an error, instead of after scroll. I would hope that a real screen reader would report this correctly and recognize changes to the DOM in real time, unlike the testing tools, otherwise you may need to disable this Scroll-to-Top feature.
To request the Dev Team to review this, please open a new Github Feature Request to place a request and follow it as the Dev Team reviews it.

Best regards,
Mike

Hi,
Glad we were able to help, and I can understand that you may not want to use the snippet. If you wound like to see this built in to the theme please open a Github Feature Request for the Dev Team to review it and you can follow along with them. If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike