Links sind das Herzstück des Internets, aber nicht alle Links sind gleich. Mit den richtigen HTML-Attributen kannst du Links sicherer, zugänglicher und informativer gestalten. Drei wichtige Attribute sind rel, title und aria-label.
1. Das rel-Attribut: Mehr als nur ein Link
Das rel-Attribut beschreibt die Beziehung zwischen der aktuellen Seite und der Zielseite. Hier sind einige wichtige Werte:
noopener: Schützt vor Tabnapping (verhindert Manipulation durch die verlinkte Seite).noreferrer: Unterdrückt den Referrer (die Zielseite sieht nicht, woher der Besucher kommt).nofollow: Sagt Suchmaschinen, dass sie dem Link nicht folgen sollen (wichtig für SEO).external: Zeigt an, dass der Link zu einer externen Seite führt.
Beispiel:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Sicherer Link</a>
Dieser Link öffnet sich in einem neuen Tab, aber ohne Risiko für die Ausgangsseite.
2. Das title-Attribut: Zusätzliche Infos als Tooltip
Das title-Attribut zeigt einen kleinen Hinweis an, wenn Nutzer mit der Maus über den Link fahren.
Beispiel:
<a href="https://example.com" title="Mehr über Example erfahren">Mehr erfahren</a>
Gut für Usability, aber nicht barrierefrei, da Screenreader das Attribut oft ignorieren.
3. Das aria-label-Attribut: Barrierefreiheit verbessern
Wenn ein Link nur ein Icon enthält oder der Standard-Text nicht selbsterklärend ist, hilft aria-label, ihn für Screenreader-Nutzer verständlicher zu machen.
Beispiel:
<a href="https://example.com" aria-label="Besuche Example">🔗</a>
So wissen auch blinde Nutzer, was sich hinter dem Link verbirgt.
Melde dich jetzt für den besten WP-Newsletter an
Fazit: Die perfekte Kombination für gute Links
- Sicherheit?
rel="noopener noreferrer" - Usability?
title="Tooltip-Info" - Barrierefreiheit?
aria-label="Beschreibung für Screenreader"
Mit diesen drei Attributen machst du deine Links sicherer, benutzerfreundlicher und inklusiver. 🚀
