Techniken für WCAG 2.0

Zum Inhalt

-

C22: Benutzung von CSS, um die visuelle Darstellung von Text zu steuern

Anwendbarkeit

Alle Techniken, die CSS unterstützen

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es zu zeigen, wie man CSS benutzen kann, um die visuelle Darstellung von Text zu kontrollieren. Dies erlaubt es Benutzer, die visuellen Charakteristika des Textes über den Benutzeragenten zu ändern, damit diese ihren Anforderungen entsprechen. Die Text-Charakteristika beinhalten Aspekte wie Größe, Farbe, Zeichensatz-Familie und relative Positionierung.

CSS kommt der Barrierefreiheit hauptsächlich durch die Trennung der Dokumentstruktur von der Präsentation zugute. Stylesheets wurden dazu entworfen, eine präzise Kontrolle über Zeichenabstand, Textausrichtung, Positionierung von Objekten auf der Seite, Audio- und Sprachausgabe, Zeichensatzcharakteristika usw. zu ermöglichen- und zwar außerhalb des Markups. Durch die Trennung der Gestaltung vom Markup können Autoren das Markup in ihren Inhalten vereinfachen und bereinigen, wodurch es gleichzeitig barrierefreier wird.

Text innerhalb von Bildern stellt verschiedene Probleme in Bezug auf die Barrierefreiheit dar, einschließlich der Unfähigkeit:

Es ist besser, echten Text für den Textanteil dieser Elemente zu benutzen und eine Kombination aus semantischem Markup und Stylesheets, um die entsprechende visuelle Darstellung zu erstellen. Damit dies erfolgreich funktioniert, wählen Sie Zeichensätze, die wahrscheinlich auf dem System des Benutzers zur Verfügung stehen und definieren sie Alternativ-Zeichensätze für Benutzer, die den ersten angegebenen Zeichensatz möglicherweise nicht haben. Neuere Maschinen und Benutzeragenten glätten oft den gesamten Text oder benutzen Kantenglättung, also ist es wahrscheinlich, dass Ihre Überschriften und Schaltflächen auf diesen Systemen gut aussehen, ohne dass man auf Bilder eines Textes zurückgreifen muss.

Die folgenden CSS-Eigenschaften sind nützlich, um Text zu formatieren und die Notwendigkeit für Text in Bildern zu umgehen:

Beispiele

Beispiel 1: Benutzung von CSS font-family, um die Zeichensatzfamilie für Text zu steuern

Die XHTML-Komponente:

Code-Beispiel:

			<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>

Die CSS-Komponente :

Code-Beispiel:

			code { font-family:"Courier New", Courier, monospace }

Beispiel 2: Benutzung von CSS text-align, um die Positionierung (Ausrichtung) von Text zu steuern

Die XHTML-Komponente:

Code-Beispiel:

			<p class="right">This text should be to the right of the viewport.</p>  

Die CSS-Komponente :

Code-Beispiel:

			.right { text-align: right; }

Beispiel 3: Benutzung von CSS font-size, um die Größe des Textes zu steuern

Die XHTML-Komponente:

Code-Beispiel:

			<p>09 <strong class="largersize">March</strong> 2008</p>  

Die CSS-Komponente :

Code-Beispiel:

			strong.largersize { font-size: 1.5em; }

Beispiel 4: Benutzung von CSS color, um die Farbe des Textes zu steuern

Anmerkung: Der in diesem Beispiel benutzte „Style“ wird nicht benutzt, um Informationen, Struktur oder Beziehungen zu vermitteln.

Die XHTML-Komponente:

Code-Beispiel:

			<p>09 <em class="highlight">March</em> 2008</p>  

Die CSS-Komponente :

Code-Beispiel:

			.highlight{ color: red; }

Beispiel 5: Benutzung von CSS font-style, um Text kursiv zu machen

Anmerkung: Der in diesem Beispiel benutzte „Style“ wird nicht benutzt, um Informationen, Struktur oder Beziehungen zu vermitteln.

Die XHTML-Komponente:

Code-Beispiel:

			<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology 
Blog</a>.</p>

Die CSS-Komponente :

Code-Beispiel:

			.featuredsite{ font-style:italic; }

Beispiel 6: Benutzung von CSS font-weight, um die Schriftstärke des Textes zu steuern

Anmerkung: Der in diesem Beispiel benutzte „Style“ wird nicht benutzt, um Informationen, Struktur oder Beziehungen zu vermitteln.

Die XHTML-Komponente:

Code-Beispiel:

			<p>This deal is available <span class="highlight">now!</span></p> 

Die CSS-Komponente :

Code-Beispiel:

			.highlight { font-weight:bold; color:#990000; }

Beispiel 7: Benutzung von CSS text-transform, um die Groß- und Kleinschreibung von Text zu steuern

Anmerkung: Der in diesem Beispiel benutzte „Style“ wird nicht benutzt, um Informationen, Struktur oder Beziehungen zu vermitteln.

Die XHTML-Komponente:

Code-Beispiel:

			<p>09 <span class="caps">March</span> 2008</p>  

Die CSS-Komponente :

Code-Beispiel:

			.caps { text-transform:uppercase; }

Beispiel 8: Benutzung von CSS line-height, um Abstand zwischen Textzeilen zu steuern

Die CSS line-height-Eigenschaft wird benutzt, um die Zeilenhöhe für den Absatz in zweifacher Höhe des Zeichensatzes anzuzeigen.

Die XHTML-Komponente:

Code-Beispiel:

			<p>Concern for man and his fate must always form the<br />  
chief interest of all technical endeavors. <br />
Never forget this in the  midst of your diagrams and equations. </p>

Die CSS-Komponente :

Code-Beispiel:

			p { line-height:2em; }

Die CSS line-height-Eigenschaft wird benutzt, um die Zeilenhöhe für den Text in weniger als der Höhe des Zeichensatzes anzuzeigen. Die zweite Zeile des Textes ist nach der ersten Zeile des Textes positioniert und erscheint visuell als ob die Teil der ersten Zeile aber ein wenig abgesunken wäre.

Die XHTML-Komponente:

Code-Beispiel:

			<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

Die CSS-Komponente :

Code-Beispiel:

			.overlap { line-height:0.2em;  }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }

Beispiel 9: Benutzung von CSS letter-spacing, um den Text zu spationieren

Die CSS letter-spacing-Eigenschaft wird benutzt, um die Buchstaben in der Überschrift weiter voneinander entfernt anzuzeigen.

Die XHTML-Komponente:

Code-Beispiel:

			<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

Die CSS-Komponente :

Code-Beispiel:

			.overlap { line-height:0.2em;  }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }

Die CSS letter-spacing-Eigenschaft wird benutzt, um die Buchstaben in der zweiten Textzeile näher aneinander anzuzeigen.

Die XHTML-Komponente:

Code-Beispiel:

			<h1 class="upper2">News</h1>

Die CSS-Komponente :

Code-Beispiel:

			.upper2 { text-transform:uppercase; letter-spacing:1em; }

Beispiel 10: Benutzung von CSS background-image, um Text und Bilder zu schichten

Die CSS font-style-Eigenschaft wird benutzt, um die Text-Komponente eines Banners anzuzeigen und die background-image-Eigenschaft wird benutzt, um ein Bild hinter dem Text anzuzeigen.

Die XHTML-Komponente:

Code-Beispiel:

			<div id="banner"><span id="bannerstyle1">Welcome</span> 
<span id="bannerstyle2">to your local city council</span></div>

Die CSS-Komponente :

Code-Beispiel:

			#banner { 
  color:white; 
  background-image:url(banner-bg.gif); 
  background-repeat:no-repeat; 
  background-color:#003399; 
  width:29em; 
}

#bannerstyle1 { 
  text-transform:uppercase; 
  font-weight:bold; 
  font-size:2.5em;
}

#bannerstyle2 { 
  font-style:italic; 
  font-weight:bold; 
  letter-spacing:-0.1em;
  font-size:1.5em; 
}

Beispiel 11: Benutzung von CSS first-line, um die Darstellung der ersten Textzeile zu steuern

Die CSS :first-line-Pseudo-Klasse wird benutzt, um die erste Textzeile in einem größeren, roten Zeichensatz anzuzeigen.

Die XHTML-Komponente:

Code-Beispiel:

			<p class="startline">Once upon a time...<br />
...in a land far, far away...  </p>  

Die CSS-Komponente :

Code-Beispiel:

			.startline:first-line { font-size:2em; color:#990000; }

Beispiel 12: Benutzung von CSS first-letter, um die Darstellung des ersten Buchstabens des Textes zu steuern

Die CSS :first-letter-Pseudo-Klasse wird benutzt, um den ersten Buchstaben in einer größeren Schriftgröße, in rot und zentriert anzuzeigen.

Die XHTML-Komponente:

Code-Beispiel:

			<p class="startletter">Once upon a time...</p>  

Die CSS-Komponente :

Code-Beispiel:

			.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Prüfen Sie, ob CSS-Eigenschaften benutzt wurden, um die visuelle Darstellung von Text zu steuern

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.