[accessibility] The skip link added in version 2.6.0. is dysfunctional

[Bovelett]

Here's the report I promised after the dialogue with @arielk on July 15:

I will be separating this in two parts: first the geek speak, then the consequences for non-technical users:

The skip link added in version 2.6.0 on July 10 has a couple of issues.

VIDEO WALK THROUGH OF THE ISSUES FOUND

It's not a long video, and I am announcing in the beginning what will be shown.
⬇️
https://user-images.githubusercontent.com/852140/179362286-02459a8b-e4ca-4b68-9a36-2922e8cade7d.mp4

The nerd speak

1. It assumes there is a div called content. That div is there upon a fresh installation of the latest versions of Elementor and Elementor Pro. As in: <main id="content">. But as soon as I chose to edit a web page with Elementor from the WordPress Dashboard, that ID disappeared. And then the skip link is there for naught. [UPDATE July 21: see https://github.com/🐞 Bug report: [accessibility]<main id="content> tag disappears upon setting page layout to full width elementor#19215 which explains that pages individually set to full width in Elementor do not have the <main id="content" anymore. This explains why I could never find this ID on my sites, and on that of many other Elementor Pro driven sites.]
2. When a user is tech-savvy enough to figure out it's necessary to manually assign the content id, the next problem appears: It's jumping to content alright. But when you tab on, you return to the menu in the header, instead of going to the next focusable element. This is not a new issue, by the way. I think you will find this report an interesting read, as the cause for this (the handleAnchorLinks seems to be the culprit) was mentioned there: Accessibility: Skip links elementor#9292.
   However, this was in reply after that issue had been closed. So, someone opened a new thread referring to this one, which still has the "open" status and is and unassigned: Skip to content accessibility workarounds no longer work elementor#17433 Although Rami did add the bug and accessibility label to it.

Consequences and suggestions:

As happy as I am with any improvement for accessible output, and I'm glad to see that a skip link is something you deem important, I'm worried about the implementation. Accessibility has an undeserved bad reputation as it is. People think accessibility will make their site ugly. This does not help that belief and people continue to be excluded from sites.

Currently:

• It can't be turned off (not every site needs a skip link).
• It can't be styled in the Elementor way we all love so much, so only those with good understanding of HTML and CSS can work it. I suggest you add this to Elementor settings, turned off by default and educate people about it.
• It was not announced. I can assure you that right now there are hundreds, maybe even thousands of sites based on Hello out there where the makers went out of their way to create a working skip link against all odds. And I'm saying "against all odds" because the base code of Elementor interferes with the normal way of implementing it. The consequence of not making the skip link optional, and not announcing that you built it in, is that, without warning, their sites now have two skip links: a non-functional skip link that precedes over the one they already had and their own version. In a web shop this has consequences, as it can negatively affect conversion. For anyone reading this and thinking I'm exaggerating: Here is a clear business case with Tesco who had 37000% ROI on their investment in an accessible webshop.
• As far as I can tell, it is always there now. So, anyone using this version of Hello Theme and up, now has an unusable skip link.
• The main audience is DIY, and have no clue how to work with this. To me, it seems the way this was implemented, you assume that the users of Hello theme are knowledgeable about HTML and CSS. 3 years of moderating in the Global Facebook Community has taught me that the main stream audience uses it exactly as it is marketed for: a "no-code" solution.

Dear Elementor Team, if we all work together to make online accessibility with Elementor part of that no-coding solution, and thus available to all, the world will be a more inclusive and therefore better place. And in doing so you will be light years ahead of the competition.
❤️

With warm and respectful greetings,

Anne

[zeinnicholas]

+1

[Vossha]

+1

[freckles615]

Still waiting on a fix for this. It's an accessibility failure and it matters.

[Simpa77]

+1

[lae-qguiraudie]

+1
10 months after, still not fix...
Wake up

[jamieburchell]

Does the current implementation assume that we will add an ID of "content" to one of the elements on the page? Or should it be handled automatically? Was I dreaming, or did Elementor used to output a <main> element, which seems like a logical place to put the ID?