Alle Techniken, die CSS unterstützen
Die Technik bezieht sich auf:
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:
gemäß der Einstellungen im Browser skaliert zu werden
in Farben, die durch die Einstellungen im Browser oder durch Regeln in benutzerdefinierten Stylesheets festgelegt wurden, angezeigt zu werden
Betriebssystem-Einstellungen anzunehmen, wie beispielsweise hoher Kontrast
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:
Die font-family-Eigenschaft wird benutzt, um den Code-Aspekt in einer nichtproportionalen Zeichensatzfamilie anzuzeigen.
Die text-align-Eigenschaft wird benutzt, um den Text rechts vom Ansichtsfenster anzuzeigen.
Die font-size-Eigenschaft wird benutzt, um Text in einer größeren Größe anzuzeigen.
Die font-style-Eigenschaft wird benutzt, um Text in Kursivschrift anzuzeigen.
Die font-weight-Eigenschaft wird benutzt um festzulegen, wie dick oder dünn Zeichen im Text angezeigt werden sollten.
Die color-Eigenschaft wird benutzt, um die Farbe von Text oder Textcontainern anzuzeigen.
Die line-height-Eigenschaft wird benutzt, um die Zeilenhöhe für einen Textblock anzuzeigen.
Die text-transform-Eigenschaft wird benutzt, um die Groß- und Kleinschreibung von Buchstaben im Text zu steuern.
Die letter-spacing-Eigenschaft wird benutzt, um die Spationierung von Buchstaben im Text zu steuern.
Die background-image-Eigenschaft kann benutzt werden, um Text auf einem Nicht-Text-Hintergrund anzuzeigen.
Die first-line-Pseudo-Klasse kann benutzt werden, um die Darstellung der ersten Zeile in einem Textblock zu verändern.
Die :first-letter-Pseudo-Klasse kann benutzt werden, um die Darstellung des ersten Buchstabens in einem Textblock zu verändern.
Die :before- und :after-Pseudo-Klassen können benutzt werden, um dekorativen Nicht-Text-Inhalt vor oder nach Textblöcken einzufügen.
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 }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; }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; }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; }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; }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; }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; }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; }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; }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;
}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; }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 sind nur zu Informationszwecken und keine offizielle Empfehlung.
Prüfen Sie, ob CSS-Eigenschaften benutzt wurden, um die visuelle Darstellung von Text zu steuern
Test #1 ist wahr.
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.