
-
AuthorPosts
-
June 28, 2025 at 11:18 am #1486069
Dear Enfold Team,
During accessibility testing of our website (https://restaurant-weichandhof.de) built with the Enfold theme, the AXE tool reported an issue concerning the built-in Scroll-to-Top button.
Specifically, the tool flags an error indicating that an element with aria-hidden=”true” is focusable. This error appears when the page is scrolled before starting the test (so the Scroll-to-Top button is visible). If the page is not scrolled prior to testing, the button is not visible and the error does not appear. This suggests the issue exists on every page but is only flagged depending on test conditions. This error really appears in EVERY SITE. Is there a way to fix it by not changing the ENDOLD-php-Code (> not consistent solutions for updates) ?
So I kindly ask you to review this ARIA issue and advise on how to ensure the Scroll-to-Top button meets WCAG 2.1 AA requirements.
Thank you in advance for your support.
Best regards, DianaJune 28, 2025 at 3:15 pm #1486076Hey 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,
MikeJune 29, 2025 at 4:42 pm #1486109Dear Mike,
Thank you so much for your quick help and solution suggestion. I wanted to let you know that AXE is actually a free browser extension (available for Chrome) and very easy to install and use. I tested your code after clearing the cache and restarting everything, but unfortunately, AXE still reports the same error (see screenshot at https://restaurant-weichandhof.de/support/axe.png).
Also, this seems to be a global issue. I am currently working on making seven websites accessible, all built with Enfold, and this Scroll-to-Top-Button problem appears across all of them. It would be great to have a solution that I could apply universally or ideally have this fixed directly in the theme itself.
I would also prefer not to use an additional plugin (like WPCode) or keep this code in the functions.php file, as I would lose the changes with the next theme update. Could you perhaps suggest a solution that works via the existing Header Footer Code Manager plugin, or maybe there is another way to solve this via theme settings or CSS/JS?
Thank you so much again for your support!
Best regards,
DianaJune 29, 2025 at 6:04 pm #1486111Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.