tag:forum.selfhtml.org,2005:/selfWie man ein verschachteltes Pull-down-Menü implementiert – SELFHTML-Forum2018-12-11T22:29:34Zhttps://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737157#m1737157Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-26T18:47:28Z2018-11-26T18:47:28ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737159#m1737159beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-11-26T20:08:33Z2018-11-26T20:08:33ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737172#m1737172Ursa Major2018-11-27T07:54:19Z2018-11-27T07:54:19ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737257#m1737257JürgenBhttps://www.j-berkemeier.de2018-11-28T08:31:08Z2018-11-28T08:31:08ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1738270#m17382701unitedpower2018-12-11T17:55:15Z2018-12-11T17:55:15ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1738272#m1738272ursus contionabundo2018-12-11T18:05:54Z2018-12-11T18:05:54ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737162#m1737162Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-26T20:42:34Z2018-11-26T20:42:34ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737163#m1737163beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-11-26T20:43:50Z2018-11-26T20:43:50ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737171#m1737171Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-27T07:12:45Z2018-11-27T07:12:45ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737173#m1737173JürgenBhttps://www.j-berkemeier.de2018-11-27T08:00:03Z2018-11-27T08:00:03ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737196#m1737196beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-11-27T10:11:38Z2018-11-27T10:11:38ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737178#m1737178Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-27T09:11:59Z2018-11-27T09:11:59ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737174#m1737174Christian Krusehttps://wwwtech.de/about2018-11-27T08:37:19Z2018-11-27T08:37:19ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737177#m1737177JürgenBhttps://www.j-berkemeier.de2018-11-27T09:10:57Z2018-11-27T09:10:57ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737198#m1737198Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-27T10:24:20Z2018-11-27T10:24:20ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737180#m1737180Christian Krusehttps://wwwtech.de/about2018-11-27T09:16:25Z2018-11-27T09:16:25ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737181#m1737181Mitleser2018-11-27T09:17:31Z2018-11-27T09:17:31ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737182#m1737182Ursa Major2018-11-27T09:21:23Z2018-11-27T09:21:23ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737189#m1737189Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-27T09:49:04Z2018-11-27T09:49:18ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737184#m1737184Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-27T09:32:24Z2018-11-27T09:32:24ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737185#m1737185Ursa Major2018-11-27T09:39:54Z2018-11-27T09:39:54ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737188#m1737188JürgenBhttps://www.j-berkemeier.de2018-11-27T09:45:45Z2018-11-27T09:45:45ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737192#m1737192Ursa Major2018-11-27T09:58:26Z2018-11-27T09:58:26ZWie man ein verschachteltes Pull-down-Menü implementiert<p>So isses, Danke.</p>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737199#m1737199Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-27T10:39:32Z2018-11-27T10:39:32ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737201#m1737201beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-11-27T11:00:57Z2018-11-27T11:00:57ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737203#m1737203Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-27T13:17:04Z2018-11-27T13:17:04ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737204#m1737204beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-11-27T14:14:08Z2018-11-27T14:14:08ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737205#m1737205Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-27T14:23:07Z2018-11-27T14:23:07ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1737258#m1737258Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-11-28T08:55:56Z2018-11-28T08:55:56ZWie man ein verschachteltes Pull-down-Menü implementiert<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>
https://forum.selfhtml.org/self/2018/nov/26/wie-man-ein-verschachteltes-pull-down-menue-implementiert/1738288#m1738288Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-12-11T22:29:34Z2018-12-11T22:29:34ZWie man ein verschachteltes Pull-down-Menü implementiert<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>