Versionen dieses Beitrags

Alt-Text eines eigenen Avatars

Gb 80x80 Gunnar Bittersmann
  • Alt-Text eines eigenen Avatars
  • @@Christian Kruse
  • > Vielleicht sollte man eher sowas in diese Richtung anstreben:
  • >
  • > ~~~html
  • > <span class="author">
  • > <span class="registered-user">
  • > <a title="Benutzer marctrix" class="user-link" href="profilelink">
  • > <span class="visually-hidden">Zum Profil von </span>
  • > <img class="avatar" src="..." alt="Benutzer Mactrix" title="Zum Profil von Benutzer Mactrix" />
  • > </a>
  • > <a href="posting-link" aria-hidden="true">marctrix</a>
  • > </span>
  • > </span>
  • > <a href="posting-link">
  • > <time datetime="...">...</time>
  • > </a>
  • > ~~~
  • Wozu `<span class="visually-hidden">Zum Profil von </span>`{: .language-html}?
  • Einfach `<img class="avatar" src="..." alt="Zum Profil von Benutzer Mactrix" />`{: .language-html} – mit aussagekräftigem `alt`-Text; ohne nerviges `title`.
  • Und wozu Klassen? <voice of="Doc Emmett Brown">Wo wir hingehen, brauchen wir keine Klassen!</voice>
  • ~~~html
  • <span property="author" typeof="Person">
  • <a property="sameAs" href="profilelink">
  • <img property="image" src="..." alt="Zum Profil von Benutzer Mactrix" />
  • </a>
  • <a href="posting-link" aria-hidden="true">marctrix</a>
  • </span>
  • </span>
  • <a href="posting-link">
  • <time datetime="...">...</time>
  • </a>
  • ~~~
  • **Oops, aus Versehen „Speichern“ gedrückt. In Bearbeitung. Stay tuned…**
  • Die Verwendung von RDFa-`property` und Schema.org-Vokabular statt `class` macht die Auszeichnung „semantischer“. Und stylen lässt sich das über Attributselektoren genauso.
  • Hier fehlt dann aber natürlich noch weiter oben `type="Comment"` ([Comment](http://schema.org/Comment) wäre wohl der hier passende Subtyp von [CreativeWork](http://schema.org/CreativeWork)) und `vocab="http://schema.org/"`.
  • LLAP 🖖
  • --
  • _“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.”_{: lang="en"} —Stefan Tilkov
  • _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}

Alt-Text eines eigenen Avatars

Gb 80x80 Gunnar Bittersmann
  • Alt-Text eines eigenen Avatars
  • @@Christian Kruse
  • > Vielleicht sollte man eher sowas in diese Richtung anstreben:
  • >
  • > ~~~html
  • > <span class="author">
  • > <span class="registered-user">
  • > <a title="Benutzer marctrix" class="user-link" href="profilelink">
  • > <span class="visually-hidden">Zum Profil von </span>
  • > <img class="avatar" src="..." alt="Benutzer Mactrix" title="Zum Profil von Benutzer Mactrix" />
  • > </a>
  • > <a href="posting-link" aria-hidden="true">marctrix</a>
  • > </span>
  • > </span>
  • > <a href="posting-link">
  • > <time datetime="...">...</time>
  • > </a>
  • > ~~~
  • Wozu `<span class="visually-hidden">Zum Profil von </span>`{: .language-html}?
  • Einfach `<img class="avatar" src="..." alt="Zum Profil von Benutzer Mactrix" />`{: .language-html} – mit aussagekräftigem `alt`-Text; ohne nerviges `title`.
  • Und wozu Klassen? <voice of="Doc Emmett Brown">Wo wir hingehen, brauchen wir keine Klassen!</voice>
  • ~~~html
  • <span property="author" typeof="Person">
  • <a property="sameAs" href="profilelink">
  • <img property="image" src="..." alt="Zum Profil von Benutzer Mactrix" />
  • </a>
  • <a href="posting-link" aria-hidden="true">marctrix</a>
  • </span>
  • </span>
  • <a href="posting-link">
  • <time datetime="...">...</time>
  • </a>
  • ~~~
  • **Oops, aus Versehen „Speichern“ gedrückt. In Bearbeitung. Stay tuned…**
  • LLAP 🖖
  • --
  • _“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.”_{: lang="en"} —Stefan Tilkov
  • _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}