Versionen dieses Beitrags

Schrift wird unterschiedlich dargestellt

Gb 80x80 Gunnar Bittersmann
  • Schrift wird unterschiedlich dargestellt
  • @@heinetz
  • > Das HTML ist relativ einfach:
  • Du meinst, man kann relativ einfach was falsch machen‽
  • > ~~~HTML, bad
  • > <svg class="a-svg-icon a-button__icon" role="img" viewBox="0 0 100 100" aria-labelledby="" data-js-module="a-svg-icon" data-js-sprite-path="/svg-sprites/ui.svg">
  • > ~~~
  • `role="img"`, wirklich? Der Pfeil ist Decoration, sollte also `role="none"` haben und bis Browser/Screenreader das auch verstehen noch den alten Wert mit drin `role="none presentation"`. Oder gar kein `role`-Attribute, denn:
  • Das Ding soll ja gar nicht angesagt werden. `labelledby=""` dazu halte ich für Mumpitz. Keine Ansage im Screenreader geht so: `aria-hidden="true"`.
  • > In beiden Fällen werden jeweils die Zeile und das SVG zentriert dargestellt. Allerdings werden die Glyphen innerhalb der Zeile unterschiedlich positioniert.
  • Ja, dem ist so.
  • > Dadurch erscheint der Text dann unter OS X nicht zentriert.
  • Mit absoluter Positionierund wirst du dem auch nicht zuleibe rücken können. Lass das Icon sich an der Grundlinie ausrichten und verschiebe es vertikal (`translateY()`, relative Positionierung sollte auch gehen).
  • Mit absoluter Positionierung wirst du dem auch nicht zuleibe rücken können. Lass das Icon sich an der Grundlinie ausrichten und verschiebe es vertikal (`translateY()`, relative Positionierung sollte auch gehen).
  • ☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/xYgbPj)
  • 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)