Ace: Zugänglichkeit: Ace fängt die Tabulatortaste ein, damit Tastaturbenutzer nicht entkommen können

Erstellt am 25. Nov. 2016 · 8Kommentare · Quelle: ajaxorg/ace

Ich habe dies aus #2164 herausgespalten. Bei diesem Problem geht es wirklich darum, dass Screenreader den Inhalt des Editors nicht lesen können. Ich möchte über ein einfacheres Zugänglichkeitsproblem sprechen:

Wenn Sie Ace in einem Formular haben und das Formular von Feld zu Feld durchsuchen, dann bleiben Sie, sobald Sie in Ace kommen, stecken, weil dann die Tabulatortaste die aktuelle Codezeile einrückt (was sehr natürlich ist). Dies ist ein Problem für uns, und die beste Lösung, die mir eingefallen ist, ist diese:

Wir führen zwei Modi für jede Instanz des Editors ein:

Tab-Erfassungsmodus: Tab und Umschalt+Tab einrücken/ausrücken.
Nicht erfassender Modus: Tab und Umschalt+Tab verschieben den Tastaturfokus auf das nächste/vorherige Steuerelement.

Aus diesem Grund ist das Verhalten wie folgt:

Wenn der Tastaturfokus zum ersten Mal in den Editor wechselt, schaltet er sich selbst in den Nicht-Erfassungsmodus.
Sobald Sie etwas eingeben, wechselt der Editor in den Tab-Erfassungsmodus.
Durch Drücken von STRG+M wird zwischen den beiden Modi gewechselt (wie von https://www.w3.org/TR/wai-aria-practices/#richtext empfohlen).
Das Drücken von Esc wechselt in den Nicht-Aufnahmemodus (scheint die Art von Dingen zu sein, die Leute versuchen könnten, wenn sie an einer Schnittstelle feststecken).

Aufgrund von 1) können Sie sich wie erwartet einfach durch das gesamte Formular navigieren, ohne stecken zu bleiben. Aufgrund von 2) rückt Tab erwartungsgemäß die aktuelle Zeile ein, sobald Sie Code eingeben. 3) und 4. Flucht ermöglichen.

Das ist nicht perfekt. Ich sehe einige Probleme: Ist dies für neue Benutzer erkennbar? Sollte ein sichtbarer (oder akustischer) Hinweis darauf vorhanden sein, in welchem Modus Sie sich befinden? Ich glaube, dass ein Hinweis gut sein könnte. Auf der anderen Seite erscheint es unerwünscht, jeglichen Platz auf dem Bildschirm zu belegen oder den Bildschirmleser etwas sagen zu lassen (wenn Sie sich auf das konzentrieren möchten, was Sie tippen oder wo Sie sich im Formular befinden). Wenn das Verhalten natürlich genug wäre, würde es keine Rolle spielen.

Wenn den Leuten dieser Vorschlag gefällt, freue ich mich, ihn zu codieren.

Quelle

timhunt

👍5

Hilfreichster Kommentar

Diese Idee klingt interessant und wird als optionale Erweiterung nützlich sein. Ich bin mir nicht sicher, ob ich sie standardmäßig aktivieren soll, da viele Sites ihre eigene Art der Navigation zwischen Elementen haben, z , und Strg-cmd-Pfeil, um den Fokus zwischen den Editorfenstern zu wechseln.

nightwing am 2. Dez. 2016

👍3

Alle 8 Kommentare

nightwing am 2. Dez. 2016

👍3

Danke für die Rückmeldung.

timhunt am 2. Dez. 2016

Das klingt nach einer guten Lösung.

asgeir-inspera am 6. Dez. 2016

@timhunt hast du das am Ende codiert? Wir würden es entweder direkt in unserem Fork oder als Erweiterung verwenden. Gerne führen wir unsere eigene Code-Extraktion durch, wenn sie irgendwo geöffnet ist und Sie keine Zeit haben, sie zu bereinigen.

eah13 am 18. Juli 2017

Entschuldigung nein - zumindest nicht innerhalb von Ace. Wir haben Ace im CodeRunner-Fragetyp für Moodle verwendet, und es stellte sich als einfacher heraus, das zu implementieren, was wir in der Klebeschicht wollten: https://github.com/trampgeek/moodle-qtype_coderunner/blob/master/amd/src /aceinterface.js.

Sie können diesen Code jedoch gerne kopieren.

timhunt am 19. Juli 2017

Ich habe das gleiche Problem mit Ace und dies ist die Problemumgehung, die ich gefunden habe.

Verwenden Sie die setCommandEnabled-Funktion von https://stackoverflow.com/questions/24963246/ace-editor-simply-re-enable-command-after-disabled-it

Dann konfigurieren Sie den Editor wie folgt:

        editor.on('focus', function() {
          setCommandEnabled(editor, "indent", true)
          setCommandEnabled(editor, "outdent", true)
        })

        editor.commands.addCommand({
          name: "escape",
          bindKey: {win: "Esc", mac: "Esc"},
          exec: function() {
            setCommandEnabled(editor, "indent", false)
            setCommandEnabled(editor, "outdent", false)
          }
        });

Es funktioniert einigermaßen gut. Drücken Sie Escape und Tab/Shift+Tab, und Sie verlassen den Ace-Editor und das nächste/vorherige fokussierbare Element erhält den Fokus.

cayhorstmann am 5. Dez. 2018

👍1

Die Verwendung von Strg + [ anstelle von Shift + Tab und Strg + ] anstelle von Tab funktioniert im Ass-Editor, daher wurde nur der Tab-Befehl entfernt und jetzt keine Falle mehr
aceEditor.commands.removeCommand(aceEditor.commands.byName.indent);
aceEditor.commands.removeCommand(aceEditor.commands.byName.outdent);

mayilvahanan1 am 10. März 2020

👍2 👎1

Auf dem Mac konnte ich Option + Tab verwenden, um zu entkommen

Proko8 am 19. März 2021

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Ace: Zugänglichkeit: Ace fängt die Tabulatortaste ein, damit Tastaturbenutzer nicht entkommen können

Hilfreichster Kommentar

Alle 8 Kommentare

Verwandte Themen