Lob auf das eindeutige Klick Menü

Ich erinnere mich noch an meine Aufregung, als ich lernte, ein durch Hover ausgelöstes Untermenü nur mit CSS zu erstellen. (Wahrscheinlich nachdem ich diesen Artikel von A List Apart aus dem Jahr 2003 gelesen hatte.) Damals war es ein echter CSS-Trick. Ernsthaft. Wilde Zeiten.

Das sah ungefähr so aus

<ul class="my-menu">
  <li>
    <a href="page-a.html">Page A</a>
    <ul>
      <li><a href="page-b.html">Page B</a></li>
      <li><a href="page-c.html">Page C</a></li>
      <li><a href="page-d.html">Page D</a></li>
    </ul>
  </li>
  <!-- etc... -->
</ul>

/* Position submenus relative to parent list item */
.my-menu li {
  position: relative;
}

.my-menu ul {
  /* Hide my submenus by default */
  display: none;
  /* Position submenus, when open */
  position: absolute;
  left: 0;
  top: 100%;
}

/* Look, Ma! No onclick handler! */
.my-menu li:hover > ul {
  display: block;
}

Heutzutage können wir die Barrierefreiheit von rein CSS-basierten Menüs mit einem neueren Trick verbessern! Menüs können sich öffnen und schließen, wenn sie mit der Tastatur navigiert werden, dank :focus-within.

/* No IE11 support */
.my-menu li:focus-within > ul {
  display: block;
}

Versuchen Sie, sowohl Ihre Maus als auch die TAB-Taste zu verwenden, um durch die Demo zu navigieren.

Aber die Zeiten haben sich seitdem ich diese Tricks zum ersten Mal gelernt habe, geändert, und ich mich auch. Seitdem habe ich eine Menge Websites erstellt und viel mehr über Benutzerfreundlichkeit, Barrierefreiheit und Content-Strategie gelernt. Jetzt finde ich Hover-Menüs in all diesen Bereichen mangelhaft. Vor ein paar Jahren habe ich aufgehört, Hover-Menüs zu erstellen und bin zu Klick-Menüs übergegangen. (Von nun an werde ich sie nur noch „Hover-Menüs“ und „Klick-Menüs“ nennen.)

Ich denke, Sie sollten auch aufhören, Hover-Menüs zu erstellen. Ich bin hier, um Ihnen zu sagen, warum.

Hover-Menüs sind inkonsistent

Werfen Sie einen Blick auf dieses reale Menü von einer Website, die ich erstellt habe

Einfach genug, oder? Die Pfeil-Icons zeigen uns, dass es Untermenüs für jeden Punkt außer „Home“ gibt. Aber wenn diese Untermenüs beim Überfahren mit der Maus erscheinen, gibt es mindestens vier Möglichkeiten, wie das Menü funktionieren könnte, und Sie haben wahrscheinlich alle vier erlebt.

1. Der obere „Eltern“-Menüpunkt verlinkt zu einer Seite und jeder Untermenüpunkt verlinkt zu einer anderen Seite. Für das obige Beispiel wäre „Services“ eine eindeutige Seite und ebenso jeder Link im „Services“-Untermenü.

Aber irgendwo auf dem Weg entstand ein zweites, sehr gängiges Muster.

2. Der Elternpunkt hat href="#" — oder gar keinen href überhaupt 😱 — und die einzigen funktionalen Links befinden sich in den Untermenüs. In unserem Beispiel ist „Services“ immer noch ein Link, aber es passiert nichts, wenn Sie darauf klicken.

Diese Inkonsistenz — ist der Elternpunkt ein Link oder nicht? — führt zu viel Verwirrung, wenn ich beobachte, wie Leute Websites nutzen. Manche Leute überspringen hilfreiche Top-Level-Seiten, weil sie davon ausgehen, dass diese Punkte keine Links sind. Wieder andere gehen davon aus, dass die Top-Level-Links Seiten sind und versuchen, sie anzuklicken.

Dies führt zu den dritten und vierten nicht so tollen Mustern, denen Sie begegnen werden. Ich vermute, dass diese aus Versuchen entstanden sind, die Verwirrung zu kompensieren, die durch die ersten beiden Setups verursacht wurde.

3. Der Elternpunkt und der erste Untermenüpunkt verlinken zur selben Seite. Was die Sache noch schlimmer macht, ist, dass die Links des Elternpunkts und die Links des ersten Untermenüs unterschiedliche Link-Texte haben, was gegen einen WCAG 2.1 Level AA Barrierefreiheitsstandard verstößt.
4. Der Elternpunkt verlinkt zu einer Seite, die nutzlosen Füllinhalt oder nur die Links im Untermenü enthält. Die Seite selbst hat keinen wirklichen Zweck für jemanden, der sie besucht.

Diese letzten beiden Konfigurationen verschwenden Zeit für Leute, die wissen, dass die Elternpunkte Links mit redundantem oder nutzlosem Inhalt sind.

Hier ist ein Diagramm, das alle vier möglichen Hover-Menü-Setups zeigt.

Besucher sind durch Hover-Menüs vernünftigerweise verwirrt

Unabhängig davon, wie wir Hover-Menüs implementieren, können sich unsere Besucher vernünftigerweise fragen:

1. Kann ich die Elternpunkte anklicken?
2. Wird der Elternpunkt ein Link zur selben Seite sein wie der erste Untermenülink?
3. Auch wenn der Elternpunkt ein eindeutiger Link ist, lohnt es sich, ihn anzusehen?

Das lässt uns ohne gute Optionen zurück. Es macht es unmöglich, Jakobs Gesetz der Benutzerfreundlichkeit zu erfüllen, das besagt, dass „Benutzer bevorzugen, dass Ihre Website genauso funktioniert wie alle anderen Websites, die sie bereits kennen“. Es gibt keine Standardimplementierung bei Hover-Menüs, daher müssen wir etwas anderes tun, um eine konsistente Benutzererfahrung zu bieten.

Was ist mit „Split Button“-Menüs?

Wahrscheinlich der am wenigsten verbreitete Menütyp, den ich sehe, verwendet ein „Split Button“-Design, bei dem der Elternpunkt ein Link ist und ein separates Dropdown-Symbol das Menü öffnet und schließt. Das Standard-WordPress-Theme Twenty Fifteen verwendet dieses Muster. Da es so selten ist, stelle ich fest, dass Besucher oft den Link zur Top-Level-Seite übersehen, und Forschungsergebnisse deuten darauf hin, dass Benutzer ein Label und ein Symbol nicht als separat klickbar wahrnehmen.

Was also ist die bessere Option? Hier kommt das Klick-Menü!

Klick-Menüs zur Rettung

Anstatt sich auf die Hover-Interaktion oder eine andere „kreative“ (und verwirrende) Lösung zu verlassen, erstellen wir Menüs, bei denen Elternpunkte Schaltflächen sind, die Untermenüs beim Klicken anzeigen und ausblenden. Dies löst sofort das Problem der Hover-Menüs, da Klick-Menüs eindeutig funktionieren.

• Website-Besucher müssen auf den Elternpunkt klicken, um sein Untermenü anzuzeigen.
• Alle Links befinden sich in Untermenüs, mit Ausnahme von Top-Level-Punkten, die kein Untermenü haben (z. B. „Home“). Wir werden uns gleich damit befassen, was mit diesen Top-Level-Seiten passiert.

Wenn man darüber nachdenkt, sind Klick-Menüs eigentlich das, was wir in den meisten anderen Kontexten bereits erwarten

• Verwenden Sie ein Touch-Gerät? Hover ist dort nicht wirklich etwas.
• Verwenden Sie ein Anwendungsmenü (z. B. Datei, Bearbeiten usw.)? Diese erscheinen fast nie beim Hovern!
• Verwenden Sie etwas anderes als eine Maus? Das Drücken von ENTER oder das Aktivieren eines Links mit jeder Art von Switch-Steuerung ist eher äquivalent zum Klicken als :focus zu :hover.

Unabhängig von Ihrem Gerät oder Eingabemodus ist ein „Klick“ eine universellere und solidere Interaktion. Lassen Sie es uns nutzen, um unsere Website-Menüs großartig zu machen!

Umstellung auf Klick-Menüs

Mein Bauchgefühl sagt mir, dass viele Seiten kürzlich auf Klick-Menüs umgestiegen sind. Machen Sie mit! Da immer mehr Seiten umstellen, werden die Leute wieder einfache und nützliche Erwartungen entwickeln, wie „Websites funktionieren“ (und erfüllen damit Jakobs Gesetz).

Wenn Sie diese Umstellung vornehmen, ist es zwar wahr, dass einige Besucher immer noch Hover-Menüs erwarten könnten. Sie mögen sogar sagen, dass sie sie bevorzugen, wenn Sie sie fragen. Was ich Ihnen jedoch sagen kann, wenn ich beobachte, wie Leute Klick-Menüs benutzen, ist, dass jeder es schnell herausfindet und sich anpasst.

Und glauben Sie nicht nur meinem Wort! Die Navigationsmuster des U.S. Web Design Systems (USWDS) verwenden Klick-Menüs. Hier ist, was sie zu sagen haben:

Vermeiden Sie Hover, um Dropdown-Listen zu erweitern. Hover ist für einige Benutzer schwierig und funktioniert nicht auf Touchscreens. Dropdowns sollten per Klick oder mit Tastaturnavigation erweitert werden.

Bootstrap verwendet aus denselben Gründen auch Klick-Menüs.

Worauf es wirklich ankommt, ist die Benutzerabsicht. Der Zweck eines Hover-Zustands ist es, anzuzeigen, dass etwas klickbar ist (unterstrichener Text)... Der Zweck eines Klicks ist es, tatsächlich etwas zu tun, eine explizite Aktion durchzuführen. Das Öffnen eines Dropdowns ist eine explizite Aktion und sollte nur per Klick erfolgen.

Aus demselben Artikel gibt es diese großartige Perle:

Das Caret in einem Dropdown-Link ist das Äquivalent zur Unterstreichung eines Links: Es bietet eine gewisse Affordanz dafür, was passiert, wenn Sie dieses Element anklicken. Verwechseln Sie das aber nicht damit, genug Informationen zu liefern, um das Dropdown beim Hovern aufpoppen zu lassen.

Es ist also nicht so, dass wir hier unkartiertes Territorium erkunden. Und das UK.gov Design System hat eine weitere gute Erinnerung: Vielleicht brauchen Sie gar keine Untermenüs! Ihre Menüs sind einfach eine Liste von Links, die On-Page-Grids von Links und Akkordeons verwenden, um Besuchern die Navigation zu erleichtern. Selbst auf CSS-Tricks finden Sie keine Untermenüs!

Klick-Menüs bringen zusätzliche Vorteile!

Je mehr Sie mit Klick-Menüs arbeiten, desto mehr Vorteile entdecken Sie

• Sie entscheiden, ob Sie eine Kategorie-/Übersichts-/Landingpage benötigen... oder nicht! Anstatt Inhalte zu zwingen, um sie an die Struktur eines Menüs mit Links anzupassen, die übergeordnete Links sind, diktieren Ihre Content-Strategie und Informationsarchitektur, welche Arten von Seiten Sie benötigen und wie sie benannt sind. Wenn eine Übersicht Ihrer Dienstleistungen für Ihre Besucher hilfreich ist, fügen Sie „Dienstleistungsübersicht“ oder „Alle Dienstleistungen“ als erstes Element in Ihr „Dienstleistungen“-Untermenü ein.
• Untermenüs bleiben geöffnet, bis sie geschlossen werden. Hover-Menüs haben die unangenehme Angewohnheit, zu verschwinden, wenn die Leute mit dem Cursor darüberfahren oder sogar nur versuchen, auf einen Untermenülink zu klicken. Dies ist besonders der Fall bei Untermenüs, die „ausfahren“ und nicht unter dem Elternpunkt liegen. Die Persistenz von Klick-Menüs sorgt für ein „solideres“ Erlebnis, damit die Benutzer der Oberfläche vertrauen und nicht frustriert werden.
• Das persistente Untermenüverhalten ist für Megamenüs noch wichtiger. Wenn Besucher mehr Zeit benötigen, um den Inhalt des Untermenüs zu erfassen, können sie es sich nicht leisten, dass das Menü unerwartet schließt.
• Das JavaScript ist dasselbe für „mobile“ und „Desktop“-Menüs. Ob das Menü hinter einem Hamburger versteckt ist oder auf dem Handy sichtbar ist, die Interaktion ist immer die gleiche. Ich muss nur mein CSS ändern, um ein responsives Klick-Menü zu erstellen.

Klick-Menüs erstellen

Als ich mein eigenes barrierefreies Klick-Menü-Skript erstellen wollte, stellte ich fest, dass es keinen einzigen Standard dafür gab, wie man es macht. Meine eigenen Gedanken und mein Code wurden am stärksten beeinflusst von

• „Link + Disclosure Widget Navigation“ von Adrian Roselli
• „Header-Demo“ vom US Web Design Service
• „Menüdesign: Checkliste mit 15 UX-Richtlinien zur Unterstützung der Benutzer“ von Nielsen Norman Group
• „Beispiel-Disclosure-Navigationsmenü“ in ARIA Authoring Practices

Die wichtigsten Erkenntnisse aus meiner Forschung zur Implementierung:

• Das Element, das Sie anklicken, um das Untermenü anzuzeigen, sollte ein <button> sein, da es nicht zu einer Seite verlinkt.
• Verwenden Sie aria-expanded (auf dem <button>!), um die offenen und geschlossenen Zustände des Untermenüs zu kommunizieren.
• Verwenden Sie display: none oder visibility: hidden, damit Tastaturnutzer keine Untermenüs erreichen können, wenn diese geschlossen sind.
• aria-controls ist Mist, aber Sie können es trotzdem hinzufügen.
• Verwenden Sie nicht role="menu" (und das gesamte ARIA-Menüpattern) oder aria-haspopup. Diese scheinen verwandt zu sein, sind aber nicht zum Erstellen von Navigationsmenüs gedacht.
• Schließen Sie ein geöffnetes Untermenü, wenn
  • Ein anderes Untermenü geöffnet wird
  • Der Benutzer außerhalb des Menüs klickt
  • Der Benutzer die ESC-Taste drückt, wenn der Fokus innerhalb eines geöffneten Untermenüs liegt. (Nicht alle Benutzer erwarten das, aber ich finde, es ist eine nette Geste.)

Da Klick-Menüs JavaScript erfordern, sollten wir in Betracht ziehen, wie dieses Menü progressiv verbessert werden kann, falls JavaScript aus irgendeinem Grund fehlschlägt. Unser klassischer Hover-CSS-Trick ist nach all dem doch noch für etwas gut!

Ich beginne damit, mein Klick-Menü als reines CSS-Hover-Menü zu erstellen, das li:hover > ul und li:focus-within > ul verwendet, um die Untermenüs anzuzeigen. Dann verwende ich JavaScript, um die <button>-Elemente zu erstellen, die aria-Attribute festzulegen und die Ereignishandler hinzuzufügen. Das bedeutet, dass das Menü immer noch weitgehend ohne JavaScript funktioniert und gut mit rein Link-basierten Menüs funktioniert, die in WordPress, meinem bevorzugten CMS, erstellt wurden.

Sie können das Skript, das ich verwende, unten einsehen, aber ich werde der Erste sein, der zugibt, dass es wahrscheinlich bessere gibt. Wichtig ist, dass Sie es mit echten Benutzern testen… und aufhören, Hover-Menüs zu verwenden. 😃