nicht angemeldet
Gunnar Bittersmann@@heinetz
Das HTML ist relativ einfach:
Du meinst, man kann relativ einfach was falsch machen‽
<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
LLAP 🖖
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory