@@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 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)

@@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). ☞ [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)