Avatar

Fehlende alt-Attribute markieren

You may notice, that many sections are currently only available in german. We are working hard to provide a full translation of our website, but this might take some time. Thank you for understanding.
  • Aus Accessibility-Gründen (Barrierefreiheit) sollte man jedem eingebundenen Bild ein alt-Attribut mitgeben. Diese werden von Screen-Readern ausgelesen und wiedergegeben, damit eben auch Menschen mit Sehschwächen wissen, was dort zu sehen ist. Beim setzen des alt-Attributs ist es unerheblich, ob es sich um informative, oder rein visuelle Bilder handelt. Da sich nicht jedes Bild in Worten beschreiben lässt (und es auch nicht sinnvoll ist, jedes Bild in Worten zu beschreiben), kann man auch leere alt-Attribute setzen. Das Fehlen des Attributs führt jedenfalls dazu, dass einige Screen-Reader hergehen und die vollständige URL des Bildes vorlesen, was natürlich niemandem etwas bringt.


    Leider wird dieses Attribut sehr häufig vergessen. Auch in der WoltLab-Software.


    Mit folgendem CSS-Code kann man sich die Suche nach fehlenden alt-Attributen erheblich vereinfachen. Er sorgt dafür, dass sämtliche Bilder, denen das Attribut fehlt, speziell hervorgehoben werden:


    CSS
    img:not([alt]) {
    border: 5px solid red;
    filter: blur(5px);
    }


    Zur Hervorhebung erhält jedes betroffene Bild einen roten Rahmen. Und damit man gleich einen Eindruck davon bekommt, wie wichtig es ist, das Bild zu beschreiben (bzw. wie wenig es Menschen mit Sehbehinderungen bringt, wenn das Bild nicht ausreichend beschrieben ist), wird ein Blur-Filter (verwischen) angewandt.

  • Und wie macht man Woltlab nun klar das in 5.2 auch die ganzen Reaktions Icons nicht mit diesem ausgestattet sind? Google hat in den Google Maps (Karten die im WSC benutzt werden) Icons drauf welche auch nicht damit ausgestattet sind, was macht man da?

    Grüße

  • Naja, bei WL kann man es einfach vorschlagen. Aber grundsätzlich könnte man auch mit JavaScript nachhelfen:


    JavaScript
    elBySelAll('img:not([alt])', document, function(img) {
    elAttr(img, 'alt', elAttr(img, 'title') || '');
    });


    Soll heißen: Möglichkeiten gibt es.

  • Leider wird dieses Attribut sehr häufig vergessen.

    Bei euch aber auch ;)

    Code
    <div class="messageAuthorBackground" style="background-image: url(https://www.softcreatr.com/images/coverPhotos/5c/1-5c6404d281ce580a2f1c077d1e4fa817d92a3768.gif);"></div>


    Aber ich sag's mal so: Die Bildbeschreibung etc ist kein "Must Have", sondern "Nice to have". ;)

    proSidor - Wir haben die aktuellen Nachrichten der WoltLab-Szene!

  • Bei euch aber auch ;)


    Nö. Das ist ein Hintergrundbild von einem Container-Element. Dafür gibt's aria-label. Das ist aber noch einmal ein Thema für sich.


    Die Bildbeschreibung etc ist kein "Must Have", sondern "Nice to have". ;)


    Die Meinung ändert sich, wenn du mal nen blinden User hast :) Aber es geht hier gar nicht um die Beschreibung, sondern um das fehlende Attribut. Wie ich bereits schrieb, muss und sollte es nicht immer auch wirklich einen Inhalt geben. Aber das Attribut sollte schon existieren.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!