Ich arbeite für eine Stiftung, die das Bewusstsein für Barrierefreiheit im Internet schärft. Für eine Präsentation möchten wir einen kleinen Workshop anbieten, der verschiedene Behinderungen / Beeinträchtigungen für Menschen simuliert. Dies erfolgt über eine speziell für diese Präsentation erstellte Website.
Eine der nachgewiesenen Beeinträchtigungen ist ein Zittern, was bedeutet, dass wackelige, schwer zu kontrollierende Handbewegungen auftreten. Bei dieser Beeinträchtigung ist es sehr schwierig, den Mauszeiger genau zu bewegen und die Maustaste zu drücken, während sich die Maus über einem Link befindet. Sowohl einige alte Menschen als auch Menschen mit Krankheiten, z. B. Parkinson, können unter Zittern leiden.
Jetzt möchte ich den Mauszeiger auf unvorhersehbare Weise bewegen, so dass es für die Leute sehr schwierig ist, auf eine kleine Schaltfläche zu klicken. Da JavaScript das direkte Bewegen des Mauszeigers nicht zulässt, suche ich nach anderen Möglichkeiten, um dies zu erreichen. Ich hatte folgende Ideen:
- Verwenden eines Maustreibers / Dienstprogramms, das das Schütteln der Maus simuliert.
- Blenden Sie den Mauszeiger über CSS aus, platzieren Sie eine GIF-Animation eines zitternden Mauszeigers an der Stelle des ursprünglichen Cursors (mit JavaScript) und machen Sie den Ziellink dann etwa alle paar Sekunden für eine Sekunde anklickbar. Dies würde zumindest das Gefühl vermitteln, als würde man immer im falschen Moment klicken.
Die erste Idee wäre zwar ziemlich cool, aber ich konnte kein solches Tool finden, weder für Mac noch für Windows. Und ich habe selbst keine Fähigkeiten, so etwas zu programmieren.
Die zweite Idee scheint etwas ungeschickt zu sein, aber ich denke, sie würde den gewünschten Effekt erzielen.
Hat jemand eine andere Idee?
quelle
Antworten:
Ich habe eine kurze Demo von etwas gemacht, auf dem Sie hoffentlich Ihren Code mithilfe der Zeigersperr-API aufbauen können sollten .
Ich habe dieses Pointer-Lock-Demo-Repo gegabelt und modifiziert, um ein zufälliges Bewegungselement hinzuzufügen.
Hier ist der Link zu meiner GitHub-Seite: https://aristocrates.github.io/pointer-lock-demo
Und hier ist der Link zu meinem Repo: https://github.com/aristocrates/pointer-lock-demo
Der wichtige Javascript-Code ist
app.js
in dercanvasLoop(e)
Methode enthalten.Das einzige, was ich gegenüber der ursprünglichen Demo geändert habe, war nach den Zeilen
Ich habe zwei Zeilen hinzugefügt, um zufällige Bewegungen darzustellen:
Es gibt noch viele Dinge, die Sie verbessern könnten, aber hoffentlich kann dies Ihnen den Einstieg erleichtern.
quelle
Blocked pointer lock on an element because the element's frame is sandboxed and the 'allow-pointer-lock' permission is not set.
. Es scheint, dass jsFiddle den Inhalt in einen Sandbox-Frame einbettet (dh keine Zeigersperre über zulässt<iframe sandbox="webkit-allow-pointer-lock">
, siehe Dokumentation ). Versuchen Sie, das Beispiel auf eine einzelne Seite ohne Sandbox zu legen.Nicht-Javascript-Methode
Eigentlich mag ich Lösungen, die möglicherweise auf Javascript basieren, da sie eher webbezogen sind und gute Chancen bestehen - OS-unabhängig. Ich habe jedoch darüber nachgedacht, wie Sie Ihr Problem für alle Browser beheben können, da es in diesem Fall schwierig ist, Javascript-Lösungen für alle möglichen Browser anzupassen (ich bin mir nicht sicher, ob dies überhaupt möglich ist).
Wie Sie bereits erwähnt haben, gibt es eine andere Möglichkeit: das Verhalten auf Betriebssystemebene zu emulieren. Dies hat noch einen weiteren Vorteil: Sie können sicher sein, dass der Browser zu 100% menschlich aussieht (weil der Treiber das Signal sendet). Sie können also treiber- / gerätebasierte Lösungen mit jedem Browser verwenden (oder sogar in Situationen, in denen Javascript deaktiviert ist).
Linux
Leider führt die Einbeziehung von Treiber / Gerät sofort zu einer Abhängigkeit vom Betriebssystem. Für jedes Betriebssystem benötigen Sie eine eigene Lösung. In diesem Beitrag konzentriere ich mich auf Linux-basierte Lösungen (wird also mit Linux funktionieren) - und Mac OS ein wenig. Unter Linux ist es möglich, Ereignisse explizit auf das Gerät zu schreiben. Im Folgenden finden Sie ein Funktionsbeispiel mit Hauptschleife:
Mein vollständiger Code für das Problem finden Sie hier . Das Programm fragt nach der Amplitude des "Zitterns" und seiner Frequenz (also wie viel Zeit in Mikrosekunden zwischen "Zittern" liegt). Um die Situation zu emulieren, wird die Maus gezwungen, sich zufällig nach
0..X
Punkten in zufälliger Richtung zu bewegen (oben-unten-links-unten) und zufällig0..Y
Mikrosekunden bis zum nächsten "Tremor" zu warten. Es gibtX
eine Amplitude von "Tremor" undY
eine Frequenz von "Tremor" ""Eine andere Möglichkeit besteht darin, das Programm an Ihr System anzupassen. Das Programm ist "Dummy" und kann die Maus nicht selbst erkennen,
"/dev/input/event4"
ist also fest codiert. Um festzustellen, welche Kennung für Ihr System möglicherweise vorhanden ist, können Sie Folgendes versuchen:Und so sind Möglichkeiten
"event3"
und"event4"
- aber für Ihr System, die andere Werte haben können. Wenn sich dies von der derzeit im C-Code verwendeten unterscheidet, ändern Sie einfach die entsprechende Zeile (also Zeile mitint fd = open("/dev/input/event4", O_RDWR);
und platzieren Sie Ihr Gerät anstelle vonevent4
).Eine GIF-Demo für dieses Programm (leider niedrige Bildrate, also Bild nicht zu groß halten) hier .
Eine kleine Randnotiz (wenn Sie nicht wissen, was Sie mit C-Code tun sollen) - um das obige Programm zu kompilieren, verwenden Sie einfach:
Wo
file.c
ist der Name Ihrer C-Quellcodedatei, dann erhalten Sie eine ausführbare Datei, diem
in Ihrem Verzeichnis aufgerufen wird . Höchstwahrscheinlich benötigen Sie Berechtigungen, um direkt in das Mausgerät zu schreiben. Sie können also Folgendes verwendensudo
:Anderes Betriebssystem
Die Logik bleibt gleich:
Das ist es. Zum Beispiel hat Mac OS seine eigene Art, mit der Maus zu arbeiten (nicht wie Linux, Mac auch nicht
procfs
), es wird hier gut beschrieben .Als Schlussfolgerung
Was besser ist - Javascript oder geräteorientierte Lösungen - liegt bei Ihnen, da bestimmte Bedingungen (wie browser- oder betriebssystemübergreifend) in diesem Fall alles entscheiden können. Aus diesem Grund habe ich Richtlinien zusammen mit bestimmten Arbeitsbeispielen zur Implementierung auf Betriebssystemebene bereitgestellt. Der Vorteil hierbei ist, dass die Lösung browserübergreifend ist, aber als Kosten haben wir ein OS-gebundenes Programm.
quelle
Ich habe das einmal als Witz im Puppy Linux Forum gemacht und den Kommentar bekommen, dass:
Hier ist das Shell-Skript, für das xdotool erforderlich ist
Benennen Sie als parkinson_sim und führen Sie ein optionales Argument für die Zeit zwischen Zittern aus, die zwischen 0,001 und 999,0 liegen kann.
Ich habe den Fehler gemacht, selbst darauf zu klicken, anstatt es über die Befehlszeile auszuführen, und schnell festgestellt, wie frustrierend es sein muss. Ich brauchte mehrere Versuche, um ein Terminalfenster zu öffnen, um es zu töten.
quelle
`
in einem ROX-Filer-Fenster zu drücken . Es dauerte ein paar Versuche, um es zu öffnen, also benutzte ich die Tastatur, um das Menü zu öffnen. Kurz darauf erstellte ich einen rudimentären Sprachsteuerungsdämon mit bagsphinx_continuous und ungefähr 10 Zeilen Shell.while :; do ...; sleep $time; done
sollte fast immer seinwhile sleep $time; do ...; done
, denn wenn der Benutzer Strg-C drückt, wird der aktuell ausgeführte Befehl mit ziemlicher Sicherheit ausgeführtsleep
, und Shells beenden das Skript nicht immer, wenn der Benutzer dies wünscht. Dies geschieht vor allem beim Testen in interaktiven Shells, manchmal jedoch auch in Skripten. Noch besser wärewhile xdotool ... && xdotool ... && sleep ...; do :; done
.Ihre zweite Idee (verstecken Sie den Cursor) ist auf halbem Weg zu einer, von der ich denke, dass sie für Sie gut funktioniert:
cursor:none
IIRC)Anschließend fügen Sie Ihrem Cursor-Code etwas Tremor-Mathematik hinzu, um den Cursor zu "schütteln". Es liegt an Ihnen, die richtigen Kurven zu bestimmen, um die Tremoreingabe richtig zu simulieren.
Schließlich: für alle Steuerelemente, die Sie programmieren (Links usw.):
Ein wichtiger Vorteil dieser Implementierung: Ihr "wackeliger Cursor" wird auf Touch-Geräten angezeigt, für die zunächst kein Cursor vorhanden wäre.
Bearbeiten:
Basierend auf Michael Theriots (sehr sauber und hilfreich!) Basis JSFiddle aus den Kommentaren, hier ist eine, die ständig mit einem normalverteilten Sweep um die aktuelle Cursorposition zittert : http://jsfiddle.net/benmosher/0x4mc64v/4/
(Das
normal
Array ist das Ergebnis eines Aufrufsrnorm(100)
in meiner R-Konsole. Die einfachste Art, wie ich mir in JS vorstellen kann, eine normalverteilte zufällige Ganzzahl abzutasten.)quelle
Nur eine Idee, um das Zittern "richtig" zu machen. Sie können die Mausbewegung eines echten Patienten aufzeichnen. Dies macht es authentischer, wenn Sie den Leuten sagen, woher die Daten stammen.
Es gibt ein Skript, mit dem eine Katze Ihrem Mauszeiger folgen kann. Sie können eines anpassen, damit ein zweiter Cursor Ihrem Mauszeiger folgt (herumspringt). Die Seite berechnet die Position des zweiten Cursors, sodass auch festgestellt werden kann, ob ein Klickereignis erfolgreich ist oder nicht.
Wenn Sie können, machen Sie es bitte webbasiert. Auf diese Weise erreichen Sie viel mehr Menschen, als sie zu bitten, ein Programm zu installieren oder Flash oder was auch immer zu aktivieren.
quelle
Anstatt zu versuchen, den Zeiger zu verschieben, können Sie stattdessen die Anwendung (Webseite) verschieben. Ich habe ein einfaches HTML-Formular geschrieben, das einige Eingabefelder enthält. Wenn Sie die Maus auf das Formular bewegen, wird das Formular verschoben.
Sie können eine Demo der sich bewegenden Form bei jsfiddle sehen . Versuchen Sie, auf eines der Eingabefelder zu klicken, um den Effekt zu sehen.
Ich habe den JQuery- Shake- Effekt verwendet, um dies zu erreichen. Das Javascript für den Shake-Effekt sieht folgendermaßen aus und bewirkt nur, dass sich das Formular auf und ab bewegt, wenn die Maus darüber bewegt wird:
Obwohl sich die Form nur auf und ab bewegt, denke ich, dass sie den gewünschten Effekt hat. Sie können mit den Parametern (Richtung, Zeiten, Entfernung sowie dem oben genannten unbenannten "1000") spielen, um die Formularbewegung zu optimieren.
quelle
Warum nicht eine Hardwarelösung verwenden? Es gibt bestimmte Mäuse, in die Sie Gewichte einbauen können, wie den Logitech G500. Setzen Sie statt eines Gewichts einen kleinen oszillierenden Motor ein, der die Maus leicht zittern lässt. Dies simulierte auch die tatsächliche Störung mehr: Es ist nicht nur der Cursor, der zittert, sondern die gesamte Hand und Maus. Außerdem können Sie andere Software als Websites anzeigen.
Anstelle einer Maus mit einem Gewichtsschlitz können Sie auch einfach etwas auf die Maus kleben, aber das fällt besser auf.
quelle
Da Sie darüber nachdachten, es mit einem benutzerdefinierten Maustreiber zu tun, würde ein kleines Programm, das auf dem PC ausgeführt wird, wahrscheinlich auch funktionieren? Wenn dies der Fall ist, finden Sie hier einen kleinen Ausschnitt für C #, der den Cursor unendlich zufällig mit einem Bereich von plus minus 5 Pixel um die aktuelle Cursorposition bewegt. Nach jeder Verschiebung wartet das Programm 50 ms bis 100 ms (nicht genau!). Das Wackeln kann durch Anpassen der Werte für die Verschiebung und die Pausen konfiguriert werden. Ich habe dies in einer Konsolenanwendung ausgeführt und es war - abhängig von den Werten - ziemlich schwierig, das Programm zu stoppen.
quelle
Hier ist eine Windows-Version meines xdotool-Skripts, das AutoIt verwendet . Dies war mein erstes AutoIt-Skript, und das Schreiben dauerte nur ein paar Minuten. Ich bin sicher, dass es verbessert werden kann. Speichern Sie einfach mit der Erweiterung .au3 und führen Sie sie mit AutoIt (Run Script x86) aus.
Kontrollen
Oder benutze meine kompilierte Version von hier .
quelle
Sie können nicht erwarten, dass jemand seine Hände perfekt ruhig halten kann. Eine Sache, die Sie in Betracht ziehen können, ist:
Meine Argumentation ist (Vorbehalt, ich bin kein Experte für UX oder Medizin), wenn Sie die klickbaren Elemente verkleinern, entsteht für die meisten Menschen ein ähnliches Problem, mit dem eine Person mit Parkinson-Krankheit auf einer alltäglichen Website konfrontiert wäre.
quelle
Sie können einen Alterssimulationsanzug wie den in diesem Artikel beschriebenen verwenden ... Ich vermute, dass der Teil mit dem Zittern der Hand nur ein vibrierender Motor ist, der um das Handgelenk geschnallt ist, sowie einige dicke Handschuhe, um die Hände im Allgemeinen ungeschickt zu machen.
quelle
DIV
CSS-Verstecken Sie den Cursor mitcursor:none;
left
,top
) mit aktiviertem jQmousemove
margin-left
undmargin-top
verwenden Sie asetTimeout
(um dietransition
Neupositionierung reibungslos zu gestalten, verwenden Sie CSS3 oder machen Sie es mit jQ.animate()
).Hinweis: Das Skript kann nicht wissen, ob sich die Hand noch auf der Maus befindet;)
quelle
Die Low-Level-Teile der Simulation des Tremors sind inzwischen gut beantwortet. Ich werde etwas hinzufügen, das sich auf die Art des zu simulierenden Zitterns konzentriert:
Die meisten Antworten implementieren einen Mauszeiger, der sich auf einem zufälligen Pfad mit einer festen maximalen Schrittweite in X- und Y-Richtung bewegt.
Dies sollte gut genug funktionieren, um es schwierig zu machen, einen bestimmten Bereich wie einen Knopf zu treffen.
Für das allgemeinere Problem der Simulation von UI-Problemen, die durch einen Tremor aufgrund der Parkinson-Krankheit verursacht werden, wäre es zumindest interessant, die Handbewegungen dieser Art von Tremor tatsächlich zu simulieren.
Ich vermute, dass der zufällige Spaziergang keine sehr gute Annäherung ist .
Es mag natürlich schwierig sein, echte Handspurdaten der Tremorbewegung zu erhalten, aber es gibt sicherlich Artikel über die Analyse dieser Art von Tremor:
In der Arbeit Parametrische Darstellung der Handbewegung bei Parkinson geht es darum, wie 3D-Handbewegungsspuren am besten dargestellt werden können.
Das Papier ist kostenpflichtig, aber die Vorschau oben rechts mit der Bezeichnung "Look Inside>" auf dem Buchbild zeigt einige interessante Darstellungen verschiedener Darstellungen von Handverfolgungsdaten .
quelle