Inacessible Deep Links and Bypass Links

There is an accessibility issue related to in-page links or "deep links" where keyboard users and screen readers are unable to navigate using in-page links. The issue appears to be the result of a Divi JavaScript intercepting these links and preventing normal expected behavior.

Just to be clear on terms, "deep link" is a link that targets the ID of another element on the page. Both the skip to content and back to top links are examples of a deep links. But deep links may also be added by authors as a method of navigating longer pages using an table of contents style list at the top of the page.

The expected outcome when activating the skip to content link or the back to top link with a keyboard is that the next use of tab should take the user to the next focusable element. For example activating the back to top link from the footer should move the focus to the #skip-to-content div, so the next tab press should focus the Skip to Main Content link itself.

What's happening is that activating the back to top link scrolls to the top of the page visually, however pressing the tab key again moves the focus to the next link in the footer such as "Accessibility".

Through some debugging we were able to determine that the file located at /wp-content/themes/Divi/js/Custom.js includes a function that is returning false and preventing deep links from behaving normally.

The function at about line 4604 there is the following line:

$('a[href*="#"]:not([href="#"]), .mobile_nav').on('click', function (e) {...}

This function appears to be a fix for mobile menus in the Divi theme but also include several references to woo commerce, smooth scrolling, among several others features we do not fully understand the purpose of. Regardless, the function is preventing links such as href="#SomeElementID" from functioning as intended. Changing the 'return false' statement to 'return true' allows deep links to behave as intended.

Also, applying the class et_smooth_scroll_disabled to the skip links and the back to top links also prevent the return false issue. While adding these classes to the template would address the accessibility issues with the WP template it does not address the issue with content added by authors.

We would like to see this function either removed from Divi or rewritten so that is not greedily applying the function to all deep links.

CAWebPublishing / CAWeb

Inacessible Deep Links and Bypass Links #470