Verwenden Sie JavaScript innerhalb einer Webseite

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

Innerhalb eines Browsers tut JavaScript von sich aus nichts. Sie führen JavaScript aus Ihren HTML-Webseiten aus. Um JavaScript-Code innerhalb von 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 in Ihre Webseite einbetten.

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 verweist, unter Verwendung ihrer 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 ein kleines bisschen JavaScript benötigen, aber wenn Sie JavaScript in separaten Dateien halten, werden Sie feststellen, dass es einfacher ist,

• sich auf Ihre Arbeit zu konzentrieren,
• unabhängiges 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 umsichtig verwenden, oder es kann ein Desaster werden, wenn Sie Scripting ohne Sorgfalt verwenden. Um JavaScript zu Ihrem Vorteil zu machen, lohnt es sich, bestimmte Best Practices zu kennen, um JavaScript hinzuzufügen:

• Stellen Sie alle Inhalte als (strukturierten) Text zur Verfügung. Verlassen Sie sich so weit wie möglich auf HTML für Ihre Inhalte. Wenn Sie zum Beispiel eine schöne JavaScript-Fortschrittsleiste implementiert haben, sorgen Sie dafür, dass Sie sie mit passenden Textprozenten im HTML ergänzen. Ebenso sollten Ihre Drop-Down-Menüs als ungeordnete Listen von Links strukturiert sein.

• Machen Sie alle Funktionen über die Tastatur zugänglich.

  • Lassen Sie die Benutzer durch alle Steuerelemente (z.B. Links und Formulareingaben) in logischer Reihenfolge tabben.
  • Wenn Sie Zeigereignisse (wie Maus- oder Touchereignisse) verwenden, duplizieren Sie die Funktionalität mit Tastaturereignissen.
  • Testen Sie Ihre Seite nur mit einer Tastatur.

• Setzen Sie keine Zeitlimits fest und raten Sie auch nicht darauf. Es dauert zusätzliche Zeit, um mit der Tastatur zu navigieren oder Inhalte vorzulesen. Sie können kaum vorhersagen, wie lange es für Benutzer oder Browser dauert, einen Prozess abzuschließen (insbesondere asynchrone Aktionen wie das Laden von Ressourcen).

• Halten Sie Animationen dezent und kurz ohne Blinken. Blinken ist störend und kann Anfälle verursachen. Wenn eine Animation länger als ein paar Sekunden dauert, geben Sie dem Benutzer eine Möglichkeit, sie zu stoppen.

• Lassen Sie Benutzer Interaktionen initiieren. Das bedeutet, aktualisieren Sie keine Inhalte, leiten Sie nicht weiter und aktualisieren Sie nicht automatisch. Verwenden Sie keine Karussells oder zeigen Sie Popups ohne Vorwarnung an.

• Haben Sie einen Plan B für Benutzer ohne JavaScript. Leute könnten JavaScript deaktiviert haben, um Geschwindigkeit und Sicherheit zu verbessern, und Benutzer stoßen oft auf Netzwerkprobleme, die das Laden von Skripten verhindern. Zudem können Drittanbieterskripte (Werbung, Tracking-Skripte, Browser-Erweiterungen) Ihre Skripte stören.

  • Hinterlassen Sie mindestens eine kurze Nachricht mit <noscript> wie folgt: <noscript>Um diese Seite zu verwenden, aktivieren Sie bitte JavaScript.</noscript>
  • Idealerweise replizieren Sie die JavaScript-Funktionalität mit HTML und Serverseitigem Scripting, wann immer möglich.
  • Wenn Sie nur nach einfachen visuellen Effekten suchen, kann CSS oft die Arbeit sogar noch intuitiver erledigen.
  • Da fast jeder JavaScript aktiviert hat, ist <noscript> keine Entschuldigung, um unzugängliche Skripte zu schreiben.

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