Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
Ire Aderinokun 22. Mai 2019

Nun auch als Chrome-Extension: Wie du Fehler auf deiner Website einfacher findest

Das Bild zeigt ein Dateimenü umgeben von einem gelben Rahmen und mit einer Fehlermeldung darüber die besagt: Inline Styles. You’d better use classes or IDs.

Dieser Beitrag wurde zuerst auf Englisch und auf bitsofco.de veröffentlicht. Hier der Link zum Originalartikel.

Schreibt man inkorrektes HTML, passiert erstmal gar nichts — der Browser ignoriert es schlichtweg. Doch genau aus diesem Grund passiert es einem schnell, dass man ein ungültiges, beziehungsweise nicht barrierefreies Markup schreibt, und es womöglich gar nicht mal bemerkt.

Grundsätzlich stehen einem einige Möglichkeiten offen, den eigenen HTML-Code validieren zu lassen, beispielsweise mithilfe des W3C Markup Validation Service. Eine weitere Möglichkeit, welche sich noch einfacher in den Deinen Entwicklungsprozess integrieren lässt, besteht darin, CSS-Selektoren zu verwenden, um etwaige Problembereiche hervorzuheben. Hier nun ein paar Beispiele wie wir solche CSS-Selektoren anwenden können, um invalides Markup mit einfachen Mitteln sichtbar zu machen. Den Link zur Chrome Extension gibt es am Ende des Artikels.

Inline Styles

*[style] { 
    border: 5px solid red;
/* Umrahmt sämtliche Inline-Style-Elemente mit einem roten Rand */
}

Dieser Selektor zielt auf jedes Element auf einer Seite, welches Inline-Styles behalten. Inline-Styles sollten eigentlich generell vermieden werden, da sie aufgrund ihrer hohen Spezifität nur schwer überschrieben werden können, und die Wartbarkeit einer Webseite deutlich erschweren. Gleichwohl Inline-Styles in einigen Fällen hilfreich sein können, hilft uns die Hervorhebung dabei, eine Abwägung von Fall zu Fall zu treffen.

Nun da wir diese Problemelemente per Selektor ansteuern, können wir jedweden Stil anwenden, um sie auf der Seite besser hervorzuheben zu machen, beispielsweise durch einen roten Rand.

Fehlerhafte oder fehlende Link-Ziele

a:not([href]),
a[href=""],
a[href*="javascript:void(0)"] { … }

Diese Selektoren hebt alle Ankerelemente hervor, die weder ein Href-Attribut noch ein anderweitig definiertes Href-Attribut besitzen.

Nicht barrierefreie Bilder

img:not([alt]) { ... }

Eine der Faustregeln in Sachen Barrierefreiheit lautet, dass alle Bilder ein alt-Attribut besitzen sollten. Ein nicht vorhandenes Alt-Attribut schadet nicht nur der Sichtbarkeit in den Suchmaschinen, sondern vor allem auch denjenigen, deren Sehkraft nur eingeschränkt oder gar nicht vorhanden ist. Fehlt ein alt-Attribut, lesen die meisten Vorlese-Anwendungen stattdessen den Wert des src-Attributs aus, was für die Benutzer komplett nutzlos ist.

Es sei darauf hingewiesen, dass der obige Selektor keine Bilder mit einem leeren alt-Attribut auswählt, also Bilder mit alt="". Dies hat den Hintergrund, dass man mit einem Null-Alt-Attribut die Vorlese-Anwendung ein bestimmtes Bild überspringen lassen kann, etwa wenn das Bild rein dekorativer Natur ist. Es kann jedoch dennoch nützlich sein, diese hervorzuheben, was wir mit dem folgenden Selektor machen können:

img[alt=""] { ... }

Missing Document Language

html:not([lang]),
html[lang=""] { ... }

Ein wichtiges Attribut, das in allen HTML-Elementen vorhanden sein sollte, ist das Sprachattribut. Dieses Attribut ist ein Signal für Vorlese-Anwendungen, in welcher Sprache die Seite vorliegt, das heisst, in welcher Sprache die Inhalte einer Seite vorgelesen werden sollen.

Falscher Zeichensatz

meta[charset]:not([charset="UTF-8"]) { ... }

Dieser Selektor zielt auf ein beliebiges Meta-Zeichensatz-Tag ab, das nicht auf UTF-8 eingestellt ist. <meta charset="UTF-8"> weist den Browser an, die UTF-8-Form der Zeichenkodierung zu verwenden, die derzeit für HTML-Dokumente empfohlen wird. Es ist von daher für gültiges HTML erforderlich.

Idealerweise sollte <meta charset="UTF-8"> auch das erste Element nach dem öffnenden <head> -Tag sein. Wir können dies mit dem folgenden Selektor überprüfen:

meta[charset="UTF-8"]:not(:first-child) { ... }

Nicht barrierefreie Vergrößerungsattribute

meta[name="viewport"][content*="user-scalable=no"],
meta[name="viewport"][content*="maximum-scale"],
meta[name="viewport"][content*="minimum-scale"] { ... }

Diese Auswahl kann verwendet werden, um nicht barrierefreie Vergrößerungsattribute hervorzuheben. Im Allgemeinen wird empfohlen, die Möglichkeit des Benutzers, das Ansichtsfenster durch Herauszoomen oder Hineinzoomen zu beeinflussen, nicht einzuschränken. Von daher sollten folgende Atrribute niemals verwendet werden:

user-scalable=no
maximum-scale
minimum-scale

Unbeschriftete Formularelemente

input:not([id]),
select:not([id]),
textarea:not([id]) { ... }

label:not([for]) { ... }

Obwohl es diverse Möglichkeiten gibt, ein Formularelement zu spezifizieren, besteht die einfachste Methode darin, einem Labelelement eine ID zuzuordnen. Das Beispiel oben sucht nach Formularelementen, die keine ID haben, und Kennzeichnungselementen, die nicht explizit mit einem Formularelement verknüpft sind, indem das Attribut [for] verwendet wird.

Eine andere Art der Beschriftung, die für Formularelemente wichtig ist, ist das Namensattribut. Während das id-Attribut zum Beschriften des Elements im Kontext des HTML-Dokuments verwendet wird, wird mit dem name-Attribut auf das Element verwiesen, wenn es mit den Formulardaten gesendet wird.

input:not([name]),
select:not([name]),
textarea:not([name]) { ... }

Zusätzlich zu den Formularelementen selbst ist es hilfreich, dem Formularelement selbst einen Namen oder eine ID zuzuordnen.

form:not([name]):not([id]) { ... }

Diese Auswahl hebt jedes Formularelement hervor, dem sowohl die Namens- als auch die ID-Attribute fehlen.

Leere, interaktive Elemente

button:empty, 
a:empty { ... }

Interaktive Elemente wie Links oder Schaltflächen werden normalerweise durch ihren Inhalt gekennzeichnet. Ist kein Inhalt vorhanden, kann man mit oben stehendem Code alle Links und Schaltflächen hervorheben, welche keinen HTML-Inhalt enthalten.

Nicht benötigte oder veraltete Attribute

script[type="text/javascript"],
link[rel="stylesheet"][type="text/css"] { ... }

Schließlich können wir CSS-Selektoren verwenden, um Attribute in unserem HTML-Code hervorzuheben, die veraltet sind oder nicht mehr benötigt werden.

Zu all dem habe ich eine Chrome-Erweiterung erstellt, die ihr euch runterladen könnt. Ich habe dazu auch einen Beitrag namens “Making Alix” verfasst, welchen ihr auf Englich lesen könnt.

Ire Aderinokun

Ire Aderinokun

Ire Aderinokun ist Autodidaktin und eine Frontend-Entwicklerin aus Lagos, Nigeria. Sie arbeitet als Software-Entwicklerin bei eyeo, dem Unternehmen hinter Adblock Plus und Flattr Plus, und entwickelt Open-Source-Software. Ihre Spezialität sind HTML, CSS und JavaScript, wozu sie bereits über 100 Fachartikel auf ihrem Blog bitsofco.de veröffentlicht hat. Bekannt ist sie auch durch regelmäßige Auftritte auf Frontend-Konferenzen in aller Welt.

2 Kommentare

  1. ist
    a href=’#’
    nicht inzwischen als “link to top of page” definiert?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.