Observed behavior
The page contains two nested <main> elements: the first in the global layout structure, and a second <main class="dictaphone__connected_layout_content"> inside the first one. Additionally, the help and mobile app download area (dictaphone__connected_layout_help_menu) is placed inside the <main>, even though it is not part of the main page content.
Expected behavior
An HTML document must contain only one <main> element. The header area should be marked with <header>, the main content with <main>, and utility content (help, download) with <aside>.
Steps to reproduce
- Open the recordings page at transcripts.numerique.gouv.fr
- Inspect the code
- Notice the presence of two nested
<main> elements and the help area inside the <main>
Possible solution
Before:
<main>
<div class="c__main-layout">
<div class="c__main-layout__header"><!-- header --></div>
<div class="c__main-layout__content">
<main class="dictaphone__connected_layout_content">
<div class="recordings-page"><!-- content --></div>
<div class="dictaphone__connected_layout_help_menu"><!-- help --></div>
</main>
</div>
</div>
</main>After:
<header class="c__main-layout__header"><!-- header --></header>
<main class="dictaphone__connected_layout_content">
<div class="recordings-page"><!-- content --></div>
</main>
<aside aria-label="Resources and help">
<div class="dictaphone__connected_layout_help_menu"><!-- help --></div>
</aside>
Additional context / Screenshots
The page structure can be verified using the HeadingsMaps extension (Chrome version / Firefox version)
In the screenshot, we can see that there are indeed 2 "main" areas
RGAA criteria
Critère 9.2 : Dans chaque page web, la structure du document est-elle cohérente ?
Impact
A user navigating by landmarks finds two "main" areas on the page and utility content mixed with the main content. They cannot quickly identify the page structure or directly access the desired area.
Priority
P0
Observed behavior
The page contains two nested
<main>elements: the first in the global layout structure, and a second<main class="dictaphone__connected_layout_content">inside the first one. Additionally, the help and mobile app download area (dictaphone__connected_layout_help_menu) is placed inside the<main>, even though it is not part of the main page content.Expected behavior
An HTML document must contain only one
<main>element. The header area should be marked with<header>, the main content with<main>, and utility content (help, download) with<aside>.Steps to reproduce
<main>elements and the help area inside the<main>Possible solution
Before:
After:
Additional context / Screenshots
The page structure can be verified using the HeadingsMaps extension (Chrome version / Firefox version)
In the screenshot, we can see that there are indeed 2 "main" areas
RGAA criteria
Critère 9.2 : Dans chaque page web, la structure du document est-elle cohérente ?
Impact
A user navigating by landmarks finds two "main" areas on the page and utility content mixed with the main content. They cannot quickly identify the page structure or directly access the desired area.
Priority
P0