Deaktivierte Schaltflächen integrativer machen

Lassen Sie uns über behinderte Tasten sprechen. Lassen Sie uns insbesondere in die Frage gehen, warum wir sie verwenden und wie wir es besser machen können als das herkömmliche behinderte Attribut in HTML (z. B. deaktiviert> Taste>), um eine Schaltfläche als deaktiviert zu markieren.

Es gibt viele Anwendungsfälle, in denen eine deaktivierte Taste viel Sinn macht, und wir werden in einem Moment diese Gründe erreichen. In diesem Artikel werden wir uns jedoch ein Formular ansehen, mit dem wir einen Einkaufswagen in eine Reihe von Tickets hinzufügen können.

Dies ist ein gutes Basisbeispiel, da es eine klare Situation gibt, um die Schaltfläche „Zu Wagen hinzufügen“ zu deaktivieren: Wenn keine Tickets zum Wagen hinzugefügt werden.

Aber zuerst, warum deaktivierte Schaltflächen?

Menschen daran zu hindern, eine ungültige oder nicht verfügbare Aktion auszuführen, ist der häufigste Grund, warum wir möglicherweise nach einer deaktivierten Taste greifen. In der folgenden Demo können wir nur Tickets hinzufügen, wenn die Anzahl der in den Wagen hinzugefügten Tickets größer als Null ist. Probieren Sie es aus:

Erlauben Sie mir, den Code -Erläuterung in dieser Demo zu überspringen und unsere Aufmerksamkeit auf das zu konzentrieren, was wichtig ist: Die Schaltfläche „zum Warenkorb hinzufügen“.

 <schaltfl typ="Senden" deaktiviert="deaktiviert">
  In den Warenkorb legen
</schaltfl>

Diese Schaltfläche wird durch das deaktivierte Attribut deaktiviert. (Beachten Sie, dass dies ein boolescher Attribut ist, was bedeutet, dass es als deaktiviert oder deaktiviert = "deaktiviert" geschrieben werden kann.)

Alles scheint in Ordnung zu sein ... also was ist daran los?

Um ehrlich zu sein, könnte ich den Artikel genau hier beenden und Sie bitten, behinderte Schaltflächen nicht zu verwenden, weil sie saugen und stattdessen bessere Muster verwenden. Aber lassen Sie uns realistisch sein: Manchmal ist es die Lösung, eine Taste zu deaktivieren, die am sinnvollsten ist.

Nachdem dies gesagt wird, werden wir für diesen Demo -Zweck tun, dass die Deaktivierung der Schaltfläche „Hinzufügen zum Karren“ die beste Lösung ist ( Spoiler -Alarm: das ist nicht). Wir können es immer noch verwenden, um zu erfahren, wie es funktioniert, und die Benutzerfreundlichkeit auf dem Weg zu verbessern.

Arten von Interaktionen

Ich möchte klarstellen, was ich meine, mit behinderten Schaltflächen, die nutzbar sind. Sie mögen denken, wenn die Schaltfläche deaktiviert ist, sollte er nicht verwendbar sein. Also ... was ist der Haken? Trage mit mir.

Im Web gibt es mehrere Möglichkeiten, mit einer Seite zu interagieren. Die Verwendung einer Maus ist eine der häufigsten, aber es gibt andere, wie Sehvorbewohner, die die Tastatur verwenden, um aufgrund einer motorischen Beeinträchtigung zu navigieren.

Versuchen Sie, die Demo oben mit nur der Registerkartenschlüssel zu navigieren, um vorwärts zu gehen, und die Registerkartenschicht, um rückwärts zu gehen. Sie werden feststellen, wie die deaktivierte Schaltfläche übersprungen wird. Der Fokus geht direkt von der Ticketeingabe in den Link „Dummy -Begriffe“.

Lassen Sie uns eine Sekunde innehalten und den Grund, warum wir dazu führen, den Knopf überhaupt zu deaktivieren, und was wir tatsächlich erreicht hatten.

Es ist üblich, "interagieren" mit "Klicken" zu verknüpfen, aber es sind zwei verschiedene Konzepte. Ja, C Lick ist eine Art Interaktion, aber es ist nur eine unter anderem, wie Schwebe und Fokus.

Mit anderen Worten ...

Alle Klicks sind Interaktionen, aber nicht alle Interaktionen sind Klicks.

Unser Ziel ist es, das Klick zu verhindern, aber durch die Verwendung von Behinderungen verhindern wir nicht nur den Klick, sondern auch den Fokus, was bedeutet, dass wir möglicherweise so gut schaden wie gut. Sicher, dieses Verhalten mag harmlos erscheinen, aber es verursacht Verwirrung. Menschen mit einer kognitiven Behinderung können Schwierigkeiten haben zu verstehen, warum sie den Knopf nicht fokussieren können.

In der folgenden Demo haben wir das Layout ein wenig geändert. Wenn Sie eine Maus verwenden und über die Schaltfläche "Senden" schweben, wird ein Tooltip angezeigt, der erklärt, warum die Schaltfläche deaktiviert ist. Das ist großartig!

Wenn Sie jedoch nur die Tastatur verwenden, gibt es keine Möglichkeit, diesen Tooltip zu sehen, da die Schaltfläche nicht mit Behinderungen fokussiert werden kann. Das gleiche passiert auch in Berührungsgeräten. Autsch!

Erlauben Sie mir, noch einmal die Erklärung des Codes zu überspringen. Ich empfehle dringend, „Inclusive Tooltips“ von Haydon Pickering und „Tooltips in der Zeit von WCAG 2.1“ von Sarah Higley zu lesen, um das Tooltip -Muster vollständig zu verstehen.

Arie zur Rettung

Das deaktivierte Attribut in einer tut mehr als nötig. Dies ist einer der wenigen Fälle, in denen ich weiß, wo ein einheimisches HTML -Attribut mehr schaden als nützt. Die Verwendung eines ARIA -Attributs kann einen besseren Job machen, sodass wir die Bildschirmleser anweisen können, wie die Schaltfläche interpretiert werden kann, aber konsequent tun, um ein integratives Erlebnis für mehr Menschen und Anwendungsfälle zu schaffen.

Das deaktivierte Attribut korreliert mit aria-disabled = "true". Probieren Sie die folgende Demo erneut aus, indem Sie nur die Tastatur verwenden. Beachten Sie, wie die Schaltfläche, obwohl er als deaktiviert markiert ist, immer noch durch Fokus zugänglich ist und den Tooltip auslöst!

Cool, oder? Solch eine winzige Verbesserung für eine große Verbesserung!

Aber wir sind noch nicht ganz fertig. Die Einschränkung hier ist, dass wir den Klick mit JavaScript weiterhin programmgesteuert verhindern müssen.

 elform.adDeVentListener ('Submit', Funktion (Ereignis) {
  Event.PreventDefault (); / * Verhindern Sie ein natives Formular Senden */

  const isdisabled = elbuttonsubmit.getAttribute ('aria-disabled') === 'true';

  if (isdisabled || issubitioning) {
    // kehre früh zurück, um zu verhindern, dass das Ticket hinzugefügt wird
    zurückkehren;
  }

  issuB mueding = true;
  // ... Code zum Warenkorb ...
  issuB mueding = false;
})

Sie sind möglicherweise mit diesem Muster vertraut, um zu verhindern, dass Doppelklicks zweimal ein Formular senden. Wenn Sie das behinderte Attribut aus diesem Grund verwenden würden, würde ich es vorziehen, es nicht zu tun, da dies den vorübergehenden Verlust des Tastaturfokus während des Sendens des Formulars verursacht.

Der Unterschied zwischen Behinderungen und Arie-Behinderung

Sie könnten sich fragen: Wenn Aria-Behinderung den Klick nicht standardmäßig nicht verhindert, was ist der Sinn, ihn zu verwenden? Um das zu beantworten, müssen wir den Unterschied zwischen beiden Attributen verstehen:

Die einzige Überlappung zwischen den beiden ist die Semantik. Beide Attribute werden bekannt geben, dass die Schaltfläche tatsächlich deaktiviert ist, und das ist eine gute Sache.

Im Gegensatz zum behinderten Attribut dreht sich bei Aria Dessled alles um Semantik. ARIA -Attribute ändern standardmäßig niemals das Anwendungsverhalten oder die Stile. Ihr einziger Zweck ist es, Unterstützung bei der Unterstützung von Technologien (z. B. Leser von Bildschirm) dabei zu helfen, den Seiteninhalt aussagekräftiger und robuster anzukündigen.

Bisher haben wir über zwei Arten von Personen gesprochen, die klicken, und diejenigen, die Registerkarten haben. Lassen Sie uns nun über einen anderen Typ sprechen: diejenigen mit Sehbehinderungen (z. B. Blindheit, Low Vision), die Bildschirmleser verwenden, um im Internet zu navigieren.

Personen, die Bildschirmleser verwenden, ziehen es häufig vor, mit der Registerkartenschlüssel Formfelder zu navigieren. Schauen Sie nun nach, wie Voice -Over auf MacOS die deaktivierte Schaltfläche deaktiviert hat.

Dies ist erneut eine sehr minimale Form. In einem längeren Suchen kann die Suche nach einem Sub -Taste, der nicht sofort vorhanden ist, ärgerlich sein. Stellen Sie sich ein Formular vor, bei dem die Taste der Senden -Taste versteckt und nur sichtbar ist, wenn Sie das Formular vollständig ausfüllen. So fühlen sich manche Menschen, wenn das behinderte Attribut verwendet wird.

Glücklicherweise sind Schaltflächen mit Behinderungen von Bildschirmlesern nicht völlig unerreichbar. Sie können immer noch jedes Element einzeln, einzeln navigieren, und schließlich finden Sie die Taste.

Obwohl möglich, ist dies eine nervige Erfahrung. Auf der anderen Seite konzentriert sich der Bildschirmleser mit Aria-Behinderung auf die Schaltfläche und kündigt seinen Status ordnungsgemäß an. Beachten Sie, dass die Ankündigung zwischen den Bildschirmlesern geringfügig unterschiedlich ist. Zum Beispiel sagen NVDA und JWAs "Button, nicht verfügbar", aber Voiceover sagt "Button, gedimmt".

Ich habe herausgefunden, wie beide Attribute verschiedene Benutzererlebnisse basierend auf den gerade verwendeten Tools erstellen:

Die Hauptunterschiede zwischen beiden Attributen sind also:

• Deaktiviert kann die Schaltfläche überspringen, wenn sie die Registerkartenschlüssel verwenden, was zu Verwirrung führt.
• ARIA-DENSALD wird die Schaltfläche weiterhin konzentrieren und bekannt geben, dass es existiert, aber dass es noch nicht aktiviert ist. genauso wie Sie es visuell wahrnehmen könnten.

In diesem Fall ist es wichtig, den subtilen Unterschied zwischen Zugänglichkeit und Benutzerfreundlichkeit anzuerkennen. Barrierefreiheit ist ein Maß für jemand, der etwas verwenden kann. Benutzerfreundlichkeit ist ein Maß dafür, wie einfach etwas zu verwenden ist.

Ist dies deaktiviert zugänglich? Ja . Hat es eine gute Benutzerfreundlichkeit? Ich glaube nicht .

Können wir es besser machen?

Ich würde mich mit mir nicht gut fühlen, wenn ich diesen Artikel beenden würde, ohne Ihnen die wahre integrative Lösung für unser Beispiel für das Ticketformular zu zeigen. Verwenden Sie nach Möglichkeit keine deaktivierten Schaltflächen . Lassen Sie die Leute jederzeit darauf klicken und gegebenenfalls eine Fehlermeldung als Feedback anzeigen. Dieser Ansatz löst auch andere Probleme:

• Weniger kognitive Reibung: Erlauben Sie den Menschen, das Formular jederzeit einzureichen. Dadurch wird die Unsicherheit entfernt, ob die Taste überhaupt überhaupt deaktiviert ist.
• Farbkontrast: Obwohl eine deaktivierte Taste den Farbkontrast WCAG 1.4.3 nicht erfüllen muss, sollten wir garantieren, dass ein Element unabhängig von seinem Zustand immer richtig sichtbar ist. Aber darüber müssen wir uns jetzt keine Sorgen machen, weil der Knopf nicht mehr deaktiviert ist.

Letzte Gedanken

Das behinderte Attribut in ist ein besonderer Fall, in dem es möglicherweise nicht der beste Ansatz ist, ein bestimmtes Problem zu lösen. Versteh mich nicht falsch, weil ich nicht sage, dass behindert ist, ist immer schlecht. Es gibt noch einige Fälle, in denen es immer noch sinnvoll ist, es zu verwenden (z. B. Pagination).

Um ehrlich zu sein, sehe ich das behinderte Attribut nicht genau als ein Zugänglichkeitsproblem. Was mich betrifft, ist eher ein Usability -Problem. Durch den Austausch des behinderten Attributs mit Aria-Behinderten können wir die Erfahrung einer Person viel angenehmer machen.

Dies ist noch ein weiterer Schritt in meine Reise auf der Web -Barrierefreiheit. Im Laufe der Jahre habe ich festgestellt, dass die Zugänglichkeit viel mehr als die Einhaltung von Webstandards ist. Der Umgang mit Benutzererfahrungen ist schwierig und die meisten Situationen erfordern Kompromisse und Kompromisse bei der Annäherung an eine Lösung. Es gibt keine Silberkugel für perfekte Zugänglichkeit.

Unsere Pflicht als Web -Ersteller ist es, die verschiedenen verfügbaren Lösungen zu suchen und zu verstehen. Nur dann können wir die bestmögliche Wahl treffen. Es hat keinen Sinn, so zu tun, als ob die Probleme nicht existieren.

Denken Sie am Ende des Tages daran, dass Sie nichts daran hindern, das Web zu einem integrativeren Ort zu machen.

Bonus

Immer noch da? Lassen Sie mich zwei letzte Dinge über diese Demo erwähnen, die ich für würdig halte:

1. Live -Regionen werden dynamische Inhalte ankündigen

In der Demo haben sich zwei Teile des Inhalts dynamisch geändert: die Schaltfläche "Formular Senden" und die Erfolgsbestätigung ("[x] Tickets hinzugefügt!").

Diese Änderungen werden jedoch für Menschen mit Sehstörungen mit Bildschirmlesern visuell wahrgenommen, die nur nicht die Realität sind. Um es zu lösen, müssen wir diese Nachrichten in Live -Regionen umwandeln. Diese ermöglichen assistiven Technologien, um Änderungen anzuhören und die aktualisierten Nachrichten anzukündigen, wenn sie stattfinden.

In der Demo gibt es eine Nur-SR-Klasse, die eine mit einer Ladenachricht verbirgt, es jedoch von Bildschirmlesern bekannt gegeben werden. In diesem Fall wird ARIA-Live = "AsStotive" auf die angewendet und enthält eine aussagekräftige Nachricht, nachdem das Formular eingereicht wurde und wird gerade geladen. Auf diese Weise können wir dem Benutzer bekannt geben, dass das Formular funktioniert und geduldig ist, wenn es lädt. Zusätzlich tun wir dasselbe wie das Formfeedback -Element.

 <schaltfl typ="Senden" aria-disabled="true">
  In den Warenkorb legen
  <span aria-live="AsStotive">
     
  </span>


<p aria-live="AsStotive">
  
</p></schaltfl>

Beachten Sie, dass das ARIA-Live-Attribut von Anfang an im DOM-Recht vorhanden sein muss, auch wenn das Element noch keine Nachricht enthält, sonst funktionieren die assistiven Technologien möglicherweise nicht ordnungsgemäß.

Es gibt noch viel mehr zu erzählen über dieses kleine Aria-Live-Attribut und die großen Dinge, die es tut. Es gibt auch Gotchas. Wenn es beispielsweise falsch angewendet wird, kann das Attribut mehr schaden als nützen. Es lohnt sich, "mit Aria-Live" von IRE Areinokun und Adrian Rosellis „Lade-Skelette“ zu lesen, um besser zu verstehen, wie es funktioniert und wie man es benutzt.

2. Verwenden Sie keine Zeiger-Events, um den Klick zu verhindern

Dies ist eine alternative (und falsche) Implementierung, die ich im Internet gesehen habe. Dies verwendet Zeiger-Events: Keine; in CSS, um das Klick zu verhindern (ohne HTML -Attribut). Bitte tun Sie das nicht. Hier ist ein hässlicher Stift, der hoffentlich zeigen wird, warum. Ich wiederhole, mache das nicht .

Obwohl dieses CSS tatsächlich einen Mausklick verhindert, denken Sie daran, dass es keine Fokus- und Tastaturnavigation verhindert, was zu unerwarteten Ergebnissen oder noch schlimmeren Fehler führen kann.

Mit anderen Worten, die Verwendung dieser CSS -Regel als Strategie, um ein Klick zu verhindern, ist sinnlos (erhalten Sie es?). ;))

Das obige ist der detaillierte Inhalt vonDeaktivierte Schaltflächen integrativer machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!