Auswahl unter dem Cursor

[Chico_wau]

Hallo,

Anfängerfrage eines Neulings:

Ich möchte, wenn ich mit dem Cursor über die Elemente eines vertikalen Menus fahre, dass dann unter dem vertikalen Menuelement, auf dem sich der Cursor gerade befindet, ohne Cursorclick automatisch eine Auswahlliste erscheint. Wenn ich dann mit dem Cursor auf ein Element der Auswahlliste klicke, soll eine Auswahl getroffen worden sein. Hierzu suche ich entsprechende HTML Codierbeispiele. Wie heißt diese Funktion? Ich kann sie im Selfhtml Wiki nirgends finden. Wo muss ich suchen?

Danke für Eure Hilfe.

[Rolf B]

Hallo Chico_wau,

Stichwort: :hover Pseudoklasse, Fly-Out Menü

Unser Wiki:

• Navigationskonzepte
• Fly-Out-Menü

Für einen Neuling dürfte das eine Menge Zeug sein. Guck's Dir an, spiel damit rum, und stell gerne Fragen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

• Fly-Out-Menü

Der Artikel wird und wird nicht besser.

„Neben der Pseudoklasse :focus wird eine weitere Pseudoklasse :focus-within angegeben, die dafür sorgt, dass das Submenü eingeblendet bleibt, wenn sich der Fokus vom Listenelement weg zu den Listeneinträgen des Submenüs bewegt.“

Da :focus-within immer zutrifft, wenn :focus zutrifft, ist :focus überflüssig.

„Für Browser, die focus-within nicht verstehen muss die Regel getrennt werden, damit sie wenigstens auf focus oder hover reagieren.“

Es macht wenig Sinn, bei Browsern, die :focus-within nicht unterstützen, das Untermenü bei :focus aufzuklappen, wenn es sich doch sofort wieder schließt, sobald man versucht, zu einem darin befindlichlichen Link zu gelangen. Das Menü ist in diesen Browsern nicht bedienbar.

Der Artikel sollte mit dem Hinweis beginnen, dass Aufklappmenüs ohne JavaScript nicht vernünftig umsetzbar sind. Und damit kann der Artikel dann auch gleich aufhören.

LLAP 🖖

[marctrix]

Hej Gunnar,

„Neben der Pseudoklasse :focus wird eine weitere Pseudoklasse :focus-within angegeben, die dafür sorgt, dass das Submenü eingeblendet bleibt, wenn sich der Fokus vom Listenelement weg zu den Listeneinträgen des Submenüs bewegt.“

Da :focus-within immer zutrifft, wenn :focus zutrifft, ist :focus überflüssig.

Yep.

„Für Browser, die focus-within nicht verstehen muss die Regel getrennt werden, damit sie wenigstens auf focus oder hover reagieren.“

Es macht wenig Sinn, bei Browsern, die :focus-within nicht unterstützen, das Untermenü bei :focus aufzuklappen, wenn es sich doch sofort wieder schließt, sobald man versucht, zu einem darin befindlichlichen Link zu gelangen.

Yep.

Das Menü ist in diesen Browsern nicht bedienbar.

Jein. die erste Ebene ist schon bedienbar. Ein komplettes Navigationskonzept kann das berücksichtigen. Man sieht wieder immer häufiger auf Unterseiten das Menü statisch in die Website eingebunden, so dass die Menüebenen 2 bis x auf andere Weise als über das Hauptmenü zugänglich gemacht werden. Das hat diverse Vorteile, benötigt aber mehr Platz.

Jedenfalls wäre in einem solchen Fall der zugang zu allen Unterseiten möglich und entsprechend ist es in Ordnung, wenn nur die erste Ebene eines Navigationsmenüs erreichbar wäre.

Was ich mich aber frage: was für eine auswahlliste war gemeint? Sind das Checkboxen oder Rqadio-Buttons? Handelt es sich überhaupt um ein Navigationsmenü oder eher doch um ein Akkordeon o.ä.

Dann fände ich es schlecht, wenn gewählte Optionen durch (womöglich automatisches) zuklappen unsichtbar würden.

Marc

[Gunnar Bittersmann]

@@Rolf B

Stichwort: :hover Pseudoklasse

Nein. Das ist keine gute Antwort – auch und gerade für einen Neuling nicht. Wer erstmal anfängt, unbedienbares Zeug zu bauen, der wird es nie richtig lernen.

Das Stichwort heißt hier: JavaScript. Und wenn das einen Neuling noch überfordern sollte, dann heißt das Stichwort: erstmal kein Aufklappmenü.

LLAP 🖖

[Gunnar Bittersmann]

@@Chico_wau

Ich möchte, wenn ich mit dem Cursor über die Elemente eines vertikalen Menus fahre, dass dann unter dem vertikalen Menuelement, auf dem sich der Cursor gerade befindet, ohne Cursorclick automatisch eine Auswahlliste erscheint.

Ich nehme an, das soll nicht nur so sein, wenn du mit dem Cursor über die Elemente eines vertikalen Menus fährst, sondern auch, wenn andere das tun. Nur: manch andere haben gar keinen Cursor, weil sie gar keine Maus o.ä. Zeigegerät haben. Viele haben ein Touchscreen; wieder andere bedienen ihr System mit der Tastatur. Deshalb darf Hover nur eine mögliche Bedienung des Menüs sein, aber nicht die einzige.

Hierzu suche ich entsprechende HTML Codierbeispiele.

In diesem Codepen habe ich zwei mal zwei Varianten aufgeschrieben. Die ersten beiden davon (die mit :focus-within) funktionieren in etlichen Browsern nicht (darunter IE und auch noch Edge), sind also für die allgemeine Verwendung untauglich. Ein funktionstüchtiges Auflappmenü geht nur mit JavaScript. Eine Beschreibung gibt’s auch dazu.

Und ja, ich hab nicht überlesen, dass du die Hauptmenüpunkte nicht horizontal, sondern vertikal anordnen willst. Das sind nur kleine Änderungen im Stylesheet, bspw. Hinzufügen von nav ul { flex-direction: column }.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

wenn ich das richtig gesehen habe, verwendest du in deinem codepen aria-expand. Das w3c hat sich ja auch mir dem Thema beschäftigt:

• Navigation Menubar Example
• Fly-out Menus

Während das Fly-Out-Menü auch mit aria-Attributen arbeitet, werden im Navigation Menubar Example nur role-Attribute verwendet. Was ist denn nun richtig bzw. besser?

Ich finde die im Navigation Menubar Example verwendete Tastatursteuerung mit Pfeiltasten nicht intuitiv, ich würde immer versuchen, mich durchzutabben. Was soll man hier verwenden.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

• Navigation Menubar Example
• Fly-out Menus

Während das Fly-Out-Menü auch mit aria-Attributen arbeitet, werden im Navigation Menubar Example nur role-Attribute verwendet. Was ist denn nun richtig bzw. besser?

Ich finde die im Navigation Menubar Example verwendete Tastatursteuerung mit Pfeiltasten nicht intuitiv, ich würde immer versuchen, mich durchzutabben. Was soll man hier verwenden.

Wohl letzteres. Du warst doch an der Diskussion beteiligt.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

• Navigation Menubar Example
• Fly-out Menus

Während das Fly-Out-Menü auch mit aria-Attributen arbeitet, werden im Navigation Menubar Example nur role-Attribute verwendet. Was ist denn nun richtig bzw. besser?

Ich finde die im Navigation Menubar Example verwendete Tastatursteuerung mit Pfeiltasten nicht intuitiv, ich würde immer versuchen, mich durchzutabben. Was soll man hier verwenden.

Wohl letzteres. Du warst doch an der Diskussion beteiligt.

so richtig nicht, ich habe da eher nur etwas mitgelesen. Aber gerade noch mal reingeschaut und festgestellt, das das w3c noch eine Variante anbietet:

Navigation Treeview Example Using Computed Properties

Aber du würdest die Tastatursteuerung über die Tabulatortaste und role-Attribute empfehlen? Denn irgendwann muss ich meine Checkboxhack-Navigation durch etwas brauchbares ersetzen.

Gruß
Jürgen

[marctrix]

Hej JürgenB,

Aber du würdest die Tastatursteuerung über die Tabulatortaste und role-Attribute empfehlen? Denn irgendwann muss ich meine Checkboxhack-Navigation durch etwas brauchbares ersetzen.

Eine ungefragte zweite Meinung (sogar bevor die erste geäußert wurde): für Screenreader-Nutzer ist es bequemer mit den Pfeiltasten "abkürzen" zu können. Vorausgesetzt der Screenreader ist neu genug, sagt er ja an, dass diese Komponente so bedienbar ist.

Alle anderen Nutzer (und damit die große Mehrheit) dürften damit bisher überfordert sein. Vielleicht setzt sich das durch und die Nutzer lernen damit umzugehen. Im Moment verstehen sehende nutzer aber nicht, dass eine Navigation auf einer Website per Pfeiltasten bedienbar ist.

Marc

[JürgenB]

Hallo Marc,

wegen dieser "zweiten Meinung" habe ich mich ja hier mit eingeklinkt.

Woher wissen denn die Screenreader, das das Menü mit Pfeiltasten bedient werden kann, und mit welchen? So etwas wie horizontales oder vertikales Menü interessiert die doch gar nicht. Für Sehende wird aber die Rolle der links/rechts-Tasten mit der der hoch/runter-Tasten vertauscht.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Für Sehende wird aber die Rolle der links/rechts-Tasten mit der der hoch/runter-Tasten vertauscht.

?? Vertauscht?

LLAP 🖖

[JürgenB]

Hallo Gunnar,

?? Vertauscht?

ich sollte mir von Zeit zu Zeit die von mir als interessant markierten Threads ansehen.

Aber so nach und nach fällt mir jetzt wieder ein, warum ich das Update meines Menüs erst mal hinten angestellt habe. Die Versionen mit role=menu, role=treeview und mit aria-Attributen haben mich etwas verwirrt, und ich wollte wohl abwarten, was da noch so kommt.

Gruß
Jürgen

[marctrix]

Hej JürgenB,

Woher wissen denn die Screenreader, das das Menü mit Pfeiltasten bedient werden kann, und mit welchen?

Ich bin nicht der Screenreader-Experte, aber gerade dabei mich zu bessern. Habe gestern meine erste Lektion in VoiceOver gehabt.

Zumindest manchmal sind die Pfeile "rechts" und "runter" für "das nächste Element". Das ist aber vermutlich nicht immer so.

Ich denke, man wird rauf und runter zum Wechseln der Ebenen verwenden können, links und rechts für "vorwärts" und "rückwärts" oder so.

Funktioniert das eigentlich für Sehende, dass man einen Menüpunkt links (statt wie üblich rechts) ausfahren lässt und man muss dann die linke Pfeiltaste benutzen? Ich hätte jetzt erwartet, dass auch für Sehende die Taste "rechtspfeil" für "weiter zum nächsten Menüeintrag" steht und nicht für links oder rechts.

Dann (und nur dann) kann der Browser dieses Verhalten auch automatisch anpassen für right-to-left-Lesende (arabisch, hebräisch...)

Falls ich dran denke, berichte ich weiter, wenn ich fitter bin in VoiceOver…

Marc

[JürgenB]

Hallo Marc,

also für mich (als sehenden Mausschuppser) sind die Pfeiltasten links/rechts für die Bewegung des Focus nach links oder rechts, und rauf/runter für die Bewegung nach oben oder unten.

Wenn ein Menü seine Ausrichtung ändert bleibt, die optische Bedeutung der Pfeiltasten erhalten, nicht aber die logische. Daher tendiere ich momentan eher zu einem reinem durchtabben, wobei geschlossene Untermenüs übersprungen werden und sich nicht automatisch öffnen wie bei Mausover, sondern erst nach Leertaste oder Return.

Gruß
Jürgen

PS @Chico_wau
Du solltest dich hier ruhig einmischen. Ich wollte „deinen Thread“ nicht kapern. ich habe mich hier nur eingehängt, da mich das Thema „Zugängliche Seitennavigation“ schon lange beschäftigt, ohne das ich da bisher zu einem zufriedenstellenden Ergebnis gekommen bin. Mir geht es da wie Hans Dieter Hüsch (Zitat aus dem Gedächtnis): „Je weniger ich von einer Sache weiß, desto mehr beschäftige ich mich damit; je mehr ich mich mit der Sache beschäftige, desto weniger weiß ich davon; so daß ich zum Schluss garnichts mehr davon weiß.“