Das HTML-Dialogelement: Verbesserung der Zugänglichkeit und Benutzerfreundlichkeit

Das HTML-Dialogelement: Verbesserung der Zugänglichkeit und Benutzerfreundlichkeit

Dialoge sind eine häufige Komponente, die Anwendungen hinzugefügt wird, sei es im Web oder in nativen Anwendungen. Traditionell gab es keine Standardmethode für die Implementierung im Web, was zu vielen Ad-hoc-Implementierungen führte, die nicht konsistent über verschiedene Webanwendungen hinweg funktionieren. Aufgrund der Komplexität ihrer Implementierung fehlen häufig häufig erwartete Funktionen in Dialogen.

Webbrowser bieten jedoch jetzt ein Standarddialogelement.

Warum das Dialogelement verwenden?

Das native Dialogelement optimiert die Implementierung von Dialogen, Modalen und anderen Arten nichtmodaler Dialoge. Dies geschieht durch die Implementierung vieler der von Dialogen benötigten Funktionen, die bereits in den Browser integriert sind.

Dies ist hilfreich, da es den Aufwand für den Entwickler verringert, wenn es darum geht, seine Anwendungen zugänglich zu machen, indem sichergestellt wird, dass die Benutzererwartungen hinsichtlich der Interaktion erfüllt werden, und es kann möglicherweise auch die Implementierung von Dialogen im Allgemeinen vereinfachen.

Grundlegende Verwendung

Hinzufügen eines Dialogs mit dem neuen

Tag kann mit nur wenigen Codezeilen erreicht werden.

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

Wenn Sie es dann schließen möchten, können Sie die Methode .close() im Dialogfeld aufrufen oder die Escape-Taste drücken, um es zu schließen, genau wie die meisten anderen Modalitäten funktionieren. Beachten Sie außerdem, dass ein Hintergrund erscheint, der den Rest der Seite verdunkelt und Sie daran hindert, mit ihr zu interagieren. Ordentlich!

Barrierefreiheit und Fokusmanagement

Der korrekte Umgang mit dem Fokus ist wichtig, wenn Sie Ihre Webanwendungen für alle Benutzer zugänglich machen möchten. Normalerweise müssen Sie den aktuellen Fokus auf den aktiven Dialog verschieben, wenn Sie sie anzeigen, aber mit dem Dialogelement wird das für Sie erledigt.

Standardmäßig wird der Fokus auf das erste fokussierbare Element im Dialog gesetzt. Sie können optional ändern, welches Element zuerst den Fokus erhält, indem Sie das Autofokus-Attribut auf das Element setzen, auf dem der Fokus beginnen soll, wie im vorherigen Beispiel, wo dieses Attribut zur Schaltfläche „Schließen“ hinzugefügt wurde. Element.

Durch die Verwendung der .showModal()-Methode zum Öffnen des Dialogs wird implizit auch die Dialog-ARIA-Rolle zum Dialogelement hinzugefügt. Dies hilft Screenreadern zu verstehen, dass ein Modal angezeigt wurde, und hilft dem Bildschirm, entsprechend zu reagieren.

Formulare zu Dialogen hinzufügen

Formulare können auch zu Dialogen hinzugefügt werden, und es gibt sogar einen speziellen Methodenwert für sie. Wenn Sie ein

Wenn Sie ein Element mit der auf Dialog gesetzten Methode hinzufügen, weist das Formular einige andere Verhaltensweisen auf, die von den standardmäßigen Get- und Post-Formularmethoden abweichen.

Erstens wird mit dieser neuen Methode keine externe HTTP-Anfrage gestellt. Stattdessen wird beim Absenden des Formulars die Eigenschaft „returnValue“ des Formularelements auf den Wert der Schaltfläche „Senden“ im Formular gesetzt.

Gegeben ist also dieses Beispielformular:

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

Sobald Ihre gewünschte Antwort vom Server zurückkommt, können Sie sie manuell schließen, indem Sie die Methode .close() im Dialogfeld verwenden.

Den Hintergrund aufwerten

Der Hintergrund hinter dem Dialog ist standardmäßig ein größtenteils durchscheinender grauer Hintergrund. Dieser Hintergrund ist jedoch mithilfe des Pseudoelements ::backdrop vollständig anpassbar. Damit können Sie eine Hintergrundfarbe auf einen beliebigen Wert einstellen, einschließlich Farbverläufen, Bildern usw.

Möglicherweise möchten Sie auch festlegen, dass durch Klicken auf den Hintergrund das Modal ausgeblendet wird, da dies eine häufig implementierte Funktion von ihnen ist. Standardmäßig ist der

element erledigt das nicht für uns. Es gibt ein paar Änderungen, die wir am Dialog vornehmen können, damit dies funktioniert.

Zuerst wird ein Ereignis-Listener benötigt, damit wir wissen, wann der Benutzer den Dialog verlässt.

<form>



<p>The form element with the example-form id will have its returnValue set to Submit.</p>

<p>In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted.</p>

<p>You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog.</p>

<p>In this case, you can call event.preventDefault() in the submit event listener like so:<br>
</p>

<pre class="brush:php;toolbar:false">exampleForm.addEventListener('submit', (event) => {
  event.preventDefault();
});

Allein dieser Event-Listener sieht seltsam aus. Es scheint, dass der Dialog jedes Mal geschlossen wird, wenn auf den Dialog geklickt wird, nicht auf den Hintergrund. Das ist das Gegenteil von dem, was wir tun wollen. Leider können Sie nicht auf ein Klickereignis im Hintergrund achten, da es als Teil des Dialogs selbst betrachtet wird. Durch das alleinige Hinzufügen dieses Ereignis-Listeners wird der Dialog durch Klicken auf eine beliebige Stelle auf der Seite effektiv geschlossen.
Um dies zu korrigieren, müssen wir den Inhalt des Dialogs mit einem anderen Element umschließen, das den Dialog effektiv maskiert und stattdessen den Klick empfängt. Ein einfaches

-Element reicht aus!

dialog.addEventListener('click', (event) => {
  if (event.target === dialog) {
    dialog.close();
  }
});

Das Wrapping-Div kann in ein Inline-Block-Element umgewandelt werden, um den Rand zu enthalten. Durch Verschieben der Auffüllung vom übergeordneten Dialog zum Wrapper interagieren Klicks in den aufgefüllten Teilen des Dialogs jetzt stattdessen mit dem Wrapper-Element um sicherzustellen, dass es nicht abgewiesen wird.

Abschluss

Die Verwendung des Dialogelements bietet erhebliche Vorteile für die Erstellung von Dialogen und Modalen, indem es die Implementierung mit angemessenem Standardverhalten vereinfacht, die Zugänglichkeit für Benutzer verbessert, die unterstützende Technologien wie Bildschirmleser benötigen, durch automatische ARIA-Rollenzuweisung, maßgeschneiderte Unterstützung für Formularelemente und Flexibilität Styling-Optionen.

Das obige ist der detaillierte Inhalt vonDas HTML-Dialogelement: Verbesserung der Zugänglichkeit und Benutzerfreundlichkeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!