Fügen Sie Ihrer Webseite JavaScript hinzu

Über JavaScript

JavaScript ist eine Programmiersprache, die hauptsächlich clientseitig verwendet wird, um Webseiten interaktiv zu machen. Sie können erstaunliche Webseiten ohne JavaScript erstellen, aber JavaScript eröffnet eine ganz neue Ebene von Möglichkeiten.

Wie man JavaScript aus HTML auslöst

Innerhalb eines Browsers tut JavaScript allein nichts. Sie führen JavaScript aus Ihren HTML-Webseiten heraus aus. Um JavaScript-Code aus HTML aufzurufen, benötigen Sie das <script>-Element. Es gibt zwei Möglichkeiten, script zu verwenden: abhängig davon, ob Sie auf ein externes Skript verlinken oder ein Skript direkt auf Ihrer Webseite einbetten.

Verlinkung eines externen Skripts

Normalerweise werden Sie Skripte in eigenen .js-Dateien schreiben. Wenn Sie ein .js-Skript von Ihrer Webseite ausführen möchten, verwenden Sie einfach <script> mit einem src-Attribut, das auf die Skriptdatei zeigt, mithilfe ihrer URL:

<script src="path/to/my/script.js"></script>

JavaScript innerhalb von HTML schreiben

Sie können auch JavaScript-Code zwischen <script>-Tags hinzufügen, anstatt ein src-Attribut bereitzustellen.

<script>
  console.log("Some code");
</script>

Das ist praktisch, wenn Sie nur ein kleines Stück JavaScript benötigen, aber wenn Sie JavaScript in separaten Dateien halten, wird es Ihnen leichter fallen:

• sich auf Ihre Arbeit zu konzentrieren
• eigenständiges HTML zu schreiben
• strukturierte JavaScript-Anwendungen zu schreiben

Verwendung des Skriptings auf zugängliche Weise

Barrierefreiheit ist ein wichtiges Thema in jeder Softwareentwicklung. JavaScript kann Ihre Website zugänglicher machen, wenn Sie es mit Bedacht einsetzen, oder es kann ein Desaster werden, wenn Sie Skripting unüberlegt verwenden. Um JavaScript zu Ihrem Vorteil arbeiten zu lassen, ist es sinnvoll, bestimmte bewährte Praktiken für das Hinzufügen von JavaScript zu kennen:

• Stellen Sie sicher, dass alle Inhalte als (strukturierter) Text verfügbar sind. Setzen Sie so viel wie möglich auf HTML für Ihre Inhalte. Wenn Sie zum Beispiel eine schöne JavaScript-Fortschrittsleiste implementiert haben, stellen Sie sicher, dass Sie diese mit passenden Textprozentsätzen im HTML ergänzen. Ebenso sollten Ihre Dropdown-Menüs als ungeordnete Listen von Links strukturiert sein.
• Machen Sie alle Funktionen über die Tastatur zugänglich.
  • Lassen Sie Benutzer durch alle Bedienelemente (z.B. Links und Formulareingaben) in einer logischen Reihenfolge mit Tabulatoren navigieren.
  • Wenn Sie Pointer-Events (wie Maus- oder Touch-Events) verwenden, duplizieren Sie die Funktionalität mit Tastaturereignissen.
  • Testen Sie Ihre Seite nur mit einer Tastatur.
• Setzen Sie keine Zeitlimits fest, noch raten Sie welche. Es dauert länger, mit der Tastatur zu navigieren oder Inhalte vorgelesen zu bekommen. Sie können kaum vorhersagen, wie lange es für Benutzer oder Browser braucht, einen Prozess abzuschließen (besonders bei asynchronen Aktionen wie dem Laden von Ressourcen).
• Halten Sie Animationen subtil und kurz ohne Blinken. Blinken ist störend und kann Krämpfe verursachen. Zudem, wenn eine Animation länger als ein paar Sekunden dauert, geben Sie dem Benutzer eine Möglichkeit, sie abzubrechen.
• Lassen Sie Benutzer Interaktionen initiieren. Das bedeutet, aktualisieren Sie Inhalte nicht automatisch, leiten Sie nicht weiter oder aktualisieren Sie nicht automatisch. Verwenden Sie keine Karussells oder zeigen Sie keine Popups ohne Warnung an.
• Haben Sie einen Plan B für Benutzer ohne JavaScript. Leute haben möglicherweise JavaScript ausgeschaltet, um Geschwindigkeit und Sicherheit zu verbessern, und Benutzer haben oft Netzwerkprobleme, die das Laden von Skripten verhindern. Darüber hinaus können Drittanbieter-Skripte (Anzeigen, Tracking-Skripte, Browser-Erweiterungen) Ihre Skripte stören.
  • Mindestens sollten Sie eine kurze Nachricht mit <noscript> hinterlassen, wie diese: <noscript>Um diese Seite zu nutzen, bitte aktivieren Sie JavaScript.</noscript>
  • Im Idealfall replizieren Sie die JavaScript-Funktionalität mit HTML und serverseitigem Skripting, wann immer möglich.
  • Wenn Sie nur nach einfachen visuellen Effekten suchen, kann CSS oft die Aufgabe noch intuitiver erledigen.
  • Da fast jeder JavaScript aktiviert hat, ist <noscript> keine Entschuldigung, unzugängliche Skripte zu schreiben.

Erfahren Sie mehr

• <script>
• <noscript>
• JavaScript mit Blick auf Barrierefreiheit schreiben von Manuel Matuzovic (2017)
• Barrierefreiheitsrichtlinien der W3C