PDF Indikator

Barrierefreiheit und Nutzungsfreundlichkeit

Vorteile der Kennzeichnung

PDF-Dateien unterscheiden sich im Aufbau und einigen Funktionalitäten von Webseiten. Öffnet ein Klick auf einen Link unerwartet ein neues Fenster mit einer PDF-Datei führt dies bei blinden Menschen zunächst zu Verwirrung.

Es sollte daher im Link ein Hinweis vorgesehen werden, dass ein Klick zu einer PDF-Datei führt.

Text oder Icon als Hinweis?

Icons benötigen wenig Platzt am Bildschirm und reduzieren den Leseaufwand.

Doch was, wenn die Bedeutung eines solchen Icons nicht bekannt ist? Wenn ein Link den Anforderungen für leichtes Lesen entsprechen muss, sollte anstelle des Icons ein Text dargestellt werden. Der Leseaufwand ist ohnedies Minimal.

Ergänzender Text als Hinweis

Suffix als Text

Der Hinweis auf die Verlinkung zu einer PDF-Datei erfolgt gewöhnlich in einem Suffix zur Beschriftung. Der HTML-Code sieht dabei etwa folgendermaßen aus:

<a
  href="[Pfad und Dateiname].pdf">
  [Linkbeschriftung] (PDF)
</a>

CSS Anweisung für Suffix

Mit der CSS-Eigenschaft content kann Inhalt zu einem Element hinzugefügt werden. Auf diese Weise kann einfach und einheitlich für einen gesamten Webauftritt zu PDF-Links ein Hinweis ergänzt werden. Die Anordnung hinter dem Linktext wird durch das Pseudoelement ::after erzielt.

Der Eintrag in eine CSS-Datei kann etwa folgendermaßen aussehen:

a[href$=".pdf"]::after { 
  content: "(PDF)" ; 
}

Wenn Stylesheets aus irgendeinem Grund deaktiviert sind, wird der ergänzende Hinweis nicht angezeigt.

Script-Anweisung für Suffix

Auch mit JavaScripts kann einfach und einheitlich für einen Webauftritt zu einem Link ein Hinweis auf das PDF-Format des Linkziels hingewiesen werden. Das Script zum Ergänzen von Hinweistext kann etwa folgendermaßen aussehen:

document.addEventListener("DOMContentLoaded", function () {
  const links = document.querySelectorAll("a[href$='.pdf']");
  links.forEach(function (link) {
    link.textContent = link.textContent + " (PDF)";
  });
});

Script für ergänzenden Hinweistext

Wenn JavaScript deaktiviert ist, wird der ergänzende Hinweis nicht angezeigt.

Icon als Indikator

CSS-Icon mit Textalternative

Mit der CSS-Eigenschaft content kann auch ein Bild eingefügt werden. Der Inhalt besteht zunächst aus dem Pfad zur Grafik. Hinter einem Schrägstrich wird der Text festgelegt, der anstelle des Bildes von einem Screen Reader ausgegeben werden soll. Die textuelle Alternative für das Icon besteht natürlich nicht aus einer Beschreibung der Grafik, sondern informiert über die Eigenart des Links.

Der Eintrag in eine CSS-Datei kann etwa folgendermaßen aussehen:

a[href$=".pdf"]::after { 
  content: url("[Bildpfad]") / "PDF" ; 
}

Icon mit Ausweichmechanismus

Um auch bei deaktivierten Stylesheets einen Hinweis auf die Eigenart des Links zu gewährleisten, sollte ein Fallback-Mechanismus bereitgestellt werden. Dieser kann etwa auf folgende Weise realisiert werden:

1. Das Icon wird durch CSS in einem span-Element eingebunden.
2. Das Icon wird mittels aria-hidden für Screen Reader verborgen.
3. Die textuelle Alternative wird als Text in einem weiteren span-Element realisiert und nicht nur mittels CSS.
4. Die Textalternative wird durch eine CSS-Klasse vorerst vom Bildschirm verborgen, bleibt jedoch für Screen Reader wahrnehmbar ( sr-only ).

Bei deaktivierten Stylesheets verschwindet das Icon, der mittels CSS verborgene Text wird jedoch eingeblendet (PDF).

Der HTML-Code ist dabei folgendermaßen aufgebaut:

<a
  href="[Bildpfad].pdf">
  [Dateititel]
  <span
    class="pdf-icon"
    aria-hidden="true">
  </span>
  <span
    class="sr-only">
    (PDF)
  </span>
</a>

Kontexthinweise auf Links

Dass ein Link zu einem anderen Webauftritt führt, kann auch aus dem Kontext hervorgehen. Insbesondere Listen zu externen Auftritten benötigen bei entsprechenden Vorkehrungen keinen Indikator, der explizit auf den Wechsel zu einer anderen Seite hinweist.

Überschrift für Linkliste

Handelt es sich um eine Sammlung von Links zu externen Auftritten, kann dies durch eine Überschrift kenntlich gemacht werden:

Logos als Indikatoren für externe Links

Sei es eine Liste von Social Media Verknüpfungen, Sponsoren, Netzwerkpartner*innen oder eine Imagemap. Das jeweilige Logo, Ländergrenzen oder Ähnliches können bereits auf externe Webauftritte hinweisen. In diesen Fällen können das Logo, ein Länderwappen oder eine Fahne schon als visueller Indikator für eine Verlinkung zu externen Inhalten gelten.

Das Icon muss jedoch über eine Textalternative verfügen:

• Wird das Icon als HTML img-Element eingebunden muss die Zielseite im alt-Attribut beschrieben werden.
• Wird das Icon mittels CSS als Hintergrundgrafik eingebettet, stehen folgende Optionen zur Verfügung.
  1. Die Textalternative wird in einem span-Element mittels CSS off-screen dargestellt (sr-only).
  2. Die Textalternative wird mittels der CSS-Eigenschaft content realisiert.

WCAG Erfolgskriterien

Folgende Erfolgskriterien der WCAG können für Indikatoren für externe Links relevant sein:

1.1.1 Nicht-textueller Inhalt

Icons innerhalb von Links, welche die Bedeutung der Zielseite beschreiben, benötigen textuelle Alternativen.

1.4.3: Kontrast (Minimum)

Schriften benötigen einen minimalen Helligkeitskontrast von 4,5∶1 zum Hintergrund. Dies gilt auch für Hinweise zum Linkziel in Textform.

1.4.11 Nicht-textueller Kontrast

Icons müssen als Indikatoren in ihrer visuellen Präsentation ein Kontrastverhältnis von mindestens 3∶1 aufweisen.

2.4.4 Linkzweck (Im Kontext)

Die Beschriftung eines Links muss zumindest im engen technischen Kontext den Inhalt des Linkziels beschreiben.

Die Eigenart einer Zielseite kann dabei von Relevanz sein (Dateiformat, externe Ressource, fremdsprachiger Inhalt).

2.4.9 Linkzweck (Allein)

Konformitätsstufe AAA

Die Beschriftung eines Links muss für sich den Inhalt der Zielseite beschreiben.

Die Eigenart einer Zielseite kann dabei von Relevanz sein (Dateiformat, externe Ressource, fremdsprachiger Inhalt).

3.2.4 Konsistente Identifikation

Die Darstellung von Links zu externen Auftritten muss innerhalb eines Webauftritts gleichbleiben.

3.2.5 Änderung auf Anfrage

Änderungen des Kontexts bedürfen einer Vorinformation. Eine fehlende Information über die Verlinkung zu einem anderen Webauftritt dürfte jedoch „lediglich“ ein allgemeines Problem der Nutzungsfreundlichkeit darstellen.