Externe und Download-Links eindeutig kennzeichnen

User Story

Als Screenreader-Nutzer:in
möchte ich vor dem Klick wissen, ob ein Link eine neue Domain öffnet oder einen Download startet,
damit ich keine unerwarteten Unterbrechungen erlebe.

Hintergrund

Die Websites des IT-Planungsrats und der FITKO unterliegen als öffentliche Stellen der BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) und müssen WCAG 2.1 Stufe AA erfüllen. Ungekennzeichnete externe Links oder Downloads stellen aus folgenden Gründen ein Hindernis dar:

1. Rechtliche Verpflichtung

   • § 12a BGG und EU-Richtlinie 2016/2102 verlangen barrierefreie digitale Angebote.
   • Fehlende Kennzeichnung gilt als Verstoß gegen WCAG 2.1 Erfolgskriterium 3.2.5 („Vorhersehbarkeit“).

2. Nutzer:innen mit Assistenztechnologien

   • Screenreader-Nutzer:innen hören nicht, ob ein Link extern öffnet oder einen Download startet.
   • Unerwartete neue Tabs/Fenster führen zu Desorientierung (z. B. bei kognitiven Einschränkungen).

3. Technische Risiken

   • Automatische Downloads können Datenvolumen belasten (z. B. bei Mobilnutzer:innen).
   • Fehlende Hinweise auf externe Domains bergen Sicherheitsrisiken (Phishing).

4. Qualitätssicherung

   • Der IT-Planungsrat und die FITKO stehen für digitale Souveränität – Barrierefreiheit ist hier ein zentraler Qualitätsstandard.

Akzeptanzkriterien

1. Externe Links erhalten sichtbares Icon + korrespondierendes aria-label („Link öffnet in neuem Tab“ o. Ä.)
2. Download-Links enthalten ebenfalls sichtbares Icon + korrespondierendes aria-label.
   Dateityp und Größe sind im Linktext angegeben, z. B. „Produktblatt (PDF, 2,3 MB)“
3. Neue Tabs/Fenster werden nur dann verwendet, wenn sie durch den vorherigen Hinweis angekündigt wurden
4. Alle Markierungen sind programmatisch erfassbar (Screenreader, Braille)
5. Das Design ist responsive; das Icon wird nicht durch display:none ausgeblendet

Technische Hinweise

• Icon z. B. als inline-SVG mit aria-hidden="true"
• CSS-Klasse .external bzw. .download zur Styling-Ebene
• Prüfung via Axe-Core und manuellem Screenreader-Test (NVDA + VoiceOver)

Definition of Done

• Alle Akzeptanzkriterien erfüllt

Epic

Barrierefreiheit (BITV 2.0 / WCAG 2.1)