Verwendung von JavaScript innerhalb einer Webseite

JavaScript ist eine Programmiersprache, die hauptsächlich clientseitig verwendet wird, um Webseiten interaktiv zu machen. Es ist möglich, beeindruckende Webseiten ohne JavaScript zu erstellen, aber JavaScript eröffnet eine ganz neue Ebene an Möglichkeiten.

In einem Browser tut JavaScript allein nichts. Sie führen JavaScript von innerhalb Ihrer HTML-Webseiten aus. Um JavaScript-Code aus HTML heraus 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 in Ihre Webseite einbetten.

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

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

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

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
</script>

Das ist praktisch, wenn Sie nur eine kleine Menge JavaScript benötigen, aber wenn Sie JavaScript in separaten Dateien halten, wird es Ihnen leichter fallen,

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

Zugänglichkeit ist ein zentrales Thema in jeder Softwareentwicklung. JavaScript kann Ihre Website zugänglicher machen, wenn Sie es klug verwenden, oder es kann zum Desaster werden, wenn Sie Skripting ohne Vorsicht einsetzen. Um JavaScript zu Ihrem Vorteil zu nutzen, sollten Sie bestimmte Best Practices für die Einbindung von JavaScript kennen:

• Stellen Sie alle Inhalte als (strukturierten) Text bereit. Setzen Sie, soweit möglich, auf HTML für Ihre Inhalte. Wenn Sie beispielsweise eine schöne JavaScript-Fortschrittsleiste implementiert haben, ergänzen Sie diese mit passenden Textprozenten innerhalb des HTML. Ebenso sollten Ihre Dropdown-Menüs als unsortierte Listen von Links strukturiert sein.

• Stellen Sie sicher, dass alle Funktionen über die Tastatur zugänglich sind.

  • Lassen Sie Benutzer durch alle Bedienelemente (z.B. Links und Formulareingaben) in einer logischen Reihenfolge tabben.
  • Wenn Sie Zeigegeräteereignisse (wie Mausereignisse oder Touchereignisse) verwenden, duplizieren Sie die Funktionalität mit Tastaturereignissen.
  • Testen Sie Ihre Seite ausschließlich mit der Tastatur.

• Stellen Sie keine Zeitlimits ein und raten Sie auch nicht. Es braucht zusätzliche Zeit, um mit der Tastatur zu navigieren oder vorgelesene Inhalte zu hören. Sie können kaum vorhersagen, wie lange Benutzer oder Browser benötigen, um einen Prozess abzuschließen (insbesondere asynchrone Aktionen wie das Laden von Ressourcen).

• Halten Sie Animationen dezent und kurz und vermeiden Sie Blinken. Blinken ist störend und kann Anfälle verursachen. Wenn eine Animation länger als ein paar Sekunden dauert, geben Sie den Benutzern eine Möglichkeit, sie abzubrechen.

• Lassen Sie Benutzer Interaktionen initiieren. Das bedeutet, aktualisieren Sie Inhalte nicht automatisch und führen Sie keine automatischen Umleitungen oder Aktualisierungen durch. Verwenden Sie keine Karussells oder Pop-ups ohne Vorwarnung.

• Haben Sie einen Plan B für Benutzer ohne JavaScript. Menschen können JavaScript deaktiviert haben, um Geschwindigkeit und Sicherheit zu verbessern, und Benutzer erleben oft Netzprobleme, die das Laden von Skripten verhindern. Darüber hinaus können Drittanbieter-Skripte (Werbungen, Tracking-Skripte, Browser-Erweiterungen) Ihre Skripte stören.

  • Lassen Sie mindestens eine kurze Nachricht mit <noscript> wie diese: <noscript>Um diese Seite zu verwenden, aktivieren Sie bitte JavaScript.</noscript>
  • Idealerweise replizieren Sie die JavaScript-Funktionalität mit HTML und serverseitigem Skripting, wenn möglich.
  • Wenn Sie nur einfache visuelle Effekte wünschen, kann CSS oft die Aufgabe sogar noch intuitiver erledigen.
  • Da fast jeder JavaScript aktiviert hat, ist <noscript> keine Entschuldigung für das Schreiben unzugänglicher Skripte.

• <script>
• <noscript>
• Einführung in die zugängliche Nutzung von JavaScript von James Edwards
• Zugänglichkeitsrichtlinien der W3C