JavaScript Event-Handler

Überblick

Event-Handler finden sich in bereits bestehendem HTML-Code oder in dynamisch erzeugtem Content und werden durch den Browser oder ein Benutzerereignis ausgelöst – etwa beim Laden der Seite, wenn der Benutzer mit der Maus klickt oder wenn es 8 Uhr abends ist. Manche Event-Handler sind von einer Maus- oder Tastaturaktion abhängig. Man nennt sie geräteabhängige Event-Handler. Andere Event-Handler sind nicht von Geräten abhängig und werden von beiden (Maus und Tastatur) aufgerufen oder von anderen Hilfsmitteln.

onMouseOver und onMouseOut

Der onMouseOver-Event-Handler wird aufgerufen, wenn der Mauszeiger über einem Element platziert wird. Wie der Name verrät, verlangt onMouseOver die Verwendung einer Maus. Es ist also ein geräteabhängiger Event-Handler und kann Zugangsprobleme bereiten. onMouseOver und sein Pendant, onMouseOut, sollten nur verwendet werden, solange wichtiger Content oder Funktionen auch ohne Maus zugänglich sind. Ist die Mausinteraktion lediglich von kosmetischer Natur (wie z. B. beim Hinzufügen von Leuchten oder Schatten), kommt es kaum zu Zugangsproblemen, solange die Stiländerung keine zusätzliche Funktion anzeigt (wie etwa den Hinweis, dass man auf ein Element klicken kann).

Wenn die Mausinteraktion weitere Informationen oder Content darstellt, z. B. eine Kurzinfo, ein Navigationsmenü oder Ähnliches, dann ist dieser Content jenen unzugänglich, die keine Maus verwenden. Hinsichtlich Zugang sind weitere Überlegungen nötig.

Für Benutzer eines Screenreaders kann zusätzlicher Content auf direkt zugängliche Weise bereitgestellt werden, wie etwa durch Alternativtexte, mittels ARIA-Label oder -Beschriftung oder unter Umständen mit einem Off-Screen-Text. Für Sehende jedoch, die nur die Tastatur benutzen, muss es eine Möglichkeit geben, mit der sie neu ausgewiesene Inhalte und Funktionen ansteuern und sehen können.

Benutzen Sie zusätzlich zu onMouseOver und onMouseOut noch onFocus und onBlur. Diese Aktionen werden ausgelöst, wenn die Tastatur benutzt wird, um zu den verschiedenen Elementen zu springen. Natürlich können diese nur bei Elementen ausgelöst werden, die mit der Tastatur ansteuerbar sind – Links und Formularelemente (oder auch Elemente mit tabindex). Einfaches Aufrufen von Änderungen mit einem Standardlink und die Verwendung maus- und tastaturabhängiger Event-Handler hilft, den Zugang zu gewährleisten.

Bisweilen werden auch Skripte erstellt, um komplexe Interaktionen wie Drop-down- oder Fly-out-Menüs darzustellen. Obgleich dieser Zugang technisch realisierbar ist, kann manchmal eine alternative Vorgehensweise zielführender sein. Anstatt beispielsweise den Benutzer dazu anzuhalten, ein kompliziertes und ellenlanges Navigationsmenü zu durchforsten, könnten Sie dafür sorgen, dass das Menüsystem der Tastatur NICHT direkt zugänglich ist und auch nicht von einem Screenreader gelesen werden kann. Dafür bieten Sie die Funktionalität von Standardlinks für die Menüpunkte der obersten Ebene (z. B. „Produkte“) an. Ein solcher Link bringt den Benutzer auf eine Unterseite mit den Standardlinks zu den Seiten, auf die die Einträge im komplizierten Menü verweisen (z. B. eine Landing-Page für Produkte mit Links zu den verschiedenen Produktkategorien). Zwar sind solche Alternativen nicht unbedingt die Art von Interaktion, die von Mausbenutzern angesteuert werden, doch sie sind intuitiver und benutzerfreundlicher aufgebaut.

onFocus und onBlur

Diese Event-Handler sind typisch für Formularelemente wie Textfelder, Radio- und Absendebuttons, finden aber auch bei Links Verwendung. onFocus wird aufgerufen, wenn der Cursor auf oder innerhalb eines bestimmten Formularelements positioniert wird oder wenn ein Benutzer mit der Tabulatortaste der Tastatur auf das Element springt. onBlur wird aufgerufen, wenn der Cursor ein Formularelement verlässt oder der Benutzer mittels Tabulatortaste davon wegspringt.

Diese beiden Event-Handler sind geräteunabhängig und können daher mit der Maus, der Tastatur oder einer anderen unterstützenden Technologie ausgeführt werden. Aktionen, die aufgrund dieser Event-Handler ausgeführt werden, müssen analysiert werden, um eventuelle Zugangsprobleme aufzuspüren. Normalerweise gibt es mit solchen Ereignissen keine Zugangsprobleme, solange sie nicht das Standardverhalten des Webbrowsers verändern oder die Tastatur-Navigation innerhalb der Webseite überlagern. Zum Beispiel könnten solche Überlagerungen mit onFocus dazu führen, dass der Fokus automatisch auf andere Seitenbereiche gesetzt wird oder dass mit onBlur der Benutzer in einem Formularelement gefangen wird, wenn nämlich Formularelemente dynamisch angezeigt werden, sobald ein Benutzer selbige verlässt. Tastatur- und Screenreader-Tests sind erforderlich, um sicher zu gehen, dass diese Interaktionen so eingebaut sind, dass sie zugänglich sind.

onClick und onDblClick

Der onClick-Event-Handler wird aufgerufen, wenn die Maus über einem HTML-Element gedrückt wird. onClick soll als mausabhängiger Event-Handler verstanden werden. Wird der onClick-Event-Handler jedoch mit Links oder Formularelementen benutzt, die auf die Tastatur ansprechen, so rufen die meisten wichtigen Browser und unterstützenden Technologien das onClick-Ereignis auf, wenn die Eingabetaste betätigt wird – vorausgesetzt, der Link oder das Element hat den Fokus. In diesen Fällen ist onClick ein geräteunabhängiger Event-Handler.

Trotzdem löst die Eingabetaste nicht immer das onClick-Ereignis aus, wenn es nicht mit einem Link oder Steuerungselement benutzt wird. Dies ist der Fall bei reinem Text, Tabellenzellen oder DIV-Elementen, selbst wenn sie über tabindex auf die Tastatur ansprechen oder mittels Skript den Fokus haben. In diesen Fällen ist es erforderlich, ein Drücken der Eingabe- und Leertaste festzustellen, während sie den Fokus haben.

Der onDblClick-Event-Handler reagiert auf einen Doppelklick der Maus auf ein ausgewähltes HTML-Element. Da es keine geräteunabhängige oder Tastatur-Entsprechung zu onDblClick gibt, muss es vermieden werden.

onChange und onSelect

Der onChange-Event-Handler wird aufgerufen, wenn ein Formularelement ausgewählt und verändert wird, wenn zum Beispiel ein Radiobutton erstmals ausgewählt wird, sich der Text in einem Textfeld oder einem Textbereich ändert oder der aktive Eintrag in einem Auswahlmenü wechselt. Grundsätzlich sind diese Event-Handler geräteunabhängig und können mit der Maus, der Tastatur oder anderen Geräten aktiviert werden. Dennoch müssen Aktionen, die durch diese Event-Handler ausgelöst werden, analysiert werden, um festzustellen, ob Zugangsprobleme auftreten.

Häufig wird onChange bei Auswahlmenüs eingesetzt, um die Navigation zu starten, wenn die aktive Option im Menü geändert wird. Bei diesen Menüs kann es zu Zugangsproblemen kommen, da sich die Liste mit der Tastatur nicht durchscrollen lässt, wenn keine Option ausgewählt ist, womit auch kein onChange-Event ausgelöst wird. Einige Browser (inklusive Firefox) überschreiben diese Sprungmenüs, sodass sie bei Änderungen über die Tastatur nicht aktiviert werden, sondern nur, wenn Sie ein Element mit der Maus auswählen oder die Eingabetaste auf der Tastatur betätigen. Diese Art von JavaScript „Sprung“-Menüs kann jedoch der Tastatur zugänglich gemacht werden, indem man onChange entfernt und getrennt von der Auswahlliste einen Absende-Button einbaut, der den gerade ausgewählten Eintrag aktiviert.

Die Verwendung geräteunabhängiger Event-Handler

Es gibt einige geräteunabhängige Event-Handler, darunter onFocus, onBlur, onSelect, onChange und onClick (sofern onClick mit Link- oder Formularelementen verwendet wird). Nach Möglichkeit sollten geräteunabhängige Event-Handler eingesetzt werden. Andere Event-Handler sind geräteabhängig und damit vollkommen an eine bestimmte Eingabeart gebunden. So sind zum Beispiel onMouseOver, onMouseOut und onDblClick auf den Einsatz einer Maus angewiesen. Manche Event-Handler sind auch von Tastaturaktionen abhängig (onKeyDown, onKeyUp usw.). Mehrere geräteabhängige Event-Handler können gemeinsam benutzt werden, um JavaScript sowohl per Maus als auch per Tastatur zu aktivieren. Doch dafür ist es notwendig, die verschiedenen Browser und unterstützenden Technologien zu testen, um zu gewährleisten, dass der Zugang in keinster Weise eingeschränkt ist.