![[Paris, 6. Dezember 2011] Die Konferenz der Präsidentschaftswahlkampf Web 2012 (Ideos / 2,0 Elect Partner)](http://www.elus20.fr/images/pdffrance2011_elus20.jpg)
JavaScript-Event-Handler
  |  |
Drucken  |
Senden  |
Anteil         |
Achtung: Die ursprüngliche Version dieses Dokuments ist Barrierefreie JavaScript: JavaScript Event-Handler . Diese Französisch-Übersetzung erfolgte durch Ideos Rahmen einer Vereinbarung zwischen WebAIM und Ideos .
Hinweis: Auf Seite Dokumente auf Web-Zugänglichkeit für eine Liste aller übersetzten Dokumente. Andere Ressourcen auf die Barrierefreiheit im Web sind auch in den genannten digitalen Portal zugänglich .
Zusammenfassung
- Seite 1: Einleitung
- Sie befinden sich auf Seite 2: JavaScript Event-Handler
- Seite 3: Andere Fragen der Zugänglichkeit von Javascript
- Seite 4: Alternativen zu JavaScript
- Seite 5: Zusammenfassung für barrierefreie Javascript
Überblick
JavaScript ausführen können mit Hilfe des Tags werden <script> und einen Event-Handler.
Der Tag <script> enthalten kann JavaScript-Code direkt:
oder öffnen Sie eine externe JavaScript-Datei (. js)
Der Tag <script> wird automatisch ausgeführt, wenn die Seite geladen wird.
Der Inhalt und die Funktionalität des Skripts in den Tag ausgeführt <script> muss direkt zugänglich sein oder eine zugängliche Alternative, Inhalt und Funktionalität JavaScript muss angegeben werden.
Eventhandler werden, bestehende HTML hinzugefügt und sind durch ein Ereignis oder Benutzer-Browser ausgelöst - z. B. wenn die Seite geladen wird, wenn der Benutzer mit der Maus klickt oder zu einem bestimmten Zeitpunkt. Einige Event-Handler sind abhängig von der Verwendung einer Maus oder Tastatur. Diese Ereignishandler werden aufgerufen abhängig von einem Gerät. Weitere Event-Handler sind geräteunabhängig und werden sowohl von der Maus und Tastatur oder mit anderen Mitteln ausgelöst. Der Einsatz von Event-Handler abhängig von einem Gerät in der Unzugänglichkeit der Inhalte an eine Person, die das Gerät nicht für diesen Event-Handler benötigt Nutzung führen.
onMouseOver und onMouseOut
Der Event-Handler onMouseOver wird ausgelöst, wenn der Mauszeiger auf ein Element gelegt wird.
Wie der Name schon sagt, onMouseOver erfordert die Verwendung einer Maus.
Es ist daher abhängig von périphérque und Zugänglichkeit zu Problemen führen. onMouseOver und sein Begleiter onMouseOut wie alle Inhalte genutzt werden kann und die wichtigsten Funktionen sind auch ohne Verwendung der Maus zur Verfügung.
Beispiel 1
Zeigen Sie mit der Maus über das Bild unten, um ein Beispiel der Verwendung siehe onMouseOver .
« . Wenn die Maus über das Bild der "Barrierefreiheit" gesetzt wird, wird ein anderes Bild an seiner Stelle angezeigt, so dass die Definition des Begriffs "Barrierefreiheit".
Wichtig
Alle Beispiele auf dieser Seite sind in XHTML 1.0 Strict. XHTML Nachfrage Namen der Event-Handler in Kleinbuchstaben (zB: kodierte onmouseover statt onMouseOver ).
Versuchen Sie, um das Bild mit der Tastatur navigieren.
Beachten Sie, dass, wenn zusätzliche Informationen, die nicht angezeigt wird.
Der Text Alternative für das Bild gibt den Inhalt des Event-Handler geschrieben onMouseOver .
Dies ermöglicht Benutzern, die, wie der Text alternative Zugriff auf den Inhalt zu erhalten wissen, aber das ist keine wirkliche Lösung.
Probleme
In diesem Beispiel ist die zusätzliche Inhalte angezeigt mit onMouseOver .
Diese Inhalte können angezeigt, wenn der Benutzer die Maus über das Bild fliegen.
Es ist nicht möglich jemanden, der die Tastatur verwendet, um die Seite zu navigieren.
Der Event-Handler onMouseOver kann nicht direkt zur Verfügung gestellt werden Tastatur Nutzer.
Daher muss eine Alternative geben.
Teillösung
Legen Sie die zusätzlichen Inhalte in den Text alternative des Bildes. Dies sollte für die Nutzer von Screenreadern arbeiten - der Screenreader den Text alternative zu lesen. Aber für sehende Benutzer, deren Browser nicht darstellen kann, den Text Alternative für Bilder oder die sich nicht bewegen Sie die Maus über das Bild kann, ist es keine Alternative. Allerdings muss das Bild dann eine alternative Text-Äquivalent.
Lösungen
Zusätzlich zu onMouseOver und onMouseOut , verwenden onFocus und onBlur .
Diese Aktionen werden ausgelöst, wenn die Tastatur verwendet, um zu und von den Link, der Tag enthält navigieren <img> .
Sie sollten immer eine Text-Alternative für Blinde und onFocus und onBlur können Benutzer die Tastatur navigieren, um das Bild zu ändern sehen.
Beispiel 2
Eine gemeinsame Nutzung von onMouseOver und onMouseOut für die Navigations-Menüs Drop-Down (fly-out-oder Drop-Down-Navigationssysteme).
Zeigen Sie mit der Maus über die Menüpunkte unten, um ein Beispiel für Menüs zu sehen.
Wenn die Maus über die wichtigsten Menüpunkte (platziert wird onMouseOver ), erscheinen Untermenüs unten.
Wenn die Maus entfernt wird ( onMouseOut ), verschwinden die Untermenüs.
|
Produkte |
Dienstleistungen |
Unterstützung |
Probleme
Die Inhalte und zusätzliche Funktionen angezeigt mit onMouseOver .
In diesem Beispiel steuert die JavaScript CSS die Darstellung von Elementen auf der Seite.
Die Untermenüs sind nur sichtbar, wenn die Maus über das Hauptmenü befindet.
Diese Untermenüs sind möglicherweise nicht zur Verfügung, wenn Javascript deaktiviert ist und kann nicht von unterstützenden Technologien gelesen werden.
Lösungen
Wenn möglich, verwenden andere Event-Handler, Navigation mit der Tastatur zu ermöglichen. Wenn dies nicht möglich ist, müssen Sie eine redundante Methode der Navigation. Dies kann auf zwei Arten erfolgen. Zuerst geben Sie die Links in den Inhalt der Seite für die Seiten in der Subnavigation angezeigt. Dies geschieht meist über eine Liste von Links am Ende der Seite aufgelistet getan. Der Nachteil dieser Methode ist, dass die Navigation nur am unteren Rand der Seite, die werden nicht intuitiv für die meisten Benutzer kann.
Eine zweite Methode, um eine redundante Methode der Navigation bieten wird, um einen Link hinzufügen href zu jedem der Hauptnavigation (z. B. Produkte, Dienstleistungen, etc.), um eine Webseite, die Untermenüs enthält.
Wenn Sie die Links Produkte, Dienstleistungen und selektieren Sie Unterstützung vor, sehen Sie ein Beispiel für redundante Navigations-Links.
Beispiel
Obwohl diese Methode erfordert die Schaffung einer zusätzlichen Seite und stellt einen weiteren Schritt, es gibt auch vollen Zugriff auf die Elemente der Navigation in einer intuitiven Weise. Diese Methode ermöglicht es auch in den Untermenüs zugänglich sein, wenn JavaScript deaktiviert ist.
onFocus und onBlur
Diese Ereignishandler werden in der Regel mit Formular-Elemente wie Textfelder, Optionsfelder und Schaltflächen verwendet. onFocus ausgelöst wird, wenn Sie den Cursor auf ein bestimmtes Feld des Formulars platziert wird. onBlur ausgelöst wird, wenn der Cursor lässt ein Formular-Element.
Diese beiden Event-Handler sind geräteunabhängig, das heißt, sie mit der Maus, Tastatur oder anderen unterstützenden Technologien ausgeführt werden können. Aktionen, die nach diesen Eventhandler ausgeführt werden sollte analysiert werden, um festzustellen, ob sie Zugang zu Problemen führen werden. Im Allgemeinen sind diese Event-Handler nicht die Ursache der Probleme bei der Barrierefreiheit, wenn sie den Standard-Webbrowser ändern oder wenn sie stören die Navigation per Tastatur in die Web-Seite.
Beispiel 1
Probleme
Nein. Während das Alarm-Fenster kann als störend empfunden und unnötig, sie führt nicht ernsthaft Fragen der Zugänglichkeit. Der Alarm wird ausgelöst, wenn der Fokus in das Textfeld gesetzt wird mit der Tastatur oder Maus. JavaScript-Warnungen werden von Screenreadern mit den modernsten gelesen und kann verwendet werden, um die Usability von Formularen durch rechtzeitige Rückmeldung, Anweisungen oder Informationen zu erhöhen. Allerdings, wenn JavaScript deaktiviert ist, dann der Alarm wird nur dann für jedermann verfügbar.
Beispiel 2
Probleme
Obwohl die Veranstaltung onblur ist geräteunabhängig, wird es verwendet, um JavaScript-Code, der die Seite schwer zu navigieren macht laufen.
Der Text behält den Fokus, bis die richtige Antwort gegeben wird.
Diese Änderung in der Standardeinstellung des Browsers kann zu Verwirrung und Einschränkungen.
Darüber hinaus sind Kommentare in einem anderen Teil der Seite angezeigt.
Da der Schwerpunkt in das Textfeld erhalten bleibt, wird ein Screen-Reader nicht in der Lage sein, Text Kommentare oder irgendeinen anderen Teil der Seite zuzugreifen, bis die richtige Antwort eingegeben wird.
Lösung
Nicht mit Gewalt den Fokus auf in das Textfeld bleiben. Hiermit kann der Anwender über die Seite navigieren. Kommentare auf einer anderen Seite nach dem Formular abgeschickt wurde (dies ist ohne JavaScript getan) oder zeigen Sie die Kommentare mit JavaScript alert (erfordert JavaScript). Versuchen Sie einen Brief in das Textfeld über eine JavaScript-Alert sehen.
onClick und onDblClick
Der Event-Handler onClick wird ausgelöst, wenn die Maus über ein HTML-Element geklickt wird. onClick ist ein Event-Handler ist abhängig von der Maus.
Allerdings, wenn der Event-Handler onClick mit Hypertext-Links oder Formular-Steuerelemente verwendet wird, während die meisten Browser und assistive Technologien auslösen onClick , wenn die Enter-Taste gedrückt wird, wenn der Link oder Steuerelement den Fokus hat.
In diesen Fällen onClick ist Event-Handler eine geräteunabhängige.
Allerdings wird die Enter-Taste nicht ausgelöst bei onClick , wenn sie mit Elementen, die nicht Links oder Steuerelemente, z. B. Text oder Tabelle Zellen verwendet.
Der Event-Handler onDblClick mit dem Doppelklick der Maus auf ein HTML-Element zugeordnet.
Es gibt keine unabhängige oder Tastatur entspricht onDblClick , die vermieden werden sollten.
Beispiel 1
Dieser Link führt auslösen JavaScript Dialogfeld zur Bestätigung, dass Sie bestätigen, ob Sie die Seite sehen wollen oder nicht können.
Schauen Sie sich dieses Beispiel onClick
Probleme
Nein.
Das Feld zur Bestätigung wird von allen großen Screenreadern gelesen werden.
Mit dem JavaScript-Einstellung return , wird die Aktion von der Bindung aufgehoben, wenn der Benutzer wählt in der Bestätigungs-Schaltfläche
Wenn JavaScript deaktiviert ist, wird der Link normal arbeiten.
Beispiel 2
Die folgende ist so konzipiert, als Verbindung (blau und unterstrichen), aber der Text mit einem Ereignis verknüpft erscheinen onClick , dass ein anderes Dokument im Browser-Fenster öffnet sich.
Mit der Maus auf den Text klicken.
Schauen Sie sich ein weiteres Beispiel onClick
Probleme
Da der Text einen Hyperlink oder ein Kontrollfeld, ist es nicht den Fokus erhalten bei der Navigation mit der Tastatur.
Weil es nicht den Fokus erhalten, kann die Tastatur nicht benutzt, um das Ereignis zu aktivieren onClick .
Lösung
Verwenden Sie den Event-Handler onClick von einem Link oder ein Formular-Steuerelement statt einem Element, das nicht von der Tastatur erreicht werden kann.
Beispiel 3
Eine sehr häufige Verwendung von JavaScript ist seine Verwendung auf die Informationen in einer Form zu bestätigen. Die folgende Formular verwendet JavaScript, damit Sie die Informationen eingegeben haben bestätigen.
Geben Sie Ihren Namen in das Feld unten ein und drücken Sie anschließend die Schaltfläche
<p> <label for= »yourname »> Name: </ label> <input type= »text "id= »yourname" />
<input type= »button "value= »Envoyer" onclick = »validate(); "/> </ p>
</ Form>
Probleme
Bestätigung und alert-Boxen, die durch das Ereignis ausgelöst werden onClick zugänglich sind Browser und assistive Technologien, die JavaScript aktiviert haben.
Validierung von Informationen Formular mit einer Server-seitigen Skript und Anzeigen von Kommentaren zu anderen Web-Seite können Sie alle Probleme, die in JavaScript-Code auftreten können, zu überwinden und ermöglicht die Validierung des Formulars, wenn JavaScript deaktiviert ist.
Wenn JavaScript wird verwendet, um die Form zu überprüfen, stellen Sie sicher, dass alle Elemente des Formulars und alle Features abgeschlossen werden kann mit der Tastatur bedient werden.
Da der Handler onClick mit einem Formular-Element verwendet wird, ist es durch Verwendung von sowohl Maus und Tastatur aktiviert.
Kommentar
mais sur le bouton Entrée quand le focus est dans le champ de formulaire. Da die meisten Browser die Formulardaten, wenn die Enter-Taste gedrückt wird senden wird, der Event-Handler onsubmit wurde mit dem Tag hinzugefügt <form> um sicherzustellen, dass die Formulardaten gesendet wird, wenn der Benutzer gerade keine Unterstützung für die Schaltfläche aber die Enter-Taste, wenn der Fokus in das Formularfeld ist.
Beachten Sie auch, dass das Label für das Textfeld ist nicht erforderlich.
Beispiel 4
Dieses Beispiel bestätigt auch die Formulardaten, aber die Rückkehr in einen anderen Ort auf der Seite angezeigt.
Wie viele Elemente gibt es in einem Dutzend? Geben Sie den Betrag in das Feld unten ein und drücken Sie anschließend die Schaltfläche
<p class= »invis "id= »answercorrect »> Richtig. Es gibt 12 Einträge in ein Dutzend. </ P>
<p class= »invis "id= »answerwrong »> Falsche. Es gibt 12 Einträge in ein Dutzend. </ P>
<p> <label for= »answerbox »> Geben Sie die Antwort: </ label>
<input type= »text "id= »answerbox" />
<input type= »submit "onclick = »checkAnswer2()" value= »Vérifier "/>
</ P>
</ Form>
Probleme
Kommentare sind nicht in einer Weise zugänglich zu unterstützenden Technologien vorgestellt. In diesem Beispiel ändert sich die JavaScript die Art der Anzeige-Einstellungen für Seitenelemente, um sie sichtbar oder unsichtbar auf der Grundlage der Antworten. Nutzer von Screen Reader wird nicht bewusst sein, dass zusätzliche Inhalte plötzlich auf der Seite.
Lösungen
- Überprüfen Sie die Formulardaten mit einer Server-seitigen Skript und Kommentare auf einer anderen Seite.
- Feedback in einer Weise, zugänglich als JavaScript Alert-Box oder eine andere Form Element ist.
onChange und onSelect
Der Event-Handler onChange wird ausgelöst, wenn ein Formular-Element ausgewählt und verändert werden (zum Beispiel, wenn ein Radio-Button zunächst ausgewählt ist oder wenn der Text ändert sich in ein Textfeld).
Der Event-Handler onSelect behandelt wird, wenn der Text in einem Textfeld oder in ein Textfeld ausgewählt ist.
Obwohl diese Ereignisse unabhängig von Geräten und kann über die Maus, Tastatur oder ein anderes Gerät, sollte die Aktionen, die als Ergebnis dieser Eventhandler ausgeführt werden analysiert, um festzustellen, ob sie Probleme schaffen Zugänglichkeit.
Beispiel onChange
Das folgende Menü wird als ein Navigationsmenü verwendet. Durch die Auswahl eines Elements in der Liste, JavaScript automatisch öffnet die Seite im Browser sépcifiée.
Kommentar
In einigen Browsern müssen Sie die Enter-Taste drücken oder klicken Sie auf einen Menüpunkt, um den Event-Handler aktiviert onchange .
Klicken Sie auf die Schaltfläche des Browsers, um auf diese Seite zurück.
<! -
goto_URL Funktion (Objekt) {
window.location.href = object.options [object.selectedIndex]-Wert;.}
/ / ->
</ Script>
<form action= »page.htm "onsubmit= »return false; »>
<p> <label for= »selectPage »> Gehe zu: </ label>
<select name= »selectName "onchange = »goto_URL(this.form.selectName) »>
<option value= »"> Wählen Sie eine Seite: </ option>
<option value= »page.htm »> Seite 1 </ option>
<option value= »page.htm »> Seite 2 </ option>
<option value= »page.htm »> Page 3 </ option>
</ SELECT> </ p>
</ Form>
Probleme
Die JavaScript bewirkt, dass der Browser eine neue Seite mit Zugang onChange oder wenn der Benutzer ein Element aus der Liste.
Wenn der Endbenutzer verwendet eine Tastatur, die Event-Handler onChange wird für jedes Element in der Liste ausgeführt.
Es ist unmöglich für den Benutzer direkt wählen, um die letzte Element in der Liste als jede vorherige Element in der Liste der Seite zu ändern auslösen wird.
, et ainsi de suite jusqu'à atteindre le dernier élément du menu. Die einzige Möglichkeit für den Benutzer, der letzte Menüpunkt ist durch den Zugriff auf die Seite für das erste Element in der Liste, und drücken Sie die dann auf den zweiten Punkt zu navigieren, und drücken Sie und so weiter, bis Sie den letzten Menüpunkt.
Lösungen
Anstelle der Verwendung der Event-Handler onChange , damit der Benutzer das Element aus einer Liste auszuwählen, und wählen Sie dann eine Taste oder senden Sie das Formular an das Skript zu aktivieren.
Wenn ein Server-seitiges Script verwendet wird, um Daten in einer Form zu verarbeiten und leiten Sie die Browser entsprechend, gibt es keine Notwendigkeit für JavaScript.
Der folgende Code zeigt eine Methode, um das Problem zu lösen onChange .
Wählen Sie eine Seite über das Drop-down Menü und klicken Sie dann auf Klicken Sie auf die Schaltfläche Zurück des Browsers, um auf diese Seite zurück.
<p> <label for= »selectPage2"> Gehe zu: </ label>
<select name= »selectPage2" id= »selectPage2">
<option value= »"> Wählen Sie eine Seite: </ option>
<option value= »page.htm »> Seite 1 </ option>
<option value= »page.htm »> Seite 2 </ option>
<option value= »page.htm »> Page 3 </ option>
</ SELECT>
<Input type = "button" value = "Go! "Onclick =" goto_URL (this.form.selectPage2) "/>
</ P>
</ Form>
Verwenden Sie Ereignishandler unabhängige Geräte
Wie bereits erwähnt, sind mehrere Event-Handler geräteabhängig einschließlich onFocus , onBlur , onSelect , onChange und onClick (bei onClick mit einem Link oder Formular-Elemente verwendet wird).
Wenn möglich, verwenden Ereignishandler unabhängige Geräte.
Weitere Event-Handler sind geräteabhängig, was bedeutet, dass sie ganz auf eine bestimmte Art von Eintrag.
Zum Beispiel, onMouseOver , onMouseOut und onDblClick auf die Verwendung einer Maus.
Es gibt auch Event-Handler, die abhängig von der Tastatur (sind onKeyDown , onKeyUp , etc.) ..
Viele Event-Handler abhängig Geräte können gemeinsam genutzt werden, um aktivieren Sie JavaScript in Maus und Tastatur aktiviert.
Zum Beispiel, beide onMouseOver und onFocus (und onMouseOut und onBlur können) verwendet, um ein Skript für die Tastatur und Maus zu aktivieren.
Verwenden Sie mehrere Event-Handler abhängig Geräte als eine Methode, um die Unabhängigkeit von Geräten zu gewährleisten erfordert eine große Anzahl von Tests in verschiedenen Browsern und mit unterschiedlichen unterstützenden Technologien, um sicherzustellen, dass die Zugänglichkeit ist abgeschlossen.
Kommerzielle Links
WebAIM ist eine Initiative von:
Copyright 1999-2009 WebAIM
