Deaktivieren und Deaktivieren von Links im HTML

<a href="beispiel.html" disabled>Beispiel</a>

Ein weiterer Ansatz zur Deaktivierung von Links ist die Verwendung von JavaScript. Mit JavaScript kannst du die onclick-Eigenschaft eines Anker-Elements auf eine leere Funktion oder eine Funktion setzen, die verhindert, dass das Standardverhalten des Links ausgeführt wird. Beispiel:

document.querySelector("a").onclick = function(event) {
  event.preventDefault();
};

Das disabled-Attribut

Eine einfache und unkomplizierte Methode zum Deaktivieren von Links im HTML ist die Verwendung des disabled-Attributs. Dieses Attribut kann jedem Link-Element (z. B. <a>) hinzugefügt werden, um es für Benutzer als nicht anklickbar zu kennzeichnen.

Funktionsweise

Wenn du das disabled-Attribut auf einen Link anwendest, passiert Folgendes:

• Der Link erscheint grau oder abgedunkelt.
• Ein Mauszeiger über dem Link zeigt einen Cursor in Form eines durchgestrichenen Kreises an, um zu signalisieren, dass der Link deaktiviert ist.
• Klicks auf den Link haben keine Wirkung.

Vorteile

Die Verwendung des disabled-Attributs bietet einige Vorteile:

• Einfach zu implementieren: Es ist eine unkomplizierte Methode, die keine Programmierkenntnisse erfordert.
• Browser-Unterstützung: Das disabled-Attribut wird von allen gängigen Browsern unterstützt.
• Barrierefreiheit: Es ist eine barrierefreie Methode, da Benutzer mit Behinderungen den Link leicht als deaktiviert erkennen können.

Verwendung

Um das disabled-Attribut zu verwenden, füge es einfach dem Link-Element hinzu:

<a href="#" disabled>Deaktivierter Link</a>

Alternativ kannst du für ein noch deutlicheres Signal auch die Eigenschaft aria-disabled="true" hinzufügen:

<a href="#" disabled aria-disabled="true">Deaktivierter Link</a>

Wann sollte das disabled-Attribut verwendet werden?

Das disabled-Attribut sollte in folgenden Situationen verwendet werden:

• Wenn du einen Link vorübergehend deaktivieren möchtest, z. B. wenn die Zielseite noch nicht verfügbar ist.
• Wenn du einen Link deaktivierst, der nicht mehr relevant oder veraltet ist.
• Wenn du einen Link deaktivierst, der zu einer Aktion führt, die nicht ausgeführt werden soll, z. B. eine gefährliche Aktion.

JavaScript

JavaScript bietet eine dynamische Möglichkeit, Links zu deaktivieren und zu aktivieren. Hier sind die Schritte:

Link per ID deaktivieren

const link = document.getElementById("myLink");
link.disabled = true;

Links per Klasse deaktivieren

const links = document.getElementsByClassName("disabled-link");
for (let i = 0; i < links.length; i++) {
  links[i].disabled = true;
}

Links per Event deaktivieren

const link = document.getElementById("myLink");
link.addEventListener("click", (e) => {
  e.preventDefault();
  alert("Link wurde deaktiviert!");
});

Vorteile von JavaScript zur Deaktivierung von Links

• Dynamische Steuerung: Du kannst Links abhängig von bestimmten Bedingungen oder Benutzereingaben aktivieren und deaktivieren.
• Barrierefreiheit: Du kannst Links für Benutzer mit eingeschränkter Motorik oder Sehbehinderung deaktivieren, um eine bessere Barrierefreiheit zu gewährleisten.
• Verbesserte Benutzerfreundlichkeit: Du kannst Links deaktivieren, die zu Seiten mit eingeschränkten Berechtigungen oder zu veralteten Inhalten führen.

Auswirkungen der Deaktivierung von Links

Die Deaktivierung von Links kann erhebliche Auswirkungen auf die Barrierefreiheit, Suchmaschinenoptimierung (SEO) und die Benutzererfahrung haben.

Auswirkung auf die Barrierefreiheit

Deaktivierte Links können für Personen mit Behinderungen, wie z. B. Sehbehinderungen, zu einem Hindernis werden. Screenreader und andere assistive Technologien verlassen sich auf die korrekte Kennzeichnung und Aktivierung von Links, um Benutzern den Zugriff auf Informationen zu ermöglichen. Die Deaktivierung von Links kann daher die Zugänglichkeit deiner Website für diese Benutzer verringern.

Auswirkung auf die Suchmaschinenoptimierung (SEO)

Links sind ein wichtiger Faktor für SEO. Sie helfen Suchmaschinen, die Relevanz und Autorität deiner Website einzuschätzen. Deaktivierte Links werden von Suchmaschinen in der Regel nicht gecrawlt oder indexiert, was bedeutet, dass du wertvollen Traffic von Suchmaschinen verpassen kannst.

Auswirkung auf die Benutzererfahrung

Deaktivierte Links können auch die Benutzererfahrung beeinträchtigen. Wenn Benutzer auf einen deaktivierten Link klicken und nichts passiert, kann dies zu Verwirrung und Frustration führen. Darüber hinaus können deaktivierte Links den Gesamteindruck und die Glaubwürdigkeit deiner Website beeinträchtigen, da sie unangekündigte oder unvollständige Informationen suggerieren.

Auswirkung auf die Barrierefreiheit

Wenn du Links deaktivierst, solltest du die Auswirkungen auf die Barrierefreiheit deiner Website berücksichtigen. Personen mit Behinderungen, wie z. B. Sehbehinderungen oder motorischen Einschränkungen, verlassen sich oft auf Hilfsmittel und Techniken, um auf das Internet zuzugreifen. Die Deaktivierung von Links kann es für diese Benutzer schwierig machen, auf wichtige Inhalte und Funktionen zuzugreifen.

Auswirkung auf Benutzer mit Sehbehinderungen

Wenn Links deaktiviert sind, sind sie möglicherweise für Benutzer mit Sehbehinderungen, die Bildschirmlesegeräte verwenden, nicht mehr zu unterscheiden. Diese Geräte lesen den Text auf einer Website vor, einschließlich Links. Deaktivierte Links werden möglicherweise nicht als Links erkannt und können daher von diesen Benutzern nicht angeklickt werden.

Auswirkung auf Benutzer mit motorischen Einschränkungen

Benutzer mit motorischen Einschränkungen können Schwierigkeiten haben, deaktivierte Links mit einer Maus oder Tastatur anzuklicken. Dies kann es ihnen erschweren, auf Inhalte zuzugreifen, die über diese Links verfügbar sind.

Best Practices für die Barrierefreiheit

Um die Barrierefreiheit zu gewährleisten, vermeide es nach Möglichkeit, Links zu deaktivieren. Wenn die Deaktivierung eines Links unbedingt erforderlich ist, stelle sicher, dass du:

• Eine alternative Möglichkeit zur Verfügung stellst, auf den Inhalt zuzugreifen, wie z. B. über einen Textlink oder eine Schaltfläche.
• Den Link auch für assistierende Technologien zugänglich machst, indem du ihm angemessene ARIA-Attribute zuweist.
• Dem Link einen beschreibenden Linktext gibst, der den Zweck des Links deutlich macht.

Auswirkung auf die Suchmaschinenoptimierung (SEO)

Die Deaktivierung von Links kann Auswirkungen auf deine Suchmaschinenoptimierung (SEO) haben. Hier sind einige wichtige Punkte, die du beachten solltest:

Auswirkungen auf das Crawlen und Indexieren

• Suchmaschinen-Crawler wie Googlebot können deaktivierte Links nicht folgen.
• Dies bedeutet, dass die Seiten, auf die diese Links verweisen, möglicherweise nicht gecrawlt oder indiziert werden.
• Dies kann zu einer geringeren Sichtbarkeit in den Suchergebnissen (SERPs) führen, da diese Seiten nicht indiziert sind und daher nicht ranken können.

Auswirkungen auf die Linkpopularität

• Links von anderen Websites sind ein wichtiger Faktor für SEO.
• Deaktivierte Links können keine Linkpopularität vermitteln.
• Dies kann die Gesamtlinkpopularität deiner Website verringern und sich negativ auf deine Platzierungen in den SERPs auswirken.

Auswirkungen auf Benutzererfahrung und Vertrauenswürdigkeit

• Benutzer können sich verwirrt oder frustriert fühlen, wenn sie auf einen deaktivierten Link klicken.
• Dies kann die Benutzererfahrung beeinträchtigen und das Vertrauen in deine Website verringern.
• Suchmaschinen berücksichtigen die Benutzererfahrung bei der Bestimmung der Platzierungen in den SERPs. Eine schlechte Benutzererfahrung kann sich daher negativ auf deine SEO auswirken.

Wann ist die Deaktivierung von Links aus SEO-Perspektive sinnvoll?

Es gibt einige Fälle, in denen die Deaktivierung von Links aus SEO-Perspektive sinnvoll sein kann:

• Wenn du Links zu Seiten entfernen möchtest, die nicht mehr existieren.
• Wenn du Links zu Seiten deaktivierst, die noch in Entwicklung sind und nicht indiziert werden sollen.
• Wenn du auf deiner Website doppelten Inhalt verhindern möchtest.

In diesen Fällen ist es jedoch wichtig, eine entsprechende Alternative zu erstellen, z. B. eine Weiterleitung (Redirect) oder eine klare Meldung, die den Benutzer darüber informiert, dass die Seite nicht mehr verfügbar ist.

Alternativen zur Deaktivierung von Links

Wenn das Deaktivieren von Links nicht die beste Lösung ist, stehen dir folgende Alternativen zur Verfügung:

Links verstecken

Anstatt Links zu deaktivieren, kannst du sie verstecken. Dies kann durch Anwenden von CSS-Eigenschaften wie display: none oder visibility: hidden erreicht werden. Versteckte Links sind für Benutzer nicht mehr sichtbar, können aber von Suchmaschinen immer noch indiziert werden.

Greyed-Out-Links

Eine weitere Alternative besteht darin, Links ausgegraut oder in einer anderen Farbe darzustellen. Diese Methode signalisiert den Benutzern, dass die Links noch aktiv sind, aber möglicherweise nicht sofort verfügbar oder nicht für sie relevant sind.

Verwendung von JavaScript

JavaScript kann verwendet werden, um die Interaktion mit Links zu steuern. Du kannst beispielsweise ein Ereignis hinzufügen, das verhindert, dass ein Link angeklickt wird, oder eine temporäre Deaktivierung festlegen, bis eine bestimmte Bedingung erfüllt ist.

Wann sollten diese Alternativen verwendet werden?

• Verstecken von Links: Verwende diese Methode, wenn du Links aus dem sichtbaren Bereich entfernen möchtest, ohne sie zu deaktivieren.
• Greyed-Out-Links: Verwende diese Methode, um anzuzeigen, dass Links nicht sofort verfügbar sind, aber in Zukunft wieder verfügbar sein könnten.
• JavaScript: Verwende diese Methode, um die Interaktion mit Links dynamisch zu steuern, basierend auf bestimmten Bedingungen oder Benutzerinteraktionen.

Verstecken von Links

Neben der Deaktivierung kannst du Links auch ausblenden, um sie für Benutzer unsichtbar zu machen. Diese Methode kann in folgenden Szenarien nützlich sein:

Gründe für das Verstecken von Links

• Organisieren von Menüs: Du kannst versteckte Links verwenden, um Dropdown-Menüs zu erstellen, die nur angezeigt werden, wenn der Benutzer mit der Maus über den Hauplink fährt.
• Bereitstellung von Zusatzinformationen: Du kannst Inhalte wie Tooltips oder Lightboxen mit versteckten Links auslösen, die beim Klicken zusätzliche Informationen anzeigen.
• Dekoration: Du kannst versteckte Links verwenden, um dekorative Elemente zu erstellen, wie z. B. einen unsichtbaren Call-to-Action-Button.

Methoden zum Verstecken von Links

Es gibt mehrere Möglichkeiten, Links zu verstecken:

• CSS-Eigenschaften: Verwende CSS-Eigenschaften wie display: none oder visibility: hidden, um Links auszublenden.
• JavaScript: Verwende JavaScript, um die Sichtbarkeit von Links dynamisch zu steuern.
• Bildoptimierung: Konvertiere Links in Bilder und benutze CSS, um sie transparent zu machen.

Auswirkungen des Versteckens von Links

Das Verstecken von Links hat folgende Auswirkungen:

• Barrierefreiheit: Versteckte Links können für Benutzer mit eingeschränkter Mobilität oder Sehschwäche schwer zu finden sein.
• Suchmaschinenoptimierung (SEO): Suchmaschinen können versteckte Links möglicherweise nicht indizieren, was sich auf deine SEO auswirken kann.

Best Practices für das Verstecken von Links

Wenn du Links versteckst, befolge diese Best Practices:

• Informiere Benutzer: Verwende Beschriftungen oder hervorgehobene Links, um Benutzer darauf hinzuweisen, dass klickbare Elemente vorhanden sind.
• Überprüfe die Barrierefreiheit: Verwende Screenreader-Testtools, um sicherzustellen, dass versteckte Links für Benutzer mit eingeschränkter Mobilität zugänglich sind.
• Überlege dir die SEO: Vermeide das Verstecken wichtiger Links, da dies sich negativ auf deine SEO-Leistung auswirken kann.

Greyed-Out-Links

Greyed-Out-Links sind Links, denen visuell die Farbe entzogen wurde, wodurch sie inaktiv erscheinen. Sie sind eine ästhetisch ansprechende Möglichkeit, Links zu deaktivieren, ohne ihr Vorhandensein vollständig zu verbergen.

Vorteile von Greyed-Out-Links

• Verbesserte Barrierefreiheit: Im Gegensatz zu versteckten Links bleiben Greyed-Out-Links für Screenreader und assistive Technologien sichtbar und ermöglichen so die Interaktion mit ihnen für Benutzer mit Behinderungen.
• Visuelle Hinweise: Greyed-Out-Links vermitteln visuell, dass ein Link deaktiviert ist, und verhindern so, dass Benutzer versehentlich darauf klicken und Fehler auftreten.
• Aesthetics: Greyed-Out-Links können das Design einer Website verbessern, indem sie unauffällig bleiben und das Design nicht stören.

So erstellst du Greyed-Out-Links

Um Greyed-Out-Links zu erstellen, kannst du CSS verwenden:

a.disabled {
  color: #888;
  cursor: default;
}

Dies entfernt die Farbe des Links (color: #888) und ändert den Cursor in einen Standardcursor (cursor: default), um anzuzeigen, dass er inaktiv ist.

Wann Greyed-Out-Links verwendet werden sollten

Greyed-Out-Links sind in folgenden Fällen geeignet:

• Temporär deaktivierte Links: Wenn Links aufgrund von Wartungsarbeiten oder Aktualisierungen vorübergehend deaktiviert sind.
• Links zu zukünftigen Funktionen: Wenn du Platzhalter für geplante Funktionen oder Seiten einfügst, die noch nicht verfügbar sind.
• Dekorative Links: Wenn Links Teil eines Designs sind und nicht angeklickt werden sollen.

Best Practices für die Deaktivierung von Links

Beim Deaktivieren von Links ist es wichtig, einige Best Practices zu beachten, um die Benutzerfreundlichkeit, Barrierefreiheit und SEO zu gewährleisten:

Wann sollten Links deaktiviert werden?

• Wenn der Link auf eine Seite oder ein Dokument verweist, das nicht mehr existiert oder aktuell ist.
• Wenn der Link zu einer Funktion führt, die derzeit nicht verfügbar ist, z. B. wenn ein Registrierungsformular aufgrund von Wartungsarbeiten gesperrt ist.
• Wenn der Link zu Inhalten führt, die für den aktuellen Kontext nicht relevant sind oder die Benutzer verwirren könnten.

Vermeide die Deaktivierung wichtiger Links

Deaktiviere niemals Links, die für die Navigation oder den Zugriff auf wesentliche Informationen wichtig sind. Dies kann die Benutzererfahrung beeinträchtigen und es Benutzern mit eingeschränkter Mobilität oder Assistive Technologien erschweren, auf deine Website zuzugreifen.

Überprüfe die Barrierefreiheit

Stelle sicher, dass deaktivierte Links für Screenreader und andere Assistive Technologien auf die gleiche Weise wie aktive Links identifizierbar sind. Dies kann durch die Verwendung des aria-disabled-Attributs oder durch visuelle Hinweise wie graue Farbe oder Durchstreichung erreicht werden.

Weitere Best Practices

• Verwende deaktivierte Links sparsam: Übermäßige Deaktivierung von Links kann die Benutzerfreundlichkeit beeinträchtigen.
• Informiere die Benutzer: Gib den Benutzern einen Grund für die Deaktivierung des Links an, um Verwirrung zu vermeiden.
• Überprüfe regelmäßige: Überprüfe regelmäßig deaktivierte Links, um sicherzustellen, dass sie immer noch korrekt sind und für die Benutzer keinen Schaden verursachen.

Wann Links deaktiviert werden sollten

Du solltest Links deaktivieren, wenn:

Der Link zu einem defekten Ziel führt

Wenn der Link auf eine Seite verweist, die nicht existiert oder nicht mehr verfügbar ist, solltest du ihn deaktivieren. Dies verhindert, dass Benutzer auf eine Fehlermeldung stoßen oder Zeit verschwenden, indem sie versuchen, auf Inhalte zuzugreifen, die nicht verfügbar sind.

Der Link zu sensiblen oder gefährlichen Inhalten führt

Du solltest Links zu Inhalten deaktivieren, die für bestimmte Zielgruppen ungeeignet sind, wie z. B. explizite Inhalte, Malware oder Betrug. Dies schützt deine Benutzer vor potenziellen Schäden oder Unannehmlichkeiten.

Der Link zu einer Aktion führt, die nicht ausgeführt werden kann

Wenn der Link eine Aktion auslösen soll, die nicht ausgeführt werden kann oder nicht mehr möglich ist, solltest du ihn deaktivieren. Dies verhindert, dass Benutzer verwirrt oder frustriert werden, wenn sie versuchen, etwas zu tun, das nicht mehr möglich ist.

Der Link zu einer Seite führt, die nicht mehr relevant ist

Wenn der Link auf eine Seite verweist, die nicht mehr relevant oder aktuell ist, solltest du ihn deaktivieren. Dies verbessert die Benutzererfahrung, indem irrelevante Inhalte aus den Suchergebnissen entfernt werden.

Der Link zu einer Seite führt, die nicht autorisiert ist

Du solltest Links zu Seiten deaktivieren, die Benutzer ohne entsprechende Berechtigungen nicht aufrufen dürfen. Dies verhindert unbefugten Zugriff und schützt sensible Informationen.

Vermeiden der Deaktivierung wichtiger Links

Auch wenn das Deaktivieren von Links in bestimmten Szenarien hilfreich sein kann, ist es wichtig, die negativen Auswirkungen auf die Benutzerfreundlichkeit und die Barrierefreiheit zu berücksichtigen. Daher solltest du es vermeiden, wichtige Links zu deaktivieren, die für die Navigation oder die Funktionalität deiner Website unerlässlich sind.

Auswirkung auf die Benutzerfreundlichkeit

Die Deaktivierung wichtiger Links kann die Benutzererfahrung beeinträchtigen, insbesondere für Benutzer, die auf Tastaturen oder Hilfstechnologien angewiesen sind. Diese Benutzer verlassen sich auf Links, um durch die Seite zu navigieren, und die Deaktivierung dieser Links kann es ihnen unmöglich machen, auf wichtige Inhalte oder Funktionen zuzugreifen.

Auswirkung auf die Barrierefreiheit

Die Deaktivierung von Links kann gegen die Barrierefreiheitsrichtlinien verstoßen, wie z. B. die Web Content Accessibility Guidelines (WCAG). WCAG verlangt, dass Websites für alle Benutzer zugänglich sind, einschließlich Benutzer mit Behinderungen. Dazu gehört der Zugriff auf alle wichtigen Navigations- und Funktionslinks.

Auswirkungen auf die Suchmaschinenoptimierung

Suchmaschinen wie Google betrachten deaktivierte Links als nicht vorhanden. Das bedeutet, dass Inhalte, die hinter deaktivierten Links liegen, nicht von Suchmaschinen indiziert werden und daher nicht in den Suchergebnissen erscheinen. Dies kann sich negativ auf die Sichtbarkeit und den Traffic deiner Website auswirken.

Wann solltest du wichtige Links deaktivieren?

Es gibt nur wenige Fälle, in denen es gerechtfertigt sein kann, wichtige Links zu deaktivieren. Beispielsweise könntest du einen Link deaktivieren, der zu einer Seite führt, die sich noch in der Entwicklung befindet, oder zu einer Seite, deren Inhalt nur für bestimmte Benutzergruppen relevant ist. Selbst in diesen Fällen solltest du sorgfältig abwägen, ob die Deaktivierung des Links die Benutzerfreundlichkeit und Barrierefreiheit beeinträchtigt.

Überprüfen der Barrierefreiheit

Beim Deaktivieren von Links ist es von entscheidender Bedeutung, die Barrierefreiheit zu berücksichtigen. Menschen mit Behinderungen, wie z. B. Sehbehinderungen oder kognitiven Beeinträchtigungen, verlassen sich auf Technologien wie Bildschirmlesegeräte, um mit Websites zu interagieren.

Barrierefreiheitsprobleme

• Verborgene Informationen: Wenn du Links deaktivierst, können Bildschirmlesegeräte sie nicht mehr erkennen. Dies kann zu Problemen für Benutzer führen, die auf die Informationen zugreifen müssen, die über die Links verlinkt sind.
• Verwirrendes Layout: Deaktivierte Links können ein verwirrendes Layout auf der Seite verursachen, was es für Benutzer schwierig machen kann, die Website zu navigieren.
• Schwierigkeiten bei der Interaktion: Benutzer, die Tastaturen oder andere Hilfsmittel verwenden, können Schwierigkeiten haben, auf deaktivierte Links zuzugreifen.

Best Practices

Um Probleme mit der Barrierefreiheit zu vermeiden, solltest du folgende Best Practices beachten: