nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
JürgenB
Gunnar Bittersmann
Gunnar Bittersmann
JürgenB
JürgenB
In den WAI-ARIA Practices 1.1 findet man dieses Navigation Treeview Example, worin gezeigt wird, wie man ein Aufklapp-Menü barrierefrei umsetzt. ARIA-Attribute ✔︎ Tastaturbedienung ✔︎
Die Liste meiner noch zu schreibenden Blogartikel wird länger und länger … 🤔
LLAP 🖖
hallo
In den WAI-ARIA Practices 1.1 findet man dieses Navigation Treeview Example, worin gezeigt wird, wie man ein Aufklapp-Menü barrierefrei umsetzt. ARIA-Attribute ✔︎ Tastaturbedienung ✔︎
Hast du beachtet, dass das dortige Example Foods kaputt ist?
@@beatovich
Hast du beachtet, dass das dortige Example Foods kaputt ist?
Nichts dergleichen bemerkt. Was sollte denn kaputt sein?
LLAP 🖖
hallo
@@beatovich
Hast du beachtet, dass das dortige Example Foods kaputt ist?
Nichts dergleichen bemerkt. Was sollte denn kaputt sein?
Es reagiert nicht wie erwartet auf die Tab Taste. Die Verwendung der Pfeiltasten wird nicht indiziert.
@@beatovich
Es reagiert nicht wie erwartet auf die Tab Taste. Die Verwendung der Pfeiltasten wird nicht indiziert.
Du irrst.
“A primary keyboard navigation convention common across all platforms is that the tab and shift+tab keys move focus from one UI component to another while other keys, primarily the arrow keys, move focus inside of components that include multiple focusable elements.” (WAI-ARIA Authoring Practices 1.1, §5.1 Fundamental Keyboard Navigation Conventions)
LLAP 🖖
Hallo Gunnar,
bei mir als User ist diese Konvention noch nicht angekommen. Mich hat das Tabulatorverhalen auch irritiert.
Gruß
Jürgen
Hallo JürgenB,
bei mir als User ist diese Konvention noch nicht angekommen. Mich hat das Tabulatorverhalen auch irritiert.
Benutzt du denn tatsächlich die Tastatur, um UI-Komponenten zu bedienen?
Denn das ist eigentlich das Standard-Verhalten der UIs unter macOS und Linux. Früher auch unter Windows, wie es heute ist weiss ich allerdings nicht.
LG,
CK
Hallo Christian,
selten. Die Bedienung mit den Pfeiltasten war für mich aber sofort intuitiv, was mich verwirrt hat, war das Verlassen des Menüs mit dem Tabulator. Da habe ich erwartet, einen Hauptmenüpunkt weiter zu kommen. Aber hier ist wohl die Frage: ist jeder Hauptmenüpunkt ein eigenes UI?
Eine Nachfrage dazu: Wenn das Menü horizontal angeordnet ist und die Untermenüs dann nach unten aufgehen, muss man doch die Funktion der Pfeiltasten vertauschen.
Gruß
Jürgen
@@JürgenB
Eine Nachfrage dazu: Wenn das Menü horizontal angeordnet ist und die Untermenüs dann nach unten aufgehen, muss man doch die Funktion der Pfeiltasten vertauschen.
Ja. Siehe WAI-ARIA Authoring Practices 1.1, §3.24 Tree View:
“If the nodes in a tree are arranged horizontally:
A. Down Arrow performs as Right Arrow is described above, and vice versa.
B. Up Arrow performs as Left Arrow is described above, and vice versa.”
LLAP 🖖
hallo
@@beatovich
Es reagiert nicht wie erwartet auf die Tab Taste. Die Verwendung der Pfeiltasten wird nicht indiziert.
Du irrst.
Dem Anwender, dessen Erwartungen durch Konventionen geschult wurden, irrtum vorzuwerfen, weil er etwas nicht auf Anhieb versteht, ist kein gutes Argument.
Meine Konventionen sind durch das Standard Browserverhalten geprägt. Die Tab Taste wechselt zwischen im DOM benachbarten fokusierbaren Elementen. Fokusierbarkeit ist etwas, das ich erwarte bei interaktiven Elementen. Das Versagen, ursprünglich interaktive Elemente im Code zu verwenden, ist das Problem dieses Widgets.
Du selbst bist einer, der immer wieder dazu aufruft, ursprüngliche interaktive Elemente zu verwenden, statt solche nachbauen zu wollen.
@@beatovich
Meine Konventionen sind durch das Standard Browserverhalten geprägt.
CK sprach es an, dass man da durchaus über die Grenzen des Browsers hinweg denken sollte.
Und die hier relevanten Konventionen sind die derer, die ständig per Tastatur navigieren, nicht derer, die das mal zum Testen der Funktionstüchtigkeit tun.
Die Tab Taste wechselt zwischen im DOM benachbarten fokusierbaren Elementen.
Das macht schon Sinn, dass die Tab-Taste das nicht tut, sondern zwischen Komponenten wechselt. Ansonsten würde man sich ja dumm und dämlich tabben … (☞ schlechtes Beispiel)
Innerhalb einer Komponente Pfeiltasten. Wenn das so Konvention ist, sollte man auch seine Webanwendungen so bauen.
LLAP 🖖
hallo
@@beatovich
Meine Konventionen sind durch das Standard Browserverhalten geprägt.
CK sprach es an, dass man da durchaus über die Grenzen des Browsers hinweg denken sollte.
Dagegen spricht ja nichts.
Und die hier relevanten Konventionen sind die derer, die ständig per Tastatur navigieren, nicht derer, die das mal zum Testen der Funktionstüchtigkeit tun.
seufz
Die Tab Taste wechselt zwischen im DOM benachbarten fokusierbaren Elementen.
Das macht schon Sinn, dass die Tab-Taste das nicht tut, sondern zwischen Komponenten wechselt.
Komponente ist kein technisch fassbarer Begriff!
Ansonsten würde man sich ja dumm und dämlich tabben … (☞ schlechtes Beispiel)
Das geschieht gerne, wenn man subtrees visuell verbirgt und gleichzeitig fokusierbar halten möchte. Das ist kein von mir unterstütztes Design.
Innerhalb einer Komponente Pfeiltasten. Wenn das so Konvention ist, sollte man auch seine Webanwendungen so bauen.
Komponente ist kein technischer Begriff.
Die Konvention beschränkt sich technisch auf input type=radio Gruppen, select options bzw inputs mit assoziierter Datalist.
@@beatovich
Komponente ist kein technischer Begriff.
Nicht?
Ich würde soetwas wie ein Menü schon als Komponente ansehen. Oder Tabs, in welchen ebenfalls mit Pfeiltasten navigiert wird. (Abschnitt Keyboard Behavior in „Tabbed Interfaces“)
Die Konvention beschränkt sich technisch auf input type=radio Gruppen, select options bzw inputs mit assoziierter Datalist.
Nein. Die WAI-ARIA Authoring Practices 1.1 hatte ich doch schon oft genug verlinkt. Deren Autoren sind bestimmt keine Dummköpfe, die anderen ihre unsinnigen Konventionen aufzwingen wollen.
LLAP 🖖
hallo
@@beatovich
Komponente ist kein technischer Begriff.
Nicht?
Ich würde soetwas wie ein Menü schon als Komponente ansehen. Oder Tabs, in welchen ebenfalls mit Pfeiltasten navigiert wird. (Abschnitt Keyboard Behavior in „Tabbed Interfaces“)
Hmm, mein Browser kennt Tabs. Leider gibt es keine tastenkombination mit Pfeiltasten, welche zwischen den Tabs wechselt.
Ich kenne den Begriff TAB sonst nur im Zusammenhang mit der Tab-Taste. Der Browser hat ein spezifisches Standardverhalten. Daraus kommen Erwartungen. Der Browser hat dabei keinerlei Bewusstsein für das, was du als Komponente bezeichnest.
Die Konvention beschränkt sich technisch auf input type=radio Gruppen, select options bzw inputs mit assoziierter Datalist.
Nein. Die WAI-ARIA Authoring Practices 1.1 hatte ich doch schon oft genug verlinkt. Deren Autoren sind bestimmt keine Dummköpfe, die anderen ihre unsinnigen Konventionen aufzwingen wollen.
Dumm ist nur, die Intelligenz anderer als Argument zu verwenden.
@@beatovich
Ich kenne den Begriff TAB sonst nur im Zusammenhang mit der Tab-Taste.
“Tab is not for tabs, which I concede is a bit confusing. I wish the key and the control had different names, but alas.” — Das hast du doch gerade eben erst gelesen‽
Dumm ist nur, die Intelligenz anderer als Argument zu verwenden.
Allemal besser, als die eigene Dummheit als Argument zu verwenden.
LLAP 🖖
@@Ursa Major
das kannst aber auch einfacher haben mittels serverseitiger Technik.
Auch unter neuem Namen machst du mit deiner alten Unsitte weiter, jeden meiner Threads mit dummem Gewäsch zu kapern‽ Wenn du nichts zu sagen hast, solltest du dies nicht in einem Posting tun.
LLAP 🖖
Hallo Gunnar,
Auch unter neuem Namen machst du mit deiner alten Unsitte weiter, jeden meiner Threads mit dummem Gewäsch zu kapern‽ Wenn du nichts zu sagen hast, solltest du dies nicht in einem Posting tun.
Oh - war mir gar nicht aufgefallen, hab zur Zeit ziemlich viel zu tun und bin deshalb wenig hier unterwegs… Danke für den Hinweis.
LG,
CK
@@Christian Kruse
Oh - war mir gar nicht aufgefallen
Ich dachte auch erst, das Posting wäre ein Scherz und die Große Bärin wäre jemand, der sich über Hotti lustig macht.
LLAP 🖖
Auch unter neuem Namen machst du mit deiner alten Unsitte weiter, jeden meiner Threads mit dummem Gewäsch zu kapern‽ Wenn du nichts zu sagen hast, solltest du dies nicht in einem Posting tun.
Ich sehe schon lange ein gewisses Restpotential (1%), dass es sich bei Hotti um einen der besten Trolle handelt, die das Netz je hatte.
Was bitte spricht denn gegen eine serverseitige Technik!?
Ich bitte um eine Begründung!
@@Ursa Major
Was bitte spricht denn gegen eine serverseitige Technik!?
Nichts. Außer dass das total am Thema vorbei geht, welches hier die clientseitige Präsentation[1] eines verschachtelten Menüs (Baumstruktur) ist.
LLAP 🖖
Und damit ist nicht nur die visuelle Präsentation gemeint. ↩︎
Hallo,
Und damit ist nicht nur die visuelle Präsentation gemeint.
so, was denn noch!?
all das, was du nicht brauchst, wenn du dein verschachteltes Pull-down-Menü serverseitig implementierst. 😉
Gruß
Jürgen
Hallo Gunnar,
ich habe mir das Menü mal etwas genauer angesehen und kann mir vorstellen, den Nachfolger für mein aktuelles Checkbox-Hack-Menü auf diesem aufzubauen. Dieses Menü verwendet aber LIs als klick-, tab- oder fokussierbare Elemente. Mir als sehenden ist das egal, aber wie gehen da Vorlesebrowser mit um?
Gruß
Jürgen
@@JürgenB
Dieses Menü verwendet aber LIs als klick-, tab- oder fokussierbare Elemente.
Dieses Menü verwendet die Elementstruktur, wie man sie für ein statisches Menü ohne pull-down verwenden würde (verschachtelte Liste). Abgesehen von den spans – braucht man die überhaupt?
Ein-/Ausklappen als progressive enhancement.
Mir als sehenden ist das egal, aber wie gehen da Vorlesebrowser mit um?
Sie sollten die vorhandenen ARIA-Attribute (wie role="treeitem") interpretieren.
LLAP 🖖
In den WAI-ARIA Practices 1.1 findet man dieses Navigation Treeview Example, worin gezeigt wird, wie man ein Aufklapp-Menü barrierefrei umsetzt. ARIA-Attribute ✔︎ Tastaturbedienung ✔︎
Hab heute für einen Kunden ausnahmsweise nochmal eine Web-Navigation bauen müssen und habe das zum Anlass genommen diese Lösung mal auszuprobieren. Mein Fazit ist durchweg positiv, einfache Integration und hervorragendes Ergebnis. Danke hierfür Gunnar und gerne mehr davon.
Die Liste meiner noch zu schreibenden Blogartikel wird länger und länger
Isso. Die Liste dessen, was man gerne wissen würde, wächst mit jeder neuen Erkenntnis. Und das gewiss nicht linear.
@@ursus contionabundo
Isso. Die Liste dessen, was man gerne wissen würde, wächst mit jeder neuen Erkenntnis. Und das gewiss nicht linear.
Zum Glück wächst mit jeder neuen Erkenntnis auch die Liste dessen, was man nicht gern wissen würde. 😉
LLAP 🖖
