@@Matthias Apsel
Offensichtlich möchtest du eine einzige Seite mit mehreren Bereichen haben. Für diese Bereiche solltest du article- oder section-Elemente verwenden.
Nein. Offensichtlich soll nur jeweils ein solcher Bereich (eine „Seite“) der SPA angezeigt werden. Für diese Breiche wären dann main
-Elemente passend:
<body>
<nav>
<ul>
<li><a href="#home" aria-current="page">Home</a></li>
<li><a href="#pagetwo">Page Two</a></li>
<li><a href="#search">Search</a></li>
</ul>
</nav>
<main id="#home">
<h1>…</h1>
⋮
</main>
<main id="#pageone" hidden>
<h1>…</h1>
⋮
</main>
<main id="#search" hidden>
<h1>…</h1>
⋮
</main>
</body>
Im Menü wären die click
-Events abzufangen und aria-current="page"
und die hidden
-Attribute der main
-Elemente entsprechend zu setzen.
Damit die Inhalte auch ohne JavaScript verfügbar sind, sollten die hidden
-Attribute initial erst mit JS gesetzt werden.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory