Alle Techniken, die CSS unterstützen.
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, den Linktext zu ergänzen, indem zusätzlicher Text hinzugefügt wird, der die einzigartige Funktion des Links beschreibt, aber diesen zusätzlichen Text so zu formatieren, dass er auf dem Bildschirm von Benutzeragenten, die CSS unterstützen, nicht gerendert wird. Wenn die Informationen im umliegenden Kontext gebraucht werden, um den angezeigten Linktext zu interpretieren, stellt diese Technik eine komplette Beschreibung der Eingabefunktion des Links zur Verfügung, während sie es gleichzeitig erlaubt, dass der weniger vollständige Text angezeigt wird.
Die Technik funktioniert, indem ein CSS-Selektor erstellt wird, um Text anzuvisieren, der versteckt werden soll. Die für den Selektor festgelegte Regel platziert den zu versteckenden Text in einer 1-Pixel-Box mit „overflow hidden“ und positioniert den Text außerhalb des Ansichtsfensters. Dies stellt sicher, dass der Text nicht auf dem Bildschirm angezeigt wird, für assistierende Techniken wie beispielsweise Screenreader oder Braillezeilen aber barrierefrei bleibt. Beachten Sie, dass die Technik nicht visibility:hidden- oder display:none-Eigenschaften benutzt, da diese den ungewollten Effekt haben können, zusätzlich zur Vermeidung des Darstellung auf dem Bildschirm den Text vor assistierenden Techniken zu verstecken.
Anmerkung 1:Diese Technik zum Verstecken des Linktextes wurde von einigen Screenreader-Benutzern und Unternehmes-Webautoren befürwortet. Sie hat sich auf manchen Websites als effektiv erwiesen. Andere Screenreader-Benutzer und Barrierefreiheitsexperten empfehlen sie nicht als allgemeine Technik, da die Ergebnisse überaus wortreich sein können und die Fähigkeit erfahrener Screenreader-Benutzer, die Wortfülle zu steuern, einschränken können. Die Arbeitsgruppe glaubt, dass die Technik bei Webseiten nützlich sein kann, die keinen sich wiederholenden Inhalt in den versteckten Textbereichen haben.
Anmerkung 2: Diese Technik kann in Kombination mit einer Style-Switching-Technik benutzt werden, um eine Seite darzustellen, die eine konforme Alternativversion für nicht-konformen Inhalt ist. Für weitere Informationen lesen Sie C29: Benutzung eines Style-Switchers, um eine konforme Alternativversion zur Verfügung zu stellen und Konforme Alternativversionen verstehen.
Die folgenden Beispiele benutzen den/die unten festgelegte(n) CSS-Selektor und -Regel:
a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; } Dieses Beispiel beschreibt eine Nachrichten-Site, die eine Reihe von kurzen Synopsen von Berichten enthält, gefolgt von einem Link der „full story“ lautet. Versteckter Linktext beschreibt des Zweck des Links.
Code-Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text</title>
</head>
<body>
<p>Washington has announced plans to stimulate economic growth.
<a href="#"> <span>Washington stimulates economic growth </span>
Full Story</a></p>
</body>
</html>Dieses Beispiel beschreibt eine Ressource, die elektronische Bücher in unterschiedlichen Formaten hat. Auf den Titel jedes Buchs folgen Links, die „HTML“ und „PDF“ lauten. Versteckter Text beschreibt des Zweck jedes Links.
Code-Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
<dd><a href="winnie_the_pooh.html">
<span>Winnie the Pooh </span>HTML</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
<dd><a href="war_and_peace.html">
<span>War and Peace </span>HTML</a></dd>
<dd><a href="war_and_peace.pdf">
<span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Für jedes anchor-Element, das diese Technik benutzt:
Prüfen Sie, ob ein Element definiert wurde, das seine Anzeige auf ein Pixel beschränkt und den Text außerhalb des Bildschirms mit „overflow hidden“ positioniert
Prüfen Sie, ob das Element der Klasse im Inhalt des anchor enthalten ist
Prüfen Sie, ob der kombinierte Inhalt des anchor den Zweck des Links beschreibt
Alle oben genannten Tests sind 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.