Gifs (ohne Endlosschleife erstellt) erneut abspielen bearbeitet von Gunnar Bittersmann 23.01.2018 12:57 @@anma > ~~~HTML, bad> <img src="images/arrow-left.png" class="arrow-left" onclick="plusDivs(-1)">> <img src="images/arrow-right.png" class="arrow-right" onclick="plusDivs(1)">> ~~~Das funktioniert nicht. Aus zwei Gründen:1. Mit Tastatur können keine Bilder „angeclickt“ werden. Du musst die Bilder in `button`-Elemente tun und denen das `onclick` geben. Noch besser wäre es, im HTML kein `onclick` zu haben, sondern im JavaScript [Eventhandler mit `addEventListener()`](https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener) zu registrieren.2. Außerdem muss jedes `img` ein `alt`-Attribut mit Alternativtext haben, der angezeigt (bzw. vorgelesen) wird, wenn das Bild nicht verfügbar ist.~~~HTML <button onclick="plusDivs(-1)"><img src="images/arrow-left.png" alt="voriges Bild" class="arrow-left"></button> <button onclick="plusDivs(-1)"></button> <button><img src="images/arrow-right.png" alt="nächstes Bild" class="arrow-right" onclick="plusDivs(1)"></button>~~~Per CSS kannst du dann bei den Buttons `border` und `background` entfernen.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)
Gifs (ohne Endlosschleife erstellt) erneut abspielen bearbeitet von Gunnar Bittersmann 23.01.2018 13:24 @@anma > ~~~HTML, bad > <img src="images/arrow-left.png" class="arrow-left" onclick="plusDivs(-1)"> > <img src="images/arrow-right.png" class="arrow-right" onclick="plusDivs(1)"> > ~~~ Das funktioniert nicht. Aus zwei Gründen: 1. Mit Tastatur können keine Bilder „angeclickt“ werden. Du musst die Bilder in `button`-Elemente tun und denen das `onclick` geben. Noch besser wäre es, im HTML kein `onclick` zu haben, sondern im JavaScript [Eventhandler mit `addEventListener()`](https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener) zu registrieren. 2. Außerdem muss jedes `img` ein `alt`-Attribut mit Alternativtext haben, der angezeigt (bzw. vorgelesen) wird, wenn das Bild nicht verfügbar ist. ~~~HTML <button><img src="images/arrow-left.png" alt="voriges Bild" class="arrow-left" onclick="plusDivs(-1)"></button> <button><img src="images/arrow-right.png" alt="nächstes Bild" class="arrow-right" onclick="plusDivs(1)"></button> ~~~ Per CSS kannst du dann bei den Buttons `border` und `background` entfernen. 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)
nicht angemeldet nicht angemeldet
