Fgen Sie Ihrer Webseite JavaScript hinzu

ber JavaScript

JavaScript ist eine Programmiersprache, die hauptschlich clientseitig verwendet wird, um Webseiten interaktiv zu machen. Sie knnen erstaunliche Webseiten ohne JavaScript erstellen, aber JavaScript erffnet eine ganz neue Ebene von Mglichkeiten.

Wie man JavaScript aus HTML auslst

Innerhalb eines Browsers tut JavaScript allein nichts. Sie fhren JavaScript aus Ihren HTML-Webseiten heraus aus. Um JavaScript-Code aus HTML aufzurufen, bentigen Sie das <script>-Element. Es gibt zwei Mglichkeiten, script zu verwenden: abhngig 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 ausfhren mchten, 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 knnen auch JavaScript-Code zwischen <script>-Tags hinzufgen, anstatt ein src-Attribut bereitzustellen.

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

Das ist praktisch, wenn Sie nur ein kleines Stck JavaScript bentigen, aber wenn Sie JavaScript in separaten Dateien halten, wird es Ihnen leichter fallen:

• sich auf Ihre Arbeit zu konzentrieren
• eigenstndiges HTML zu schreiben
• strukturierte JavaScript-Anwendungen zu schreiben

Verwendung des Skriptings auf zugngliche Weise

Barrierefreiheit ist ein wichtiges Thema in jeder Softwareentwicklung. JavaScript kann Ihre Website zugnglicher machen, wenn Sie es mit Bedacht einsetzen, oder es kann ein Desaster werden, wenn Sie Skripting unberlegt verwenden. Um JavaScript zu Ihrem Vorteil arbeiten zu lassen, ist es sinnvoll, bestimmte bewhrte Praktiken fr das Hinzufgen von JavaScript zu kennen:

• Stellen Sie sicher, dass alle Inhalte als (strukturierter) Text verfgbar sind. Setzen Sie so viel wie mglich auf HTML fr Ihre Inhalte. Wenn Sie zum Beispiel eine schne JavaScript-Fortschrittsleiste implementiert haben, stellen Sie sicher, dass Sie diese mit passenden Textprozentstzen im HTML ergnzen. Ebenso sollten Ihre Dropdown-Mens als ungeordnete Listen von Links strukturiert sein.
• Machen Sie alle Funktionen ber die Tastatur zugnglich.
  • 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 Funktionalitt mit Tastaturereignissen.
  • Testen Sie Ihre Seite nur mit einer Tastatur.
• Setzen Sie keine Zeitlimits fest, noch raten Sie welche. Es dauert lnger, mit der Tastatur zu navigieren oder Inhalte vorgelesen zu bekommen. Sie knnen kaum vorhersagen, wie lange es fr Benutzer oder Browser braucht, einen Prozess abzuschlieen (besonders bei asynchronen Aktionen wie dem Laden von Ressourcen).
• Halten Sie Animationen subtil und kurz ohne Blinken. Blinken ist strend und kann Krmpfe verursachen. Zudem, wenn eine Animation lnger als ein paar Sekunden dauert, geben Sie dem Benutzer eine Mglichkeit, 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 fr Benutzer ohne JavaScript. Leute haben mglicherweise JavaScript ausgeschaltet, um Geschwindigkeit und Sicherheit zu verbessern, und Benutzer haben oft Netzwerkprobleme, die das Laden von Skripten verhindern. Darber hinaus knnen Drittanbieter-Skripte (Anzeigen, Tracking-Skripte, Browser-Erweiterungen) Ihre Skripte stren.
  • 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-Funktionalitt mit HTML und serverseitigem Skripting, wann immer mglich.
  • 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, unzugngliche Skripte zu schreiben.

Erfahren Sie mehr

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