7.3 – Markup und Barrierearmut

Der Aufbau

nav.quartz-nav.quartz-nav--<variant>.quartz-nav--mobile-<mode>
  h3.quartz-nav__title                                  title
  div.quartz-nav__panel
    div.quartz-nav__root > a.quartz-nav__root-link       showScopeRoot
    ul.quartz-nav__list[data-level]
      li.quartz-nav__item.quartz-nav__item--page|--folder
        a.quartz-nav__link > Icon + span.quartz-nav__text
        details.quartz-nav__folder > summary + ul        aufklappbare Ordner

Dazu kommen, je nach Variante und Modus: Button, Hintergrund und Schließen-Button des mobilen Menüs, das Sprungmenü, die beiden Links des Pagers. Die Klassen tragen alle das Präfix quartz-nav; der Explorer und andere Komponenten werden nicht berührt.

Zustände

Klasse / Attribut	Wo
active	<li> und <a> der aktuellen Seite
aria-current="page"	Link der aktuellen Seite
active-trail	jeder Ordner auf dem Pfad zu ihr
quartz-nav__item--parent	Ordner, deren Kinder gezeigt werden
quartz-nav__item--split	Zeilen mit Link und eigenem Aufklapp-Button
quartz-nav--align-<wert>	waagerechte Varianten

id

options:
  id: seitenleiste

Jede Navigation hat eine ID. Ohne id bildet das Plugin sie aus allen Optionen (nav- und ein Prüfwert). Eine feste id braucht man in drei Fällen:

1. CSS für genau diese Navigation — .quartz-nav[data-quartz-nav="seitenleiste"]. Ein Prüfwert ändert sich mit jeder Option, der Selektor liefe ins Leere.
2. persistState — gemerkt wird unter der ID. Mit einem Prüfwert ist das Gedächtnis nach jeder Optionsänderung weg (5.1).
3. Zwei Navigationen mit identischen Optionen auf einer Seite. Sie hätten dieselbe ID und damit dieselben Element-IDs — der Burger-Button der einen öffnete das Menü der anderen.

Erlaubt sind Buchstaben, Ziffern, - und _; alles andere wird zu -.

Tastatur und Screenreader

• Jede Navigation ist ein <nav> mit eigenem Namen: ariaLabel, sonst title, sonst „Hauptnavigation“ — beim Pager „Vorherige und nächste Seite“. Stehen mehrere Navigationen auf einer Seite, verdient jede ein eigenes ariaLabel oder einen title, damit man sie in der Liste der Landmarken unterscheiden kann.
• Aufklappbare Ordner sind <details> und <summary>. Mit folderClick: toggle ist die Zeile ein einziges Bedienelement mit dem Titel; mit link ist der Titel ein Link und der Button daneben heißt „ aufklappen“. Kein Link steckt in einem Button.
• Pfeile und Icons sind für Screenreader ausgeblendet.
• Menüs schließen mit Escape und geben den Fokus an ihren Ordner zurück; trigger: hover öffnet auch bei Tastaturfokus (5.2).
• Das mobile Menü hängt an einem fokussierbaren Kontrollkästchen mit aria-expanded und aria-controls; Escape schließt es und setzt den Fokus zurück.
• Das Sprungmenü navigiert per Tastatur erst mit Enter, nicht schon beim Durchblättern.
• Bewegung entfällt bei prefers-reduced-motion.

Die Wörter des Plugins

„Hauptnavigation“, „Übersicht“, „Start“, „Zurück“, „Weiter“, „Springe zu…“, „Los“ und „… aufklappen“ bringt das Plugin auf Deutsch und Englisch mit. Welche Sprache es nimmt, entscheidet auf einer mehrsprachigen Site die Sprache der Seite (8.3), sonst das locale der Site: deutsch für de-DE und jede andere deutsche Variante wie de-AT, englisch für alles andere.

Ändern lassen sich title und ariaLabel; die übrigen nicht. Diese beiden übersetzt das Plugin nicht: Auf einer zweisprachigen Site braucht eine Navigation mit eigenem Text deshalb einen Eintrag je Sprache. Wie das aussieht, steht in 8.3.