Zugänglichkeit von Dialogen

Gibt den Dialogen des Editors die Namen und Rollen, die ein Screenreader benötigt. Ohne sie werden einige Dialoge als Menüs angekündigt und ihre Textfelder haben keinen Namen ("edit, blank"); Damit ist der Dialog „Link einfügen“ ein Dialog mit dem Namen"Insert Link"und seine Felder werden als bekannt gegeben"URL"Und"Text". Es ist standardmäßig aktiviert und ändert nichts, was Sie sehen können.

Das Dialogfeld „Link einfügen“ wird mit Strg+K über einem ausgewählten Wort geöffnet, wobei der Tastaturfokus auf dem URL-Feld liegt, das https://example.com/ enthält. — Der Dialog „Link einfügen“ wird mit Strg+K geöffnet. Der Fokus liegt auf dem URL-Feld, dessen zugänglicher Name jetzt lautet"URL" .

Schalten Sie es ein

Die Funktion ist diedialoga11y.jsPlugin (auch inplugins/all_plugins.js). Es genügt das Laden:dialogA11yStandardmäßig isttrue. Es gibt keinen Knopf.

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p>Select some text and press Ctrl+K to open the link dialog.</p></div>
<script>
var editor = new RichTextEditor("#editor", { toolbar: "full" });   // dialogA11y: false turns it off
</script>

Optionen

Option	Standard	Was es bewirkt
`dialogA11y`	`true`	`false`schaltet das Plugin aus.

editor.applyDialogAccessibility()führt es einmal über jedes Popup auf der Seite aus, beispielsweise nachdem Ihr Code Felder zu einem geöffneten Fenster hinzugefügt hat.

Was es bewirkt

Das Plugin überwacht die Seite auf Popups des Editors (rte-dropdown-panel, rte-dialog-floatUnd.rte-panel-general). Für jedes, das eine Titelleiste hat (rte-dialog-header):

Rolle.Ein betiteltes Popup mit Textfeldern wird angezeigtrole="dialog"statt derrole="menu"Der Kern gibt es, weil ein Menü keine Textfelder enthalten darf. Ein betiteltes Popup, das nur Befehle auflistet, bleibt als Menü übrig. Ein Dialog behält die Menüs nicht beiaria-orientation.
Name.Wenn der Dialog noch keinen Namen hat, wird er aufgerufenaria-labelaus dem Titeltext, ohne eine nachgestellte Abkürzung wie z"(Ctrl+K)" .
Feldbeschriftungen.Jedes Feld ohne Namen erhält einenaria-label, zuerst von der sichtbaren Beschriftung daneben übernommen, damit der gesprochene Name mit dem übereinstimmt, was auf dem Bildschirm angezeigt wird. Felder ohne sichtbare Beschriftung werden nach dem Wrapper des Felds benannt (rte-dialog-line-ALTwird"Alternative text" , rte-dialog-line-WIDTH "Width"usw.), dann der Platzhalter, dann der Text in der Nähe und schließlich der Name des Dialogs.

Popups ohne Titelleiste, wie z. B. die Farb- und Schriftartenauswahl, bleiben unberücksichtigt. Die einzige Ausnahme ist ein Menü ohne Titel, das ein sichtbares Textfeld enthält, das wirdrole="dialog".

Dialoge in einemrte-dialog-outerRahmen wie „Bild einfügen“, „Emoji einfügen“ und den Bildeditor (erstellt miteditor.createDialog()), werden nicht verändert: Der Kern gibt sie bereits vorrole="dialog", einaria-labelUndaria-modal="true".

Den Barrierefreiheitsbaum der Dialoge haben wir überprüft, wie Playwright berichtet, bei ausgeschaltetem und eingeschaltetem Plugin:

Dialog	`dialogA11y: false`	Standard
Link einfügen (Symbolleistenschaltfläche)	`role="menu"`, Felder`textbox`, `textbox`	`role="dialog"`, Felder`textbox "URL"`, `textbox "Text"`
Link einfügen (Strg+K)	`dialog "Insert Link"`, Felder`textbox`, `textbox`	`dialog "Insert Link"`, Felder`textbox "URL"`, `textbox "Text"`
Suchen und ersetzen	`dialog "Find and Replace"`, Felder`textbox`, `textbox`	`dialog "Find and Replace"`, Felder`textbox "Find"`, `textbox "Replace"`

Das resultierende Markup des Dialogfelds „Link einfügen“ der Symbolleiste (Stile und Symbole weggelassen):

<rte-dropdown-panel role="dialog" aria-label="Insert Link" class="rte-panel-general rte-panel-insertlink">
  <rte-dialog-header><rte-dialog-header-text>Insert Link</rte-dialog-header-text></rte-dialog-header>
  …
  <rte-dialog-line-url …><rte-dialog-input-label>URL</rte-dialog-input-label><input type="text" aria-label="URL">…</rte-dialog-line-url>
  <rte-dialog-line-text …><rte-dialog-input-label>Text</rte-dialog-input-label><input type="text" aria-label="Text"></rte-dialog-line-text>
  …
</rte-dropdown-panel>

Was es nicht tut

Die Handhabung des Fokus liegt beim Kerneditor, nicht bei diesem Plugin. Wir haben es im Dialogfeld „Link einfügen“ bei ausgeschaltetem und eingeschaltetem Plugin überprüft und das gleiche Ergebnis erhalten:

Der Fokus beginnt im URL-Feld (geöffnet mit der Maus oder Strg+K).
Tab und Umschalt+Tab blättern durch URL, Text, „In neuem Tab öffnen“, „Abbrechen“ und „Einfügen“ und bleiben im Dialog.
Escape schließt das Dialogfeld und der Fokus kehrt zur Symbolleistenschaltfläche „Link einfügen“ zurück.

Das Plugin setzt auch nicht aria-modal. Der Kern legt aria-modal="true" für die Dialoge „Bild einfügen“, „Emoji einfügen“ und „Bildeditor“ sowie aria-modal="false" für „Suchen und Ersetzen“ fest, sodass Sie weiter im Dokument arbeiten können. Das Bedienfeld „Link einfügen“ der Symbolleiste enthält keinen aria-modal.

Wissenswertes

Dem HTML-Code des Dokuments wird nichts hinzugefügt; Die Attribute befinden sich in den eigenen Dialogen des Editors.
Namen werden aus dem sichtbaren Titel und den Beschriftungen des Dialogs übernommen, sodass sie bei einem Sprachpaket in dieser Sprache vorliegen. Die Fallback-Namen ( "Alternative text" , "Width" …) sind Englisch.
Das Öffnen von „Link einfügen“ durch Drücken der Eingabetaste oder der Leertaste auf der Symbolleistenschaltfläche legt den Fokus auf „Abbrechen“ und nicht auf das URL-Feld in 2.6.12; Strg+K und ein Mausklick starten im URL-Feld.

Verwandt: Barrierefreiheitserklärung, Barrierefreiheitsprüfung, createDialog.