CSS
CSS Logo

content
CSS-Eigenschaft

(Materialsammlung)

Durch die CSS-Eigenschaft content kann mittels CSS-Anweisungen barrierefreier Inhalt in HTML eingefügt werden.

Die Eigenschaft eignet sich zur einheitlichen Ergänzung von Standardinformationen zu Links für einen gesamten Webauftritt in zentralen CSS-Dateien.

Text hinzufügen

Um einen Text in den HTML-Code einzubauen, wird in der Anweisung der Text in Anführungszeichen eingefügt. 

content: "[Text]";

Beim Text handelt es sich gewöhnlich um eine kurze Ergänzung, die bestimmten Elementen auf dem gesamten Webauftritt hinzugefügt wird. Die Ergänzung ist vielfach an eine CSS-Klasse geknüpft. Mittels Attributselektoren können Anweisungen aber auch gezielt für Elemente mit speziellen Attributen und deren Werten eingesetzt werden. Auf eine eigene CSS-Klasse für ein Element mit einem bestimmten Attributwert kann dadurch verzichtet werden.

Im folgenden Beispiel wird ein ergänzender Text für alle Links festgelegt, die auf eine Adresse referenzieren, die mit der Zeichenfolge „http“ beginnt. Der Code kann eingesetzt werden, um einen Hinweis auf Links zu externen Webauftritten vorzusehen.

  1. Die CSS-Anweisung wird zunächst allgemein für Links (a) festgelegt.
  2. Der Attributselektor [href^] dient zur Einschränkung der Anweisung auf Links, welche mit der Zeichenfolge http beginnen.
    Der Zirkumflex (^) legt dabei als Bedingung den Beginn des Attributwerts fest.
  3. Mit dem CSS-Pseudoelement ::after wird die Ergänzung am Ende einer Linkbeschriftung hinzugefügt.
  4. Als ergänzender Hinweistext wird die Zeichenfolge „ (extern)“ festgelegt.
    Das Leerzeichen am Beginn des ergänzenden Textes sorgt dabei für einen Abstand zur Linkbeschriftung. 
a[href^="http"]::after { 
  content: " (extern)"; 
}

Bild mit Textalternative hinzufügen

Als Inhalt kann auch ein Hintergrundbild eingebaut werden.

  1. Das Hintergrundbild wird durch eine url-Anweisung referenziert.
  2. Die Textalternative wird hinter einem Schrägstrich festgelegt. Auf Klammern als Indikatoren für eine Zusatzinformation kann verzichtet werden, um die Ausgabe durch einen Screen Reader zu minimieren.

Ein visueller Indikator für einen externen Link mit einer Textalternative kann etwa folgendermaßen aussehen: 

a[href^="http"]::after { 
  content: url("images/icon-extern.svg") / "extern"; 
}

Barrierefreiheit und Nutzungsfreundlichkeit

Inhalt darf nur in Ausnahmefällen mittels CSS in HTML eingebaut werden. Gewöhnlich werden einschlägige Anweisungen nur für Standardsituationen zum Ergänzen von Inhalt für eine spezielle Komponente eingesetzt. Dazu werden die Anweisung in einer zentralen CSS-Datei realisiert.

Durch zentrale CSS-Anweisungen können einheitlich Indikatoren für spezielle Linktypen realisiert werden. Damit wird deren Wiedererkennbarkeit im Sinne des Erfolgskriteriums 3.2.4 Konsistente Identifikation gewährleistet.

Beispiele

PDF Indikator
Links, die zu PDF-Dateien führen, sollten aus Gründen der Nutzungsfreundlichkeit über eine entsprechende Kennzeichnung verfügen.
Externe Links
Hinzufügen eines Hinweises oder Indikators auf externe Webauftritte.
Positionsangaben | CSS-Techniken
Hinzufügen und Verbergen von Zeichen zwischen Elementen in der Positionsliste.
details & summary #Indikatoren
Modifizieren des Indikators für den Erweiterungszustand einer Ausklappkomponente