Synonyme: Querverweis, Verweis, Verknüpfung, Hypertext-Link, Hyperlink
Siehe auch: Schalter, Menü, Image Map
Links ermöglichen die Navigation zu einer festgelegten Stelle (siehe DIN EN ISO 9241-161: 8.23).
Ein Link besitzt eine textliche oder grafische Beschriftung (z. B. ein Icon). Links besitzen meist einen visuellen Indikator, um den Link als solchen kenntlich zu machen, dies gilt insbesondere für Textlinks. Als visueller Indikator für Textlinks wird in der Regel eine Unterstreichung und eine abweichende Farbe verwendet.
Darstellung
Permalink zu "Darstellung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 454 | Kontrast | Wenn der Link eine Textbeschriftung besitzt, muss diese zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen. | Muss | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 455 | Kontrast | Wenn der Link eine grafische Beschriftung besitzt, muss diese zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen. | Muss | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 456 | Kontrast | Wenn der Link ausschließlich aufgrund seiner Textfarbe als Link zu erkennen ist, muss das Kontrastverhältnis zwischen der Farbe benachbarter Textinhalte und der Textfarbe des Links mindestens 3:1 betragen. | Muss | EN 301 549: 9.1.4.1, 11.1.4.1 |
| 457 | Kontrast | Wenn der Link ausschließlich aufgrund eines grafischen Elements (z. B. Unterstreichung oder Icon) als Link zu erkennen ist, muss das Kontrastverhältnis zwischen grafischem Element und Hintergrundfarbe mindestens 3:1 betragen. | Muss | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 458 | Kontrast | Wenn der Status des Links grafisch übermittelt wird, so muss das Kontrastverhältnis zwischen grafischem Element und Hintergrundfarbe mindestens 3:1 betragen. Hinweis: Mit Status sind u. a. auch die folgenden Informationen gemeint:
| Muss | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 459 | Beschriftung | Die sichtbare Beschriftung des Links muss mit dem Link-Namen, der an die Accessibility API übermittelt wird, übereinstimmen oder in diesem enthalten sein (siehe Beschriftung). | Muss | EN 301 549 9.2.5.3, 11.2.5.3 |
| 460 | Beschriftung | Der Linkzweck muss aus der Linkbeschriftung oder dem programmatisch verknüpften Linkkontext ermittelbar sein. Hinweis 1: Bei Desktop-Anwendungen gilt z. B. ein Tooltip, eine Beschriftung einer Gruppe oder eine Beschreibung als Linkkontext, sofern sie programmatisch mit dem Link verknüpft sind. Hinweis 2: Bei Web-Anwendungen gilt z. B. Text im gleichen Absatz oder Satz, im gleichen oder einem übergeordneten Listeneintrag, in der Abschnittsüberschrift, in der gleichen Tabellenzelle oder einer zugeordneten Spalten- oder Zeilenüberschrift als programmatisch ermittelbarer Linkkontext. | Muss | EN 301 549: 11.2.4.4 |
| 461 | Beschriftung | Der Linkzweck soll aus der Linkbeschriftung ermittelbar sein. Hinweis: Dies ist wichtig, weil der programmatisch ermittelbare Linkkontext mit dem Screenreader häufig nicht oder nur schwer ermittelt werden kann. Dies gilt insbesondere für die Linkübersicht, die der Screenreader anzeigen kann. | Soll | WCAG 2.1: 2.4.9 (AAA) |
| 462 | Beschriftung | Wenn der Link eine grafische Beschriftung besitzt, so soll der Link einen Tooltip mit einer Textbeschriftung besitzen. | Soll | WCAG 2.1: 3.3.5 (AAA); DIN EN ISO 9241-143: 9.6.11 |
| 463 | Beschriftung | Wenn der Link auf ein Ziel in einem anderen Programm oder Dokumentenformat verweist, soll beim Link darauf hingewiesen werden. | Soll | WCAG 2.1: 3.2.5 (AAA) |
| 464 | Web: Konsistenz | Dient eine Liste von Links der Navigation, dann sollen die Links auf jeder Maske in der gleichen relativen Reihenfolge dargestellt werden und den Tastaturfokus erhalten (siehe Konsistenz). | Muss | EN 301 549: 9.3.2.3 |
| 465 | Desktop: Konsistenz | Dient eine Liste von Links der Navigation, dann sollen die Links auf jeder Maske in der gleichen relativen Reihenfolge dargestellt werden und den Tastaturfokus erhalten (siehe Konsistenz). | Soll | WCAG 2.1: 3.2.3 (AA) |
| 466 | Position | Dient eine Liste von Links der Navigation, dann soll der Link, der auf die aktuelle Seite bzw. auf den Bereich, in dem sich die aktuelle Seite befindet, gekennzeichnet sein. | Soll | WCAG 2.1: 2.4.8 (AAA) |
| 467 | Fokussichtbarkeit | Erhält der Link den Tastaturfokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator). | Muss | EN 301 549: 9.2.4.7, 11.2.4.7 |
Bedienung
Permalink zu "Bedienung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 468 | Tastaturbedienung | Der Link muss mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung). | Muss | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2 |
| 469 | Tastaturbedienung | Bei Aktivierung seiteninterner Links muss das verlinkte Element fokussiert werden. Es ist nicht ausreichend, wenn das verlinkte Element lediglich in den sichtbaren Bereich gescrollt wird. | Muss | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.4.3, 11.2.4.3 |
| 470 | Web: Tastaturbedienung | Inhaltsbereiche mit Links, die auf mehreren Seiten vorkommen, müssen mit der Tastatur übersprungen werden können (siehe Praxistipp Effiziente Tastaturnavigation). Hinweis: Dies betrifft insbesondere die Navigationslinks am Seitenanfang. | Muss | EN 301 549: 9.2.4.1 |
| 471 | Tastaturbedienung | Enthält ein Fenster Bereiche mit vielen Links, so soll ein Mechanismus implementiert werden, um diese Seitenbereiche mit der Tastatur zu überspringen (siehe Praxistipp Effiziente Navigation). | Soll | DIN EN ISO 9241-171: 9.3.16, 9.3.17 |
| 472 | Tastaturbedienung | Aufeinanderfolgende Links mit gleichem Linkziel sollen vermieden werden. Hinweis: Das gilt u. a. für Kacheln, bei denen häufig sowohl die Überschrift und ein Text am Ende (z. B. „Mehr lesen“) verlinkt sind, sowie für Links, die eine Text- und grafische Beschriftung besitzen. | Soll | WCAG 2.1: 2.4.9 (AAA) |
| 473 | Aktualisierungen | Bei Fokussierung des Links darf keine Kontextänderung erfolgen. | Muss | EN 301 549: 9.3.2.1, 11.3.2.1 |
| 474 | Klickbereich | Wenn sich der Link nicht innerhalb von Fließtext befindet, soll der Klickbereich des Links mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung). | Soll | WCAG 2.2: 2.5.8 (AA) |
Tastaturbedienung Link
Permalink zu "Tastaturbedienung Link"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Fokussieren des Links | TAB | Erforderlich |
| Verlassen des Links | TAB | Erforderlich |
| Aktivieren des Links | EINGABE | Erforderlich |
Zeigeinstrumentbedienung Link
Permalink zu "Zeigeinstrumentbedienung Link"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Aktivieren des Links | Linksklick | Erforderlich |
Programmierung/Schnittstellen
Permalink zu "Programmierung/Schnittstellen"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 475 | Rolle | Die Rolle Link muss an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 476 | Status | Der Status des Links muss an die Accessibility API übermittelt werden (siehe Elementstatus). Hinweis: Dies bezieht sich auch auf Informationen
sofern diese Information in visueller Form übermittelt wird. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 477 | Name | Der Link muss einen knappen und aussagekräftigen Accessible Name besitzen. Hinweis: Ist der Accessible Name nicht aussagekräftig, kann auch der programmatisch wahrnehmbare Linkkontext zur Übermittlung des Linkzwecks dienen. | Muss | EN 301 549: 9.2.4.4, 11.2.4.4, 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 478 | Name | Sofern der Link eine Beschreibung besitzt, muss diese als Accessible Description übermittelt werden. | Muss | EN 301 549: 9.2.4.4, 11.2.4.4, 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 479 | Bedienung | Der Link muss mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |
| 480 | Aktualisierung | Aktualisierungen hinsichtlich des Accessible Names oder Status des Links müssen an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15 |
| 481 | Desktop: Position | Größe und Position des Links müssen an die Accessibility API übermittelt werden (siehe Fokusindikator). | Muss | EN 301 549: 11.5.2.5, 11.5.2.13 |
Praxistipp Links in Web-Anwendungen
Permalink zu "Praxistipp Links in Web-Anwendungen"Screenreader-Ausgabe
Permalink zu "Screenreader-Ausgabe"- JAWS: [Beschriftung] Link | Link diese Seite | besuchter Link | Mail senden Link | FTP Link
- NVDA: [Beschriftung] Link | besucht Link
- Windows Sprachausgabe: Link [Beschriftung] Wert [URL]
Hinweis:
- JAWS und NVDA unterscheiden zwischen besuchten und nicht-besuchten Links.
- Mit JAWS ist der Link-Typ einiger Links wahrnehmbar (Link zu Email- und FTP-Adressen, seiteninterne Links).
- Mit der Windows Sprachausgabe ist der Link-Typ bei den meisten Links wahrnehmbar, weil die URL als Wert des Links ausgegeben wird. Die Ausgabe der URL erfolgt jedoch nicht korrekt, so wird z. B. „http://“ als „http skeptischer Smiley“ ausgegeben.
Der Link sollte mit dem HTML-Element <a href=URL> umgesetzt werden. Das href-Attribut ist verpflichtend.
Beschriftung:
- Die Beschriftung des Links sollte über den Textinhalt erfolgen.
- Bei grafischen Links erfolgt die Beschriftung über den Alternativtext der Grafik oder per
aria-label. Dabei sollte beachtet werden, dass die Linkbeschriftung nicht die Grafik beschreibt, sondern den Linkzweck. Wenn der Inhalt der Grafik ebenfalls relevant ist, sollten die Grafik nicht verlinkt werden, sondern sich der Link vor oder nach der Grafik befinden. - Die Beschriftung der Links sollte knapp sein. Beispiel: Bei einer Kachel mit Überschrift, Grafik, Teaser-Text, Schlagworten etc. sollte nicht die gesamte Kachel verlinkt werden, sondern lediglich die Überschrift.
- Die Beschriftung der Links sollte eindeutig und aussagekräftig sein. Links, die mit „Hier klicken“ oder „Weitere Informationen“ beschriftet sind, sind nicht aussagekräftig. Die Beschriftung sollte entweder aussagekräftig formuliert werden (z. B. „Weitere Informationen zur Barrierefreiheit“) oder die Beschreibung sollte den Linkzweck erläutern (z. B. indem per
aria-describedbyauf den relevanten Linkkontext verwiesen wird).
Status und Typ:
- Links können nicht als deaktiviert (
disabled) ausgezeichnet werden. Links, die nicht bedienbar sind, können mit dem<a>-Element ohne dashref-Attribut ausgezeichnet werden. - Bei Links, die der Seitennavigation dienen, kann mit
aria-current=pageder Link ausgezeichnet werden, der auf die aktuelle Seite verweist. - Links, die zum Ein- und Ausblenden von Bereichen dienen, sollten mit
aria-expandedausgezeichnet werden, um den Status der Bereiche (ein- oder ausgeblendet) zu übermitteln. - Links, über die ein Pop-up geöffnet wird, sollten mit
aria-haspopupausgezeichnet werden. - Sofern der Link nicht eine neue Webseite im aktuellen Browserfenster öffnet, sollte auf das abweichende Linkziel visuell hingewiesen werden (z. B. Link öffnet Seite im neuen Browserfenster, Link verweist auf ein PDF-Dokument).
- Besitzen die Links einen grafischen Hinweis, der auf den Linktyp hinweist (z. B. Link zu einer externen Seite, Link öffnet Seite im neuen Browserfenster, Link verweist auf ein PDF-Dokument, verlinkte E-Mail-Adresse), sollte diese Information auch mit Assistenztechnologien wahrnehmbar sein. In der Regel handelt es sich bei dem Linktyp um eine sekundäre Information, so dass sie dementsprechend nicht als Teil der Beschriftung, sondern als Beschreibung (z. B. per
title- oderaria-describedby-Attribut) oder zumindest erst am Ende der Beschriftung ausgegeben werden sollte.
Weitere Informationen: 4.6 Links - HTML Standard (whatwg.org) (Externer Link)
Wird der Link nicht mit dem HTML-Element umgesetzt, sollte zusätzlich zu den Hinweisen zu HTML-Links Folgendes beachtet werden:
- Die Rolle wird mit
role=linkübermittelt. - Deaktivierte Links können mit
aria-disabledausgezeichnet werden. - Die Übermittlung der Information, dass ein Link bereits besucht wurde oder dass es sich um einen seiteninternen Link handelt, ist mit ARIA-Links nicht möglich.
- Die Links sollten visuell so gekennzeichnet werden (z. B. mit einem Icon oder einer Unterstreichung), damit deren Rolle auch bei Verwendung der Windows-Kontrastanpassung wahrnehmbar ist.
Weitere Informationen: link role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Link Pattern | APG | WAI | W3C