Textlinks und Darstellung
Inhalte
- Seite 1: Einführung Links und Hypertext
- Seite 2: Textlinks und Darstellung
- Seite 3: Hypertext Links
- Original-Dokument in englischer Sprache bei WebAim.org
Link Text
Vermeidung unrelevanter Wortphrasen
Wie bereits schon erläutert, sind Links wesentlich nützlicher für den User, wenn Sie aus dem Zusammenhang heraus erfolgen. Entwickler bzw. Autoren von Texten, die gleichzeitig auch verlinken, sollten folgende Verlinkungen vermeiden:
- hier klicken
- hier
- mehr
- mehr lesen
- link zu [Ihr Linkziel]
- info
Die Verwendung der Phrase "hier klicken" ist unnötig, das können Sie wesentlich einfacher und barrierefreier verlinken. Beispiel: Statt "hier klicken für wettervorhersage" wäre ein einfaches Schlagwort wie "wettervorhersage" besser.
Typisch sind auch Textlinks wie "mehr" oder "mehr lesen", Autoren und Entwickler sollten auch diese Phrasen beim Verlinken vermeiden, im www wird das nach wie vor häufig genutzt. Z.B. "mehr über die Erderwärmung" einfach ersetzen durch "Erderwärmung". Wichtig ist auch hier, aus dem Zusammenhang bzw. Sinn heraus zu verlinken.
Link Länge
Lange Links
Was ist eigentlich das Maximum der erlaubten Menge an verlinktem Text? Eine interessante Frage, auf die es aber keine richtige Antwort gibt - man könnte das z.B. nicht in Zahlen beziffern. Ein Link sollte aber genau so lang sein, wie es im Kontext der Seite sinnvoll ist - keinesfalls länger. Diese "Antwort" lässt natürlich wieder Raum für Spekulationen zu. Autoren bzw. Entwickler, sollten einfach nur die Inhalte verlinken, die an dieser Stelle auch wirklich Sinn machen. Der Textlink sollte dabei so knapp wie möglich ausfallen und nicht durch unnötige Phrasen verwirren.
Einige Autoren verlinken ganze Sätze, Absätze oder mehrere Absätze, diese Art der Verlinkung ist sicher unnötig und nicht barriefrei für z.B. Screen-Reader, die visuell nicht durch lange Linktexte lesen möchten. Screen-Reader User erwarten ein kurzes prägnantes Schlagwort zu einer Verlinkung, idealerweise in den ersten paar Wörtern. Wird eine zu lange Information zu einem Link ausgegeben, führt das zur Demotivation und Frustration beim Anwender. Entwickler und Autoren haben zwar keinen Einfluss auf derartige Nutzerverhalten, können diese Probleme aber im Vorfeld sicherlich vermeiden.
Kurze Links
Was ist eigentlich das Minimum der erlaubten Menge an verlinktem Text, eine genauso interessante Frage, auf die es keine pauschale Antwort gibt. Jedoch sollten Links in den meisten Fällen Wörter oder Phrasen verwenden, manchmal ist aber z.B. auch eine alphabetische Verlinkung mit nur einem Buchstaben oder eine numerische Verlinkung mit einer Zahl verlinkt - dass macht hier auch durchaus Sinn.
Einige Benutzer haben bei der Verwendung von Links als einzelne Zeichen oder verlinkter kleiner Grafiken (z.B. 10x10 Pixel) aber große Probleme, auf so einen kleinen Raum zu klicken. Ein gelähmter Mensch kann zwar in der Lage sein mit der Hand eine Maus zu nutzen, bekommt aber dennoch massive Schwierigkeiten, den anzuklickenden Bereich präzise zu erreichen. Oft sind mehrere Anläufe nötig und der Behinderte verklickt sich bei den gewünschten Inhalten, so dass er mehrere Anläufe braucht, um das eigentliche Ziel zu erreichen.
Die Benutzer benötigen eine gewisse Kontrolle über die Größe eines Links, das wäre zum Bespiel mit verschiendenen Zoom Funktionen möglich, die entweder auf der Website integriert werden oder über entsprechende Browser Funktionen, die vom Benutzer aktiviert werden können. Der Opera Browser ist z.B. in der Lage eine gesamte Website zu vergrößern. Nun, 1 Zeichen oder 10x10 px Links sind doch eher selten und nicht das häufigste Problem, Autoren und Entwickler könnten aber dennoch versuchen, die Frustration der behinderten Anwender zu vermeiden. Beispielsweise durch das Einbinden geschützter Leerzeichen oder durch eine größere Darstellung der Schriftarten. Mit einer Vergrößerung des Zielbereiches wäre diesen Menschen schon sehr geholfen.
Beispiel
Das geschützte Leerzeichen (im Quellcode siehe Abbildung) vor und nach dem Buchstaben "A" und "B", macht es für Menschen die Schwierigkeiten haben auf kleine Räume zu klicken, wesentlich einfacher, den Link anzuklicken.
<a href="#b"> B </a> | ...etc.
URL Links
Bei Web Adressen oder URLs gibt es zwei wesentliche zu beachtende Merkmale (Spezifikationen):
- Lesbarkeit
- Länge
URL Lesbarkeit
Bei der Lesbarkeit von URLS für Menschen, besteht das Problem, dass diese nicht immer im Sinn erkennbar oder Screen-Reader freundlich sind. Das liegt unter anderem daran, dass die URL Zahlen, Buchstaben und Zeichen enthält, die zwar für Datenbanken und Scripte relevant sind, aber wenig Sinn für den Benutzer machen. Daher ist es in einigen Fällen sinnvoll statt der URLS, für Menschen lesbaren Text zu verlinken, um so die Zugänglichkeit zu erleichtern. Z.B. wäre der Titel des Buches Constructing Accessible Web Sites sinnvoller verlinkt, als eine aus 108 Zeichen lange URL ohne Aussagekraft:
(http://www.amazon.com/exec/obidos/ASIN/
1590591488/qid = 1116957951/sr = 2 -
1/ref = pd_bbs_b_2_1/103-5755258-8204633 - externer Link)
Das bedeutet jedoch nicht, dass es sinnvoll ist keine solchen URLS mehr zu verwenden, solange die Länge der URL relativ kurz ist. Aus Rücksicht auf Screen-Reader Anwender, die sich die volle Länge der URL anhören müssen, könnte man diesen störenden Nebeneffekt jedoch möglichst vermeiden.
URL Länge
Das zweite Problem ist die Länge der URLS in der Adresszeile des Browsers. Die URL ist einfach zu lang, um vollständig in der Adresszeile angezeigt zu werden. In der Regel werden durch solche langen URLS Variabeln übergeben, die für Datenbank Anwendungen oder weitere Scriptverarbeitung genutzt werden. Der oben erwähnte Link zu Amazon.com ist da ein typisches Beispiel. Die URL wurde zudem noch durch einen Umbruch auf mehrere Zeilen verteilt, weil sie für eine Zeile zu lang wäre. Mozilla-basierte Browser wie Firefox und Netscape haben unter Umständen Probleme bei der Darstellung und Funktion solcher Links.
Der nachfolgende Screenshot hat ursprünglich eine Breite von 2000 Pixeln, also gut die Größe von zwei Monitoren. Anwender müssen horizontal eine sehr weite Strecke scrollen, um die URL vollständig zu lesen.
Stellen Sie sich einmal vor, Sie müssten sich ständig diese Art der Verknüpfung per Screen-Reader anhören, das würde wohl kaum jemand über längere Zeit ertragen. Der Link könnte in diesem Beispiel auch auf "California Möwe Fotos" gekürzt werden, da eine Website mit Fotos von Möwen aus Californien angezeigt werden soll.
ALT Text für verlinkte Bilder
Wie bei verlinktem Text, übernimmt bei verlinkten Bildern der ALT Text die Funktion des Linktextes. Es ist aber unsinnig, dem User per ALT Text mitzuteilen, dass es sich um einen Link handelt, da er diese Info sowieso hört. An dieser Stelle stellt sich dann auch die Frage, ob es Sinn macht optische Eigenschaften für blinde Nutzer in den ALT Text zu integrieren. In den meisten Fällen, ist die Beschreibung eines Bildes eher sekundär wichtig. Primär ist auch hier wieder die kurze Beschreibung des Linkziels wichtiger.
Beispiel
Die optischen Eigenschaft der nachstehenden Grafik könnte in diesem Fall als ein drei-dimensionales horizontal ausgerichtetes Objekt beschrieben werden. Die Füllung ist Königsblau oben mit rot am unteren Ende, die Ecken sind abgerundet und die Grafik hat die Beschriftung "Products" in weiß.
Die reine Beschreibung der Grafik wäre sicherlich in Ordnung, geht aber leider völlig am Sinn vorbei, da hier eher ein Schlagwort zur Beschreibung des Linkziels im ALT Text vom Benutzer erwartet wird, als optische Eigenschaften. Ein kurzer ALT Text "Products" im Quellcode der verlinkten Grafik würde diesen Nutzern wesentlich mehr helfen.
Link Erscheinungsbild
Links sollten generell auch so aussehen wie Links, nichts ist ärgerlicher als auf Textphrasen oder Grafiken zu klicken, die wie Links ausschauen aber keine sind, sobald sie angeklickt werden. Versetzen Sie sich mal in die Lage eines Behinderten, der grade vielleicht einen interessanten Link ausgespäht hat und mühsam über Ihre Website navigiert - da wären Sie auch frustriert.
Unterstreichung
Per default unterstreichen alle Browser Links. Mit Cascading Style Sheets (CSS) kann die Unterstreichung eines Links formatiert oder verhindert werden. Letztere Methode ist aber die schlechtere Wahl, da Internet Nutzer gewohnt sind, Links unterstrichen vorzufinden und auch in Texten danach zu suchen.
Beispiel
Welche Wörter oder Phrasen in der folgenden Abbildung sind Links und welche nicht?
Selbstverständlich sind alle Texte verlinkt, die blauen als auch die schwarzen. Um Irrtümer oder Missverständnisse zu vermeiden, wäre es zusätzlich sinnvoll, die wesentlichen Inhalte der Website auch visuell hervorzuheben - durch unterstreichen.
Sicherlich gibt es auch hier wieder Ausnahmen, obwohl viele Webbenutzer es gewohnt sind, Links der wichtigsten Navigationselemete unterstrichen vorzufinden. Oft werden diese als Grafik statt mit Text dargestellt, unterstrichene Navigations-Links findet man auch auf gut bekannten Websites eher selten.
Beispiele
Einige Websites unterstreichen Links im Inhalt, nicht aber beispielsweise die Hauptnavigation, wie der nachfolgende Screenshot zeigt.
Die IBM Website benutzt zwar verlinkten Text, aber unterstreicht die Links nicht visuell, erst bei einem Mouse Over wird der unterstrichene Link sichtbar. Diese Technik mag für manche Leute sinnvoll sein, aber eigentlich hat man den Benutzer schon vorab auf einen Link hingewiesen, da eine Hauptnavigation erkennbar ist.
Die "Ten Thousand Villages" Website verwendet Grafiken statt Text. Linktexte erscheinen nie unterstrichen.
Die Hauptnavigation der Macromedia Website ist via Flash erstellt. Text wird nie unterstrichen.
Hover und focus Effekte
Die meisten Websites implentieren visuelle Hover oder Focus Effekte, um eine optische Hervorhebung der Links und deren Status zu erreichen. Das definieren unterschiedlicher Stati hilft dem Benutzer an Maus und Tastatur zu wissen, dass der Fokus auf einem bestimmten Link liegt und dass der Link aktiv ist.
Oft erscheint die Wirkung als Glow-Effect oder andere Effekte direkt hinter dem Linktext.
In anderen Fällen wechselt der Linktext die Farbe.
Diese Technik ist nicht nur auf Inhalte der Navigation beschränkt, Links im Hauptinhalt können auch so besser gestaltet werden.
Diese Effekte können geräteunabhängig über CSS Formatierung eingerichtet werden, sofern Mouse oder Tastatur beim User vorhanden sind. Die entsprechenden Einstellungen nimmt man in den Pseudo-Klassen :hover , :focus und wahlweise auch :aktiv vor.
Beispiel
Nachstehende CSS Anweisung bewirkt, dass der Hintergrund bei einer Aktivierung bzw. Hover mit der TAB, der Enter-Taste oder Mouse, zu einer hellgelben Farbe und der Link-Text zu einer kastanienbraunen Farbe wechselt.
a:focus,
a:active
{
background-color:#ffffcc;
color:#990000;
}
Diese Übersetzung wurde im Rahmen einer Vereinbarung mit WebAim.org erstellt. copyright 2011 - WebAIM
