Gunnar Bittersmann: Warum geht meine Seite ins Bodenlose, obwohl ich mit dem Befehl height nur 79px festlege?

Beitrag lesen

@@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