Versionen dieses Beitrags

Alt-Text eines eigenen Avatars

Avatar quadraat 2018 Christian Kruse
  • Alt-Text eines eigenen Avatars
  • Hej Matthias,
  • > > Ich halte es nach einiger Überlegung eher für sinnvoll, den Alt-Text leer zu lassen. Der Name steht direkt daneben, und ein User mit Screenreader würde am ehesten davon profitieren, wenn der Avatar einfach übersprungen wird. Oder sehe ich das falsch?
  • Am besten wäre Avatar und Name in einem Link. Der Alternativ-Text für den Avatar wäre dann "Zum Profil vom Benutzer"
  • Vorgelesen würde dann z. B. "Zum Profil von Benutzer Marctrix"
  • Der Alt-Text soll erkennbar machen, was zu sehen ist und welche Funktion hinterlegt ist.
  • Auch so etwas wäre denkbar
  • Auch so etwas wäre denkbar
  • ~~~HTML
  • <a href="#"><span class="Visuallyhidden">Zum Profil von Benutzer </span>Marctrix</a>
  • ~~~
  • Der Avatar könnte dann per CSS eingefügt werden - wenn er als reiner Schmuck begriffen wird (was wohl der Fall sein dürfte, denn die Bildchen sind doch in der Regel mehr oder weniger sinnbefreit.
  • Weiter ist zu bedenken, dass title-Attribute von Screenreadern defaultmäßig nicht vorgelesen werden. Diese enthalten einfach zu oft redundante Informationen.
  • Das würde sich hier auch anbieten, denn die Information "zum Profil" ist bei meinen obigen Vorschlägen NUR für blinde lesbar. Wer sehen kann ist jetzt im Nachteil. Eine mögliche Lösung: in den title-Wert dasselbe eintragen, was im alt-Text steht ( darum sind eingeschaltete title-Attribute so nervig - man hört dann alles doppelt) oder - meiner Meinung nach hier besser: den Wert des alt-Attributes nutzen, um es in einem ::before oder ::after auszugeben. Entweder ständig sichtbar (besser für die Zugänglichkeit, aber jetzt für sehende nervig, wegen der Wiederholung) oder nur bei :hover.
  • Für Touchscreens ohne Mouseover muss dann eine extra Lösung her, lässt sich per CSS aber ebenfalls lösen (entweder wird der alt-Text immer angezeigt oder per active und :focus - letzteres brauchen wir eh für die Freunde der Tastatur).
  • Bleibt nur noch die Darstellung bei abgeschaltetem CSS - da hat title für Mausnutzer wieder Vorteile.
  • Ideal wäre hier aber wohl die Lösung mit dem Text, der per CSS verborgen wird - weil der bei abgeschaltetem CSS wieder für jeden sichtbar ist.
  • Habe das jetzt mal runtergeschrieben, hoffe alles bedacht zu haben. HTML habe ich mir auch nicht angeschaut, da ich mit dem iPhone unterwegs bin und hier keine Entwicklerwerkzeuge zur Verfügung habe - falls jemand welche kennt, würde er/sie mich glücklich machen!
  • Marc