Wie man ein verschachteltes Pull-down-Menü implementiert – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Wie man ein verschachteltes Pull-down-Menü implementiert Mon, 26 Nov 18 18:47:28 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737157#m1737157 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737157#m1737157 <p>In den <em lang="en">WAI-ARIA Practices 1.1</em> findet man dieses <a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html" rel="nofollow noopener noreferrer">Navigation Treeview Example</a>, worin gezeigt wird, wie man ein Aufklapp-Menü barrierefrei umsetzt. ARIA-Attribute ✔︎ Tastaturbedienung ✔︎</p> <p>Die Liste meiner noch zu schreibenden Blogartikel wird länger und länger … </p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Mon, 26 Nov 18 20:08:33 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737159#m1737159 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737159#m1737159 <p>hallo</p> <blockquote> <p>In den <em lang="en">WAI-ARIA Practices 1.1</em> findet man dieses <a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html" rel="nofollow noopener noreferrer">Navigation Treeview Example</a>, worin gezeigt wird, wie man ein Aufklapp-Menü barrierefrei umsetzt. ARIA-Attribute ✔︎ Tastaturbedienung ✔︎</p> </blockquote> <p>Hast du beachtet, dass das dortige <em>Example Foods</em> kaputt ist?</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 07:54:19 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737172#m1737172 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737172#m1737172 <p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a></p> <p>das kannst aber auch einfacher haben mittels <a href="http://rolfrost.de/find?all=1" rel="nofollow noopener noreferrer">serverseitiger Technik</a>.</p> <p>MfG</p> Wie man ein verschachteltes Pull-down-Menü implementiert Wed, 28 Nov 18 08:31:08 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737257#m1737257 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737257#m1737257 <p>Hallo Gunnar,</p> <p>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?</p> <p>Gruß<br> Jürgen</p> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 11 Dec 18 17:55:15 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1738270#m1738270 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1738270#m1738270 <blockquote> <p>In den <em lang="en">WAI-ARIA Practices 1.1</em> findet man dieses <a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html" rel="nofollow noopener noreferrer">Navigation Treeview Example</a>, worin gezeigt wird, wie man ein Aufklapp-Menü barrierefrei umsetzt. ARIA-Attribute ✔︎ Tastaturbedienung ✔︎</p> </blockquote> <p>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.</p> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 11 Dec 18 18:05:54 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1738272#m1738272 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1738272#m1738272 <blockquote> <p>Die Liste meiner noch zu schreibenden Blogartikel wird länger und länger</p> </blockquote> <p>Isso. Die Liste dessen, was man gerne wissen würde, wächst mit jeder neuen Erkenntnis. Und das gewiss nicht linear.</p> Wie man ein verschachteltes Pull-down-Menü implementiert Mon, 26 Nov 18 20:42:34 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737162#m1737162 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737162#m1737162 <p>@@beatovich</p> <blockquote> <p>Hast du beachtet, dass das dortige <em>Example Foods</em> kaputt ist?</p> </blockquote> <p>Nichts dergleichen bemerkt. Was sollte denn kaputt sein?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Mon, 26 Nov 18 20:43:50 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737163#m1737163 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737163#m1737163 <p>hallo</p> <blockquote> <p>@@beatovich</p> <blockquote> <p>Hast du beachtet, dass das dortige <em>Example Foods</em> kaputt ist?</p> </blockquote> <p>Nichts dergleichen bemerkt. Was sollte denn kaputt sein?</p> </blockquote> <p>Es reagiert nicht wie erwartet auf die Tab Taste. Die Verwendung der Pfeiltasten wird nicht indiziert.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 07:12:45 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737171#m1737171 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737171#m1737171 <p>@@beatovich</p> <blockquote> <p>Es reagiert nicht wie erwartet auf die Tab Taste. Die Verwendung der Pfeiltasten wird nicht indiziert.</p> </blockquote> <p>Du irrst.</p> <p>“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, <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav" rel="nofollow noopener noreferrer">§5.1 Fundamental Keyboard Navigation Conventions</a>) </p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 08:00:03 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737173#m1737173 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737173#m1737173 <p>Hallo Gunnar,</p> <p>bei mir als User ist diese Konvention noch nicht angekommen. Mich hat das Tabulatorverhalen auch irritiert.</p> <p>Gruß<br> Jürgen</p> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 10:11:38 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737196#m1737196 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737196#m1737196 <p>hallo</p> <blockquote> <p>@@beatovich</p> <blockquote> <p>Es reagiert nicht wie erwartet auf die Tab Taste. Die Verwendung der Pfeiltasten wird nicht indiziert.</p> </blockquote> <p>Du irrst.</p> </blockquote> <p>Dem Anwender, dessen Erwartungen durch Konventionen geschult wurden, irrtum vorzuwerfen, weil er etwas nicht auf Anhieb versteht, ist kein gutes Argument.</p> <p>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.</p> <p>Du selbst bist einer, der immer wieder dazu aufruft, ursprüngliche interaktive Elemente zu verwenden, statt solche nachbauen zu wollen.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:11:59 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737178#m1737178 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737178#m1737178 <p>@@Ursa Major</p> <blockquote> <p>das kannst aber auch einfacher haben mittels <a href="http://rolfrost.de/find?all=1" rel="nofollow noopener noreferrer">serverseitiger Technik</a>.</p> </blockquote> <p>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.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 08:37:19 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737174#m1737174 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737174#m1737174 <p>Hallo JürgenB,</p> <blockquote> <p>bei mir als User ist diese Konvention noch nicht angekommen. Mich hat das Tabulatorverhalen auch irritiert.</p> </blockquote> <p>Benutzt du denn tatsächlich die Tastatur, um UI-Komponenten zu bedienen?</p> <p>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.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:10:57 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737177#m1737177 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737177#m1737177 <p>Hallo Christian,</p> <p>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?</p> <p>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.</p> <p>Gruß<br> Jürgen</p> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 10:24:20 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737198#m1737198 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737198#m1737198 <p>@@JürgenB</p> <blockquote> <p>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.</p> </blockquote> <p>Ja. Siehe <em lang="en">WAI-ARIA Authoring Practices 1.1</em>, <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView" lang="en" rel="nofollow noopener noreferrer">§3.24 Tree View</a>:</p> <p>“If the nodes in a tree are arranged horizontally:<br> A. Down Arrow performs as Right Arrow is described above, and vice versa.<br> B. Up Arrow performs as Left Arrow is described above, and vice versa.” </p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:16:25 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737180#m1737180 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737180#m1737180 <p>Hallo Gunnar,</p> <blockquote> <p>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.</p> </blockquote> <p>Oh - war mir gar nicht aufgefallen, hab zur Zeit ziemlich viel zu tun und bin deshalb wenig hier unterwegs… Danke für den Hinweis.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:17:31 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737181#m1737181 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737181#m1737181 <blockquote> <p>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.</p> </blockquote> <p>Ich sehe schon lange ein gewisses Restpotential (1%), dass es sich bei Hotti um einen der besten Trolle handelt, die das Netz je hatte.</p> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:21:23 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737182#m1737182 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737182#m1737182 <p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a></p> <p>Was bitte spricht denn gegen eine serverseitige Technik!?</p> <p>Ich bitte um eine Begründung!</p> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:49:04 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737189#m1737189 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737189#m1737189 <p>@@Christian Kruse</p> <blockquote> <p>Oh - war mir gar nicht aufgefallen</p> </blockquote> <p>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.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:32:24 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737184#m1737184 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737184#m1737184 <p>@@Ursa Major</p> <blockquote> <p>Was bitte spricht denn gegen eine serverseitige Technik!?</p> </blockquote> <p>Nichts. Außer dass das total am Thema vorbei geht, welches hier die clientseitige Präsentation<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> eines verschachtelten Menüs (Baumstruktur) ist.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Und damit ist nicht nur die visuelle Präsentation gemeint. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:39:54 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737185#m1737185 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737185#m1737185 <p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a></p> <blockquote> <p>Und damit ist nicht nur die visuelle Präsentation gemeint.</p> </blockquote> <p>so, was denn noch!?</p> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:45:45 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737188#m1737188 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737188#m1737188 <p>Hallo,</p> <blockquote> <blockquote> <p>Und damit ist nicht nur die visuelle Präsentation gemeint.</p> </blockquote> <p>so, was denn noch!?</p> </blockquote> <p>all das, was du nicht brauchst, wenn du dein verschachteltes Pull-down-Menü serverseitig implementierst. </p> <p>Gruß<br> Jürgen</p> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 09:58:26 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737192#m1737192 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737192#m1737192 <p>So isses, Danke.</p> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 10:39:32 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737199#m1737199 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737199#m1737199 <p>@@beatovich</p> <blockquote> <p>Meine Konventionen sind durch das Standard Browserverhalten geprägt.</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737174#m1737174" rel="noopener noreferrer">CK sprach es an</a>, dass man da durchaus über die Grenzen des Browsers hinweg denken sollte.</p> <p>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.</p> <blockquote> <p>Die Tab Taste wechselt zwischen im DOM benachbarten fokusierbaren Elementen.</p> </blockquote> <p>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 … (☞ <a href="https://codepen.io/gunnarbittersmann/pen/LgZjrb" rel="noopener noreferrer">schlechtes Beispiel</a>)</p> <p>Innerhalb einer Komponente Pfeiltasten. Wenn das so Konvention ist, sollte man auch seine Webanwendungen so bauen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 11:00:57 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737201#m1737201 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737201#m1737201 <p>hallo</p> <blockquote> <p>@@beatovich</p> <blockquote> <p>Meine Konventionen sind durch das Standard Browserverhalten geprägt.</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737174#m1737174" rel="noopener noreferrer">CK sprach es an</a>, dass man da durchaus über die Grenzen des Browsers hinweg denken sollte.</p> </blockquote> <p>Dagegen spricht ja nichts.</p> <blockquote> <p>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.</p> </blockquote> <p>seufz</p> <blockquote> <blockquote> <p>Die Tab Taste wechselt zwischen im DOM benachbarten fokusierbaren Elementen.</p> </blockquote> <p>Das macht schon Sinn, dass die Tab-Taste das nicht tut, sondern zwischen Komponenten wechselt.</p> </blockquote> <p>Komponente ist kein technisch fassbarer Begriff!</p> <blockquote> <p>Ansonsten würde man sich ja dumm und dämlich tabben … (☞ <a href="https://codepen.io/gunnarbittersmann/pen/LgZjrb" rel="noopener noreferrer">schlechtes Beispiel</a>)</p> </blockquote> <p>Das geschieht gerne, wenn man subtrees visuell verbirgt und gleichzeitig fokusierbar halten möchte. Das ist kein von mir unterstütztes Design.</p> <blockquote> <p>Innerhalb einer Komponente Pfeiltasten. Wenn das so Konvention ist, sollte man auch seine Webanwendungen so bauen.</p> </blockquote> <p>Komponente ist kein technischer Begriff.</p> <p>Die Konvention beschränkt sich technisch auf input type=radio Gruppen, select options bzw inputs mit assoziierter Datalist.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 13:17:04 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737203#m1737203 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737203#m1737203 <p>@@beatovich</p> <blockquote> <p>Komponente ist kein technischer Begriff.</p> </blockquote> <p>Nicht?</p> <p>Ich würde soetwas wie ein Menü schon als Komponente ansehen. Oder Tabs, in welchen ebenfalls mit Pfeiltasten navigiert wird. (Abschnitt <a href="https://inclusive-components.design/tabbed-interfaces/#keyboardbehavior" lang="en" rel="noopener noreferrer">Keyboard Behavior</a> in „Tabbed Interfaces“)</p> <blockquote> <p>Die Konvention beschränkt sich technisch auf input type=radio Gruppen, select options bzw inputs mit assoziierter Datalist.</p> </blockquote> <p>Nein. Die <a href="https://www.w3.org/TR/wai-aria-practices-1.1/" lang="en" rel="nofollow noopener noreferrer">WAI-ARIA Authoring Practices 1.1</a> hatte ich doch schon oft genug verlinkt. Deren Autoren sind bestimmt keine Dummköpfe, die anderen ihre unsinnigen Konventionen aufzwingen wollen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 14:14:08 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737204#m1737204 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737204#m1737204 <p>hallo</p> <blockquote> <p>@@beatovich</p> <blockquote> <p>Komponente ist kein technischer Begriff.</p> </blockquote> <p>Nicht?</p> <p>Ich würde soetwas wie ein Menü schon als Komponente ansehen. Oder Tabs, in welchen ebenfalls mit Pfeiltasten navigiert wird. (Abschnitt <a href="https://inclusive-components.design/tabbed-interfaces/#keyboardbehavior" lang="en" rel="noopener noreferrer">Keyboard Behavior</a> in „Tabbed Interfaces“)</p> </blockquote> <p>Hmm, mein Browser kennt Tabs. Leider gibt es keine tastenkombination mit Pfeiltasten, welche zwischen den Tabs wechselt.</p> <p>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.</p> <blockquote> <blockquote> <p>Die Konvention beschränkt sich technisch auf input type=radio Gruppen, select options bzw inputs mit assoziierter Datalist.</p> </blockquote> <p>Nein. Die <a href="https://www.w3.org/TR/wai-aria-practices-1.1/" lang="en" rel="nofollow noopener noreferrer">WAI-ARIA Authoring Practices 1.1</a> hatte ich doch schon oft genug verlinkt. Deren Autoren sind bestimmt keine Dummköpfe, die anderen ihre unsinnigen Konventionen aufzwingen wollen.</p> </blockquote> <p>Dumm ist nur, die Intelligenz anderer als Argument zu verwenden.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 27 Nov 18 14:23:07 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737205#m1737205 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737205#m1737205 <p>@@beatovich</p> <blockquote> <p>Ich kenne den Begriff TAB sonst nur im Zusammenhang mit der Tab-Taste.</p> </blockquote> <p><em lang="en">“Tab is not for tabs, which I concede is a bit confusing. I wish the key and the control had different names, but alas.”</em> — Das hast du doch gerade eben erst gelesen‽</p> <blockquote> <p>Dumm ist nur, die Intelligenz anderer als Argument zu verwenden.</p> </blockquote> <p>Allemal besser, als die eigene Dummheit als Argument zu verwenden.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Wed, 28 Nov 18 08:55:56 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737258#m1737258 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737258#m1737258 <p>@@JürgenB</p> <blockquote> <p>Dieses Menü verwendet aber LIs als klick-, tab- oder fokussierbare Elemente.</p> </blockquote> <p>Dieses Menü verwendet die Elementstruktur, wie man sie für ein statisches Menü ohne <em lang="en">pull-down</em> verwenden würde (verschachtelte Liste). Abgesehen von den <code>span</code>s – braucht man die überhaupt?</p> <p>Ein-/Ausklappen als <em lang="en">progressive enhancement</em>.</p> <blockquote> <p>Mir als sehenden ist das egal, aber wie gehen da Vorlesebrowser mit um?</p> </blockquote> <p>Sie sollten die vorhandenen ARIA-Attribute (wie <code>role="treeitem"</code>) interpretieren.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Wie man ein verschachteltes Pull-down-Menü implementiert Tue, 11 Dec 18 22:29:34 Z https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1738288#m1738288 https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1738288#m1738288 <p>@@ursus contionabundo</p> <blockquote> <p>Isso. Die Liste dessen, was man gerne wissen würde, wächst mit jeder neuen Erkenntnis. Und das gewiss nicht linear.</p> </blockquote> <p>Zum Glück wächst mit jeder neuen Erkenntnis auch die Liste dessen, <a href="https://forum.selfhtml.org/cites/776" rel="noopener noreferrer">was man nicht gern wissen würde.</a> </p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div>