it-swarm.com.de

Mega-Menüs für Tastaturbenutzer zugänglich machen

Hier ist die Situation. Eine große Unternehmenswebsite verfügt über ein Mega-Menü in der primären Navigation. Die Seitenbereiche der sekundären Ebene sind in dieser Dropdown-Liste verfügbar (in diesem Beispiel sind die sekundären Ebenen "Menü eins" und "Menü zwei"). Es gibt auch ausgewählte Tertiärstufen aus diesen Abschnitten, die in der Dropdown-Liste angezeigt werden ('one-a', 'one-b' usw.). Auf diese Weise können Sie von überall auf der Site direkt zu ausgewählten Tertiärseiten navigieren, alles gut und schön. Die vollständige Navigation (primäre und sekundäre Ebene) ist auch in der Fußzeile der Website verfügbar

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Das Problem hierbei ist jedoch die Zugänglichkeit . Die Tastaturnavigation dieser Art der Navigation bedeutet, dass sie die Dropdown-Menüs für die Navigation nicht öffnen können, um untere Bereiche auszuwählen (sie öffnen sich beim Bewegen der Maus). Die einzigen über die Tastatur auswählbaren Elemente sind die primären Navigationsoptionen (Nav 1, Nav 2, Nav 3 usw.). . Wenn Sie dies auswählen, wird eine Art Zielseite für dieses Element geöffnet, aber die Zielseiten enthalten nicht alle verfügbaren Links. nur einige Schlagzeilen-Werbeartikel. Die vollständige Navigation über die Tastatur ist nur über die Navigation in der Fußzeile möglich. Die Fußzeile befindet sich jedoch (offensichtlich) ganz unten auf der Seite. Es wird viel Inhalt innerhalb des Hauptteilinhalts geben, so dass die Tabulatorreihenfolge bedeutet, dass Tastaturbenutzer nicht einfach auf die Navigation der Site zugreifen können.

Also, was sind meine Optionen hier.

  1. Sag, scheiß drauf; Wer verwendet Tastaturen, um in der heutigen Zeit zu navigieren (keine ideale Antwort)
  2. Ändern Sie die Tab-Reihenfolge so, dass die Fußzeilen-Links als erstes ausgewählt werden, wenn Sie Tabs verwenden (dies ist ein unerwartetes Verhalten, daher nicht wirklich wünschenswert).
  3. Erzwingen Sie, dass die gesamte Website-Strategie geändert wird, um Links auf diesen Zielseiten für alle unteren Kategorien aufzunehmen, nur zum Nutzen von Benutzern, die nur über die Tastatur verfügen (Keine Ahnung zu den Nutzungszahlen von Personen, die nur über die Tastatur surfen, würde ich nehme an dies ist eine sehr kleine Zahl, aber ich möchte mich nicht auf diese Annahme verlassen)
  4. Sonstiges - Sicher gibt es etwas Besseres als die oben genannten Optionen

Hinweis: Ich mache mir keine Sorgen um Screenreader. Die Navigation wird korrekt konfiguriert, damit sie für diese Art von Benutzern verfügbar ist. Dieses Problem zielt hauptsächlich auf die Zugänglichkeit von Tastaturbenutzern ab.

12
JonW

Ich denke, Ihre beste Option ist die Implementierung der Tastaturnavigation. Sie können es ziemlich einfach tun, obwohl es einige Fallstricke gibt, die Sie umgehen müssen. Ich habe es gemacht, wo man mit den Pfeiltasten und der Tabulatortaste auf der Tastatur durch alle Menüs navigieren kann. (Leider ist das Beispiel, das ich Ihnen zeigen würde, durch schlechtes Outsourcing in Übersee so gut wie zerstört ... seufz ...)

Sie müssen sich hauptsächlich mit Fokusereignissen befassen, um die Tastatur aufzunehmen.

Beachten Sie, dass Touch-Geräte ein weiteres Ärgernis bei Hover-basierten Menüs sind. Viele können es auf unterschiedliche Weise aufnehmen (iOS erfordert zum Beispiel manchmal ein doppeltes Tippen), aber ich würde auch sicherstellen, dass sie sich durch Klicken/Tippen öffnen und schweben.

Option 4 ist aus UX-Sicht noch mehr eine gute Idee als die Barrierefreiheit.

Das Problem mit Links in Pulldown-/Mega-Menüs ist, dass sie nicht leicht sichtbar sind. Ein Benutzer kann leicht vergessen, welche anderen Optionen es gab (außer Sicht, außer Verstand). Es ist wahrscheinlich eine gute Idee, die Unterkategorien auf diesen internen Seiten aufzulisten, damit Benutzer ihre Optionen einfach scannen und sich leichter auf der Website "orientieren" können.

Schließlich bevorzugen viele Leute die Tastaturnavigation (keineswegs die Mehrheit, aber viele Power-Typer/Programmierer wie Leute meiden die Maus, wann immer sie können). Es gibt auch viele Leute, die auf unterstützende Zeigegeräte angewiesen sind ... normalerweise Menschen mit großen und kleinen motorischen Problemen, also tun Sie ihnen einen großen Gefallen, wenn Sie können.

4
DA01

Schauen Sie sich das Megamenü an, das in dem von der kanadischen Regierung entwickelten Web Experience-Toolkit implementiert ist. Dies ist über Tastatur und Maus gleichermaßen zugänglich. Das Menü verwendet RIA und jQuery. Wenn das Menü den Fokus erhält, können die Pfeile verwendet werden, um sich durch Menüstrukturen zu bewegen. Die Pfeile nach rechts und links bewegen sich durch die Menüs der obersten Ebene. Escape kann verwendet werden, um ein Menü zu schließen. Durch Drücken der Tabulatortaste in einem Menü der obersten Ebene wird Ihr Fokus aus der Menüstruktur verschoben. Die URL für dieses Projekt lautet: http://ircan-rican.gc.ca/projects/wet-boew-menubar

2
David Farough

Nun, ich habe eine Idee, die funktionieren könnte:

Für Sehbehinderte :

Behalten Sie das primäre Menü als ungeordnete Liste und Dropdown-Menü bei, da Sie normalerweise in HTML codieren, auf das über Tastaturregisterkarten zugegriffen werden kann. Machen Sie jetzt all diese Navigation versteckt. Die normalen Benutzer der Website verwenden sie also wie gewohnt mit der Maus.

Die Tastaturnavigation funktioniert jetzt perfekt für Sehbehinderte.

Nachteile : Die Tastaturnavigation muss alle inneren Elemente durchlaufen, die sekundär und tertiär sind. Wenn Sie sie beenden, wird sie nur zur primären Navigation verschoben.

1
Pratheep ch

Das Design kann geändert werden, um die Menüanzeige für das Ereignis onfocus() auszulösen.

Siehe diese Accessible jQuery UI-Demo Ich bin vor ein paar Monaten auf diese gestoßen, die vollständig tastaturfreundlich ist, sogar das Bildkarussell , Schieberegler, Menüregisterkarten, etc.

Ich benutze Pfeiltasten, um Menügeschwister zu durchlaufen, und Tabulatoren, um die Menühierarchie abzusteigen oder aufzusteigen.

Zugegeben, es ist kein Mega-Menü, aber es kann an Ihr Design angepasst werden.

1
msanford

Die Web Accessibility Initiative (WAI) schlägt " Verwenden eines erweiterbaren und reduzierbaren Menüs zum Umgehen von Inhaltsblöcken " durch Klicken und nicht mit der Maus vor, um auf Inhaltsblöcke zuzugreifen oder diese zu überspringen. Die Seite enthält Codebeispiele und zugehörige Informationen zu ähnlichen Themen.

Beschreibung

Mit dieser Technik können Benutzer wiederholtes Material überspringen, indem sie dieses Material in ein Menü einfügen, das unter Benutzersteuerung erweitert oder reduziert werden kann. Der Benutzer kann das wiederholte Material überspringen, indem er das Menü reduziert. Der Benutzer ruft ein Benutzeroberflächensteuerelement auf, um die Elemente des Menüs auszublenden oder zu entfernen. Im Abschnitt Ressourcen werden verschiedene Techniken für Menüs, Symbolleisten und Bäume aufgeführt, von denen jede einen Mechanismus zum Überspringen der Navigation bereitstellen kann. Hinweis: Ähnliche Ansätze können mithilfe von serverseitigem Scripting und neuem Laden einer geänderten Version der Webseite implementiert werden.[1]

Höchstwahrscheinlich müssten Sie die gesamte Menüstruktur neu schreiben. Wir möchten jedoch so viele wie möglich in unsere Website aufnehmen und hohe Bewertungen für Barrierefreiheitsmessungen erhalten.

([1]http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR28

1
Benny Skogberg

Sie können die Microsoft-Methode implementieren: In jedem Menüelement ist ein wenig unterstrichenes Zeichen anzugeben, das das accesskey angibt. Dies erfordert viel JS'ing des Zugriffsschlüssels hin und her, da Zugriffsschlüssel nur einmal verwendet werden können, selbst wenn die anderen Verwendungen verborgen sind.

Öffnen Sie Word (nicht 2007/2010) und versuchen Sie, über die Tastatur zu navigieren. Wenn Sie daran gewöhnt sind, ist es ziemlich einfach, nur die Alts zu verwenden.

0
Manishearth