@@Felix Riesterer > Wenn Du einen Link betätigst, dann lädt der Browser die verlinkte Resource. Das ist ein Wechsel von einer Seite zur nächsten. In Deinem Fall scheint man auf der immer gleichen Seite zu bleiben Und deshalb scheint mir `a` hier unangebracht. Es ist keine Navigation; es sind **Aktionen**. Das sollten also `button`-Elemente sein: ~~~HTML <form> <button name="a">a</button> <button name="b">b</button> </form> ~~~ oder mit Listen-Markup: ~~~HTML <form> <ul> <li><button name="a">a</button></li> <li><button name="b">b</button></li> </ul> </form> ~~~ Wenn da mal das `=` am Ende (die URIs wären `https://example.net?a=` usw.) nicht stört. Ansonsten müsste man die Aktion wohl mit JavaScript auslösen. Das Funktionieren des Dingens ohne JavaScript will man sicher nicht unbedingt aufgeben. Was man tun könnte, ist die Links erst mit JavaScript in Buttons umzuwandeln. Die Menü-Liste bekommt eine ID verpasst: `<ul id="menu">`{:.language-html} (und `form` muss nicht außenrum). Das Script erzeugt die Buttons und packt das jeweilige `a`-Element hinein. Dazu muss dessen `href`-Attribut entfernt werden, denn interaktive Elemente sind innerhalb eines Buttons nicht erlaubt. ~~~JavaScript const menuItemElements = document.querySelectorAll('#menu > li'); menuItemElements.forEach(menuItemElement => { let aElement = menuItemElement.firstChild; let location = aElement.href; aElement.removeAttribute('href'); let buttonElement = document.createElement('button'); buttonElement.addEventListener('click', event => { window.location = location; }); buttonElement.appendChild(aElement); menuItemElement.appendChild(buttonElement); }); ~~~   ---   > ~~~ CSS > /* Button-Bilder */ > a[href="?a"] { > background-image: url(a.png); > } > a[href="?b"] { > background-image: url(b.png); > } > ~~~ Das ist ein sicheres Indiz, dass die Icons in Markup gehören. Sie sind keine Verzierung, sondern Inhalt. Also `<a href="?a"><img src="a.png" alt="a"></a>`{:.language-html} bzw. `<button name="a"><img src="a.png" alt="a"></button>`{:.language-html}. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Felix Riesterer > Wenn Du einen Link betätigst, dann lädt der Browser die verlinkte Resource. Das ist ein Wechsel von einer Seite zur nächsten. In Deinem Fall scheint man auf der immer gleichen Seite zu bleiben Und deshalb scheint mir `a` hier unangebracht. Es ist keine Navigation; es sind **Aktionen**. Das sollten also `button`-Elemente sein: ~~~HTML <form> <button name="a">a</button> <button name="b">b</button> </form> ~~~ oder mit Listen-Markup: ~~~HTML <form> <ul> <li><button name="a">a</button></li> <li><button name="b">b</button></li> </ul> </form> ~~~ Wenn da mal das `=` am Ende (die URIs wären `https://example.net?a=` usw.) nicht stört. Ansonsten müsste man die Aktion wohl mit JavaScript auslösen. Das Funktionieren des Dingens ohne JavaScript will man sicher nicht unbedingt aufgeben. Was man tun könnte, ist die Links erst mit JavaScript in Buttons umzuwandeln. Die Menü-Liste bekommt eine ID verpasst: `<ul id="menu">`{:.language-html} (und `form` muss nicht außenrum). Das Script erzeugt die Buttons und packt das jeweilige`a`-Elemente hinein. Dazu muss dessen `href`-Attribut entfernt werden, denn interaktive Elemente sind innerhalb eines Buttons nicht erlaubt. ~~~JavaScript const menuItemElements = document.querySelectorAll('#menu > li'); menuItemElements.forEach(menuItemElement => { let aElement = menuItemElement.firstChild; let location = aElement.href; aElement.removeAttribute('href'); let buttonElement = document.createElement('button'); buttonElement.addEventListener('click', event => { window.location = location; }); buttonElement.appendChild(aElement); menuItemElement.appendChild(buttonElement); }); ~~~   ---   > ~~~ CSS > /* Button-Bilder */ > a[href="?a"] { > background-image: url(a.png); > } > a[href="?b"] { > background-image: url(b.png); > } > ~~~ Das ist ein sicheres Indiz, dass die Icons in Markup gehören. Sie sind keine Verzierung, sondern Inhalt. Also `<a href="?a"><img src="a.png" alt="a"></a>`{:.language-html} bzw. `<button name="a"><img src="a.png" alt="a"></button>`{:.language-html}. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Felix Riesterer > Wenn Du einen Link betätigst, dann lädt der Browser die verlinkte Resource. Das ist ein Wechsel von einer Seite zur nächsten. In Deinem Fall scheint man auf der immer gleichen Seite zu bleiben Und deshalb scheint mir `a` hier unangebracht. Es ist keine Navigation; es sind **Aktionen**. Das sollten also `button`-Elemente sein: ~~~HTML <form> <button name="a">a</button> <button name="b">b</button> </form> ~~~ oder mit Listen-Markup: ~~~HTML <form> <ul> <li><button name="a">a</button></li> <li><button name="b">b</button></li> </ul> </form> ~~~ Wenn da mal das `=` am Ende (die URIs wären `https://example.net?a=` usw.) nicht stört. Ansonsten müsste man die Aktion wohl mit JavaScript auslösen. Das Funktionieren des Dingens ohne JavaScript will man sicher nicht unbedingt aufgeben. Was man tun könnte, ist die Links erst mit JavaScript in Buttons umzuwandeln. Die Menü-Liste bekommt eine ID verpasst: `<ul id="menu">`{:.language-html} (und `form` muss nicht außenrum). ~~~JavaScript const menuItemElements = document.querySelectorAll('#menu > li'); menuItemElements.forEach(menuItemElement => { let aElement = menuItemElement.firstChild; let location = aElement.href; aElement.removeAttribute('href'); let buttonElement = document.createElement('button'); buttonElement.addEventListener('click', event => { window.location = location; }); buttonElement.appendChild(aElement); menuItemElement.appendChild(buttonElement); }); ~~~   ---   > ~~~ CSS > /* Button-Bilder */ > a[href="?a"] { > background-image: url(a.png); > } > a[href="?b"] { > background-image: url(b.png); > } > ~~~ Das ist ein sicheres Indiz, dass die Icons in Markup gehören. Sie sind keine Verzierung, sondern Inhalt. Also `<a href="?a"><img src="a.png" alt="a"></a>`{:.language-html} bzw. `<button name="a"><img src="a.png" alt="a"></button>`{:.language-html}. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)