1

Ich habe dieses Hauptkopfelement, das ein seitenspezifisches Navigationsmenü ist. Wie Sie sehen können, ist das Element h1 ein Link zu (das Menü ist oben auf der Seite fixiert, während der Rest nach unten scrollt).html <header role = "menubar"> nicht validieren auf w3 validator

Beispiel:

<header role="menubar"> 
    <a href="#top"> 
     <h1>Main Title</h1> 
    </a> 
    <ul role="menu"> 
     <li role="menuitem"> 
      <a href="#presentation">presentation</a> 
     </li> 
     <li role="menuitem"> 
      <a href="#picture">picture</a> 
     </li> 
     <li role="menuitem"> 
      <a href="#downloads">downloads</a> 
     </li> 
    </ul> 
</header> 

auf w3 validator ich als Nachricht:

Error: Bad value menubar for attribute role on element header.

.

Bezug mich auf die W3 recommendation page for single pages, wo die erlaubte ARIA Rollen für das Kopfelement sind:

banner role (default - do not set) or presentation.

.

‚default - nicht gesetzt haben‘ ist nicht wirklich eine Option, da es nicht rückwärtskompatibel wäre wegen des Kopfelement

‚Banner‘ und ‚Präsentation‘ sind nicht die richtigen Rollen (siehe banner und presentation)

Also meine Fragen:

  • Was muss ich tun? Am einfachsten wäre es, das Header-Element durch ein div-Element zu ersetzen. Aber ich denke, es ist semantisch weniger gut, ist das richtig?

  • Ist es möglich, dass dieser Fall nicht wirklich von den W3C Menschen angesehen wurde, oder ist es 100% falsch, dies zu tun (ich auf einer semantischen Ebene bedeuten auf Zugänglichkeit Fokussierung).

  • Gibt es andere Optionen?

danke

+0

Hallo @ChristopheStrobbe, Vielen Dank für Ihren schnellen Kommentar. Ich veröffentlichte eine vereinfachte Version des Menüs, ohne die Zustände und Eigenschaften, nur die Rollen, weil das mein Anliegen war. Wie auch immer, du hast meine Frage beantwortet, indem du auf den Navigationsweg zeigst. Ich dachte, dass ein Nav-Element nur Links zu anderen Seiten haben sollte, aber beim Überprüfen der W3C-Seite dieses Elements sehe ich, dass es auch Links zu Teilen innerhalb der Seite enthalten kann. Schade, dass es kein Header sein kann, da ich immer noch denke, dass der Header aus semantischer Sicht korrekter ist als nav. – quasi

Antwort

2

Was Ihr aktueller Code zeigt, ist kein menubar aber eine Navigationsliste :). Statt <header role="menubar"> benötigen Sie <nav> und Sie sollten die Rollenattribute aus den Listenelementen entfernen. Wenn Sie eine Menüleiste implementieren, ist Ihr Code sehr unvollständig.

Hinweise zur Verwendung von HTML5 und WAI-ARIA für Menüleisten finden Sie unter Recommended WAI-ARIA implementation for navigation bar/menu.