Accessibility Checkliste – Links

Bei der Setzung von Links kann man nicht viel verkehrt machen in puncto inklusiver Gestaltung, möchte man meinen. Ein paar Punkte verdienen aber doch Beachtung.

Optimierung für Screenreader

  1. Leere Links sind leere Links sind leere Links! Screenreader können keine Information auslesen, wenn keine gegeben wird.
    Das betrifft z.B. verlinkte Bilder ohne Linktext im alt-Attribut und Links mit einem Hintergrundbild ohne zusätzlichen, optisch versteckten Textinhalt.
  2. Die Sprachausgabe liest – je nach Screenreader unterschiedlich – bei leeren Links „Hyperlink“ oder den letzten Teil des Linkpfades.
  3. Ein Link title-Attribut wird bei leeren Links vom aktuellen JAWS und NVDA, aber nicht zuverlässig von allen Screenreadern vorgelesen.
  4. Links sollen kontextunabhängig verständlich sein, um eine schnelle Navigation von Link zu Link (mit der TAB-Taste) oder über die Linkliste zu unterstützen.
    • Kontextunabhängig: Das Seminarprogramm finden Sie hier.
    • Nicht kontextunabhängig: Das Seminarprogramm finden Sie hier.
  5. Bei mehreren Links mit dem gleichen Wortlaut auf einer Seite, müssen die Links im unmittelbaren Kontext verständlich sein.
    Das betrifft z.B. „mehr“ bei Newsteasern oder „Download“ bei strukturierten Dateilisten.
    Diese wiederholten Links müssen innerhalb des gleichen Absatzes oder Listenpunktes wie der erklärende Text sein oder unterhalb einer erklärenden Überschrift oder in einer barrierefrei ausgezeichneten Tabelle in der gleichen Reihe wie der zugehörige Text.
  6. Links bei Teasern mit sich wiederholendem Linktext (wie „Lesen Sie mehr“) können durch ein Link title-Attribut oder über einen optisch versteckten Teil des Linktextes, die den Titel der Meldung wiederholen, eindeutig verständlich gemacht werden. Diese Auszeichnungen sind aber nicht nötig um WCAG 2.0 konform zu sein, wenn die Newsmeldung mit semantisch korrekter Überschrift (wie H2) versehen ist.
  7. Links, die zu Dateien in einem anderen Format (z.B. PDF) führen, sollten diese Information im Linktext vermitteln (z.B. Seminarprogramm, PDF). Eine rein optische Markierung über ein Icon als Hintergrundbild genügt nicht. Wenn die Datei groß ist, sollte auch die Dateigröße angegeben werden (z.B. Seminarprogramm, PDF, 2MB).
  8. PDF Dokumente werden von Screenreader NutzerInnen vorzugsweise gleich im Adobe Reader (nicht im Browser) geöffnet, weil es dort Interaktionsmöglichkeiten für sie gibt. Die Information über das Dateiformat im Link selbst hilft also zu entscheiden, wie der Link geöffnet werden soll.
  9. Rekursive Links (Links, die auf sich selbst verweisen, d.h. auf die gerade geöffnete Seite) sollten vermieden werden. Idealerweise sollte die aktive Seite in der Navigation nicht verlinkt sein. Häufig ist die Erfüllung dieser Vorgabe nicht möglich. Ihre Sinnhaftigkeit ist auch nicht unumstritten, weil die dadurch veränderte Navigationsstruktur verwirrend sein kann.
    Moderne Screenreader geben die Information, dass der Link auf die bestehende Seite führt, aus.
  10. Mehrere Links, die zum gleichen Inhalt führen, sollten auch gleich benannt werden, auch wenn das SEO Empfehlungen widerspricht. Redundante Links sollten aber generell vermieden werden, da sie für User ohne grafische Oberfläche störend und verwirrend sind.
  11. Bei einem Teaser sollten die einzelnen Elemente (i.d.R. Überschrift, Vorschaubild und „mehr“ Link) also nicht gesondert, sondern nur eines des Elemente verlinkt werden. Der Rest des Teasers kann z.B. via JavaScript klickbar gemacht werden. In HTML5 ist es erlaubt, mehrere Blockelemente gemeinsam zu verlinken.
  12. JavaScript Links müssen zugänglich programmiert werden. Die JavaScript Funktion sollte nicht direkt im href-Attribut stehen, sondern dort nur aufgerufen werden. Eventhandler müssen geräteunabhängig, d.h. auch tastaturbedienbar, sein.
  13. Wenn JavaScript Links Inhalte auf der bestehenden Seite öffnen, müssen diese im Lesefluss auf den Link folgen bzw. muss der Fokus zum neuen Inhalt gesetzt werden oder die Inhalte müssen mit WAI-ARIA Angaben (aria-live oder alert) ausgezeichnet werden.
  14. Links zu Hilfe- oder Infotexten innerhalb von Formularen sollten dem zu erklärenden Formularfeld klar zugeordnet sein. D.h. sie sollten mit WAI-ARIA zugeordnet werden (aria-describedby) oder zumindest im Lesefluss unmittelbar bei, bevorzugt vor dem zugehörigen Eingabefeld stehen. Es wird empfohlen sie nicht innerhalb des Labels zu positionieren, weil dies die Interaktivität des Labels stören kann.
  15. Links zu externen Seiten sollten sich konsistent verhalten.
    • Wenn sie ein neues Fenster öffnen (das von KundInnen oftmals bevorzugte Verhalten), sollte das immer so sein.
    • Wenn sie im gleichen Fenster öffnen (das webstandardskonforme und von WebexpertInnen bevorzugte Verhalten), sollte das immer so sein.
  16. Screenreader geben bei externen Links die Information „externer Link“ aus, aber nicht, ob ein neues Fenster geöffnet wird. Diese Information kann über ein Link title-Attribut oder als optisch versteckter Teil des Linktextes vermittelt werden.
  17. Links zu PDF Dokumenten sollten, wegen des Formatwechsels und eventueller längerer Ladezeiten, ein neues Fenster öffnen.
  18. Sprachwechsel bei verlinkten Seiten und Dokumenten können mit dem Link Attribut hreflang ausgezeichnet werden.
  19. Trennelemente in Navigationen wie Breadcrumbtrail oder Metanavigation in Form von Sonderzeichen (>, /, | …) im HTML werden von Screenreadern unterschiedlich gehandhabt. Teils werden sie vorgelesen („Größer als, Senkrechter Strich“), teils nicht. Das Verhalten hängt von der jeweiligen Konfiguration ab. Die sicherste Vorgehensweise ist, Hintergrundbilder im CSS zu verwenden.
  20. Da konsistentes Verhalten im Internet wichtiger ist als vereinzelte Fleißaufgaben, kann man die Sinnhaftigkeit von speziellen Screenreader Optimierungen, die sich schwer allgemein durchsetzen lassen, hinterfragen. Einige Beispiele:
    • Optisch versteckte Nummerierung von Links in Navigationslisten.
    • Ein optisch versteckter Punkt am Ende von Navigationslinks, damit die Stimme der Sprachausgabe sich absenkt.
    • Der Hinweis „Öffnet neues Fenster“ im Link title-Attribut bei externen Links.
    • Wiederholung des Titels von Teasern im title-Attribut von „Lesen Sie mehr“-Links
    • Durchgehende Größenangabe bei Downloads, auch wenn sie nur kb groß sind und schnell laden, weil es unwichtige Information ist, die Webseiten für alle unübersichtlicher macht.
    • Vermeidung rekursiver Links (Links zur aktiven Seite) in Navigationen
    • Gänzliche Vermeidung von Sonderzeichen als Linktrennelemente

Optimierung für NutzerInnen mit Seheinschränkungen

  1. Im Fließtext darf Farbe nicht das alleinige Merkmal zu Auszeichnung von Links sein, weil die Farbunterscheidung bei diversen Farbfehlsichtigkeiten eingeschränkt ist. Das betrifft nicht nur die gängige Rot-Grün-Blindheit, auch schwarz und rot und andere Farbkombinationen können häufig schwer unterschieden werden. Zusätzliche Markierungen sind Unterstreichung (bevorzugt) und Fettdruck, Icons oder HTML Sonderzeichen.
  2. Die Kontrastwerte zwischen Vordergrund und Hintergrund müssen wie bei jedem Text, so auch bei Links und auch bei Hover- und Fokus-Styles, ausreichend sein (laut WCAG 2.0 AA Luminosity Contrast Ratio von 4,5:1 bei üblicher Schriftgröße für Text).
  3. Der Fokus muss deutlich sichtbar sein. Wenn Hover- und Fokus Styles sich nicht deutlich unterscheiden, z.B. bei verlinkten Bildern, muss die Browser Outline belassen werden (outline:1)
  4. Die Linkstyles a:hover, a:focus und a:active müssen gesetzt werden.
  5. Aktive Navigationspunkte müssen deutlich markiert sein.
  6. In Linklisten, die klar als solche erkennbar sind, sind Unterstreichungen möglicherweise kontraproduktiv, weil es die Links schwerer lesbar macht, wenn aufeinanderfolgende Zeilen unterstrichen sind. Hier ist eine andere Markierung vorzuziehen.
  7. Unterstreichung darf nur für Links verwendet werden, nicht zur Hervorhebung!
  8. Link title-Attribute sind bei Verwendung von Zoom nicht ideal, da sie nicht mitvergrößert werden.
  9. Bei Verwendung von Zoom Software überlagern Link title-Attribute möglicherweise zu viel des restlichen Texts und ragen über den gezeigten Bildausschnitt hinaus.
  10. Linktext muss auch im Kontrastmodus (eine Bildschirmeinstellung, die jeder vornehmen kann, z.B. bei erhöhter Blendempfindlichkeit) sichtbar sein. Die Linkfarben werden je nach Systemeinstellung angepasst, aber im Kontrastmodus werden Hintergrundbilder ausgeblendet, diese Information geht also verloren. Aus dem Bildschirm geschobene Information, die mit Sprachausgabe oder Brailletastatur lesbar ist, ist nicht sichtbar.
  11. Wenn über JavaScript Links Inhalte auf der gleichen Seite geöffnet/nachgeladen werden, muss sichergestellt sein, dass dies auch bei Verwendung von Zoom Software klar wird, weil nur ein vergrößerter Bildschirmausschnitt (z.B. 1/16 des Bildschirms) gesehen wird.
  12. Für JavaScript Links gelten ansonsten dieselben Vorgaben wie für Screenreader Zugänglichkeit: Geräteunabhängigkeit, erwartbare Aktionen, Information, wenn eingeblendete Inhalte nicht unmittelbar im Lesefluss folgen.

Optimierung für TastaturnutzerInnen

  1. Der Tastaturfokus muss sichtbar sein. D.h. Styleangaben für a:active (für Internet Explorer) und a:focus (die restlichen Browser) sind notwendig.
  2. Die Browser Outline sollte auf jeden Fall aktiviert sein, wenn a:focus Styles sich sonst nicht deutlich unterscheiden. Insbesondere bei verlinkten Bildern (outline:1).
  3. Link title-Attribute sind bei Tastaturnutzung oder auf Touchscreens nicht sichtbar.
  4. Versteckte Sprungmarken („Zum Inhalt springen“) sollten bei Tastaturfokus sichtbar werden, um auch dieser Zielgruppe zu nützen.
  5. JavaScript Links müssen geräteunabhängig funktionieren, mit der Tastatur fokussierbar und bedienbar sein.

JavaScript

  1. Wenn nicht fokussierbaren Elementen (z.B. Überschriften oder DIVs) via JavaScript die Quasisrolle von Links übertragen wird (z.B. in einem Akkordeon) müssen sie auch die Eigenschaften von Links übertragen bekommen. Sie müssen fokussierbar gemacht werden (tabindex=0), und Eventhandler müssen geräteunabhängig sein.
  2. Bei deaktiviertem JavaScript sollten Inhalte, die sonst via JavaScript angezeigt werden, von vornherein sichtbar sein.

2 thoughts on “Accessibility Checkliste – Links

  1. WOW! Das war erschöpfend. Und viele Möglichkeiten bleiben dann nicht mehr, wenn Links accessible sein sollen, und, z. B. in einer Navigation, auch noch optisch ansprechend gestaltet.

    An einer Stelle habe ich jedoch noch ein Verständinisproblem:
    Bei Punkt 20 – Beispiele stellst du bestimmte Techniken in Frage. Beispielsweise den „Deppenlink“ (Link zum Standort). Willst du damit sagen, dass man Deppenlinks setzen soll/darf, einem konsistenten Internet zuliebe? Oder keine Trennzeichen in Linklisten verwenden soll? Oder gerade doch?

  2. Ein Breadcrumbtrail ist bei komplexeren Websites auf jeden Fall sinnvoll. Die sauberste Lösung für Trennzeichen ist, sie über Hintergrundbilder im CSS einzubinden. Typographische Symbole im HTML werden von Screenreadern unterschiedlich gehandhabt, auch je nach Konfiguration. „Schrägstrich“ wird wahrscheinlich von allen vorgelesen, „Senkrechte Linie“ und „Größer als“ vom einen ja, vom andern nicht… Screenreader NutzerInnen finden diese Sonderzeichen manchmal störend, manchmal hilfreich. Eine ganz schlimme Hürde sind sie meiner Ansicht nach nicht. Paul Bohmann hat vor kurzem einen umfassenden Artikel zum Thema Screenreaderverhalten bei Punktuation und Typograpischen Symbolen veröffentlicht.

Kommentare sind geschlossen.