Fehlende alt-Attribute markieren

  • 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?

  • 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.

  • Als Footer-Code:

    JavaScript
    <script>
    $(function() {
        elBySelAll('img:not([alt])', document, function(img) {
            elAttr(img, 'alt', '');
        });
    });
    </script>

    Wobei es sinnvoller wäre, das Problem zu lösen, als die Symptome zu unterdrücken ;)

  • Dieses Thema enthält 4 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registrieren Sie sich oder melden Sie sich an um diese lesen zu können.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!