Remove #main-content link

Created on 6 February 2025, about 2 months ago

Problem/Motivation

An accessibility audit on a site based on ui_suite_dsfr ask to to remove the unnecessary #main-content link.

In page.html.twig

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

I guess the only purpose of this link is to be able to point on the #main-content id from "back to top" or
skip links.

This id can be placed in main tag instead.

  <main id="main-content" role="main" class="{{ container }} fr-mb-4w fr-mt-4w">

This link comes from page.html.twig in system module with a comment which point to html.html.twig, except in ui_suite_dsfr html.html.twig, the link does not exists anymore, replaced, i guess, by skiplinks.

<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

In core/modules/system/templates/html.html.twig

...
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
...

Proposed resolution

In page.html.twig

remove

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

Add id="main-content" to

📌 Task
Status

Active

Version

1.1

Component

Code

Created by

🇫🇷France goz

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024