Lighthouse SEO: Uncrawlable Link a#main-content

Are you using claro as your front end theme?

No, however its not common - as its an Admin theme

Similar issue in webform: #3214340: Links are not crawable error in Lighthouse

Also, this is not only limited to Claro but is a problem in page.html.twig in the following themes:

• Bartik
• Claro
• Classy
• Olivero
• Seven
• Stable
• Stable9
• Demo Unami

And the page.html.twig template provided by the system module.

So this:
<a id="main-content" tabindex="-1"></a>

should be updated to:
<span id="main-content" tabindex="-1"></span>

On the webform issue, tabindex was also removed. But I'm not sure if that is necessary.

I am working on it.

Below patch is fixes provided only for Claro Theme.

Back to needs work for the other themes.

+++ b/core/themes/claro/templates/page.html.twig
@@ -49,7 +49,7 @@
     <main class="page-content clearfix" role="main">
-      <div class="visually-hidden"><a id="main-content" tabindex="-1"></a></div>
+      <div class="visually-hidden"><span id="main-content" tabindex="-1"></span></div>

The point of this is so we have an ID attribute for the browser to scroll or tab to, right? So if we're dropping the <a> here, can we just put this directly on the <main> element?

     <main class="page-content clearfix" role="main" id="main-content" tabindex="-1">

I'm unsure of the accessibility implications of any of this, but if we can replace an anchor with a span, I'm not sure why we need the span at all.

I am working on it, for other core themes.

https://webaim.org/techniques/skipnav/ suggests that <main id="main-content"> is perfectly OK.

Updated the "a" tag to "span" in all page.html.twig files on all the core themes. This patch includes the changes made on #10 patch as well. This going to be the consolidated one.

Fixed the fails of #15

Tentatively marking RTBC as the patch solves the problem at hand, but would like an accessibility review so we can see if #12 if viable as I feel that is cleaner than using spans.

A links without an href are valid html - see http://w3c.github.io/html-reference/a.html - is this really a bug?

A links without an href are valid html - see http://w3c.github.io/html-reference/a.html - is this really a bug?

The HTML is valid, but it has a negative SEO impact, according to lighthouse (made by google so they should know). This means potentially every site which uses one of these themes will have an inbuilt negative SEO impact on every page.

According to https://css-tricks.com/a-deep-dive-on-skipping-to-content/ we should keep it as an anchor tag, but add a href that links back to itself

Addressed #21, Patch created.

@larowlan I have added href="#main-content" in anchor tag, I have bit confuse about it is the correct way to call back to itself?, Please have a look and advise.

According to https://css-tricks.com/a-deep-dive-on-skipping-to-content/ #22 is the right approach, however that link also suggests including text inside the skip link target, we currently have no text. Unsure if that is in scope for this issue or not.

After applying #22 there are still a few places that use <a id> with no href, these should all be fixed together:

core/modules/system/templates/page.html.twig:    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig:      <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
core/themes/starterkit_theme/templates/layout/page.html.twig:    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
core/themes/bartik/templates/maintenance-page.html.twig:            <a id="main-content"></a>
core/themes/olivero/templates/maintenance-page.html.twig:            <a id="main-content"></a>

As mentioned in #23, Added changes in some more places.

I think we should add text in the anchor whilst we're here.

@larowlan won't we then need to add the visibility-hidden class? I think maybe discussing the BC impacts of doing that is worth it and so making that part of the change in follow-up seems a good idea.

Yeah, I hadn't considered that - and its even more involved than adding visibility-hidden

Here's a screenshot from the example in that article of when the anchor has focus

So that will be something that takes time.

I also found this resource https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#skip_links which has it linking to the main element instead of an a

@larowlan I raised the possibility of putting the ID on <main> instead of <a> in #12/14 but am unsure of the accessibility implications of doing so, so tagged for that in #18. There is also a minor issue that <main> already has a different ID in some templates, although there are child elements we could put the attribute on instead.

<a href="#main-content" id="main-content" tabindex="-1"></a> as per #24
Works for Bootstrap Barrio. SEO 93=>100

Just noticing this patch is only for 9.3.x, so it should be updated. If this DOES get re-rolled however, is this direction the right approach to get this accepted to core? This makes sense to me at least as far as addressing the OP.

Re-rolled for 10.1.x. I am using the previous patch, and now this new re-roll, and it's fixing my Google PageSpeed complaint, so I'm going to move this right to RTBC. Hopefully that will get someone from the core team to look at this again and give some direction on what's needed here to solve this problem...?

I should add that I am getting this Lighthouse "ding" now:

Links do not have a discernible name

Which I think is what is mentioned in #25.

There doesn't seem to be a specific reason that the earlier approach with <span> was abandoned, other than that the markup of <a> without href is valid and used to be very common.

I think we need that accessibility review to go forward here. I wouldn't want to degrade the navigational experience for SEO if there's a better way to improve the markup.

@xjm - who would do that review? Can we request that review from those individuals?

Putting up an alternate merge request which I believe uses the <span> method you referred to.

Posted to the #accessibility channel to see if they can take a look

But if we are changing all the theme templates won't we need a change record if any thing base themed off one of these?

Hi, Lighthouse complains that links are not crawlable in our new site on D9.5.7 with the default Olivero theme that doesn't show up in Google search so far. It specifies
"Uncrawlable Link", and

  div#main-wrapper > div#main > div.main-content > a#main-content
<a id="main-content" tabindex="-1">

I am a bit lost as to which patches have been applied in 9.5.7, if any, and what workaround could currently actually be applied with the least damage resulting elsewhere. Or is an upgrade to D10 the best solution?

Hello Folks,
In Drupal 10.1.x-dev anchor tag comes with href attribute. So no need to work.
For ref attached screenshot. So we can move this bug to needs review.

Hello Folks,
In Drupal 10.1.x-dev anchor tag comes with href attribute. So no need to work.
For ref attached screenshot. So we can move this bug to needs review.

After looking further, it was discovered that the anchor tag's href property was missing, thus href was added in accordance with usual practise.
After applying the fix, I verified that the lighthouse reports were error-free.
Please review

#47 is wrong, now the anchor is a link to itself.

I still think the simplest solution is to put the ID directly on the <main> element.

WebAIM suggests that this would be OK: https://webaim.org/techniques/skipnav/

<a href="#main-content" class="visually-hidden focusable skip-link">
...
<main id="main-content">

Addressed feedback from #48, Attached interdiff with 47, please review

I came across this other core issue regarding these same links, and I think a solution should probably consider both of these issues...?

Seems latest change caused failures.

What do you mean by that, @smustgrave?

#50 didn't fully pass. Caused some nightwatch errors I believe.