heinetz: Barrierefreie Formulare

Hallo Forum,

da bin ich mal wieder und hab ein Thema, mit dem ich mich beschäftige.

Ich betreue in Portal, dass vor Allem aus allen möglichen Formularen besteht. Diese Formulare werden von Redakteuren aus bereitgestellten Komponenten zusammen klickt. Die vorhandenen Komponenten sind z.T. schlecht geschnitten und bei einer Prüfung auf Barrierefreiheit ist folgender Umstand aufgefallen:

Inputs sind entweder required oder optional. Sie werden aber nicht einheitlich kenntlich gemacht. Inputs sind quasi per default 'required', sprich sie werden nicht extra kenntlich gemacht. 'Optional' ist die Abweichung, wird aber nicht immer als solches gekennzeichnet. Es gibt als drei zustände:

  1. requiered; ohne Markierung
  2. optional; ohne Markierung
  3. optional; mit Markierung

Mal unabhängig davon ob aria-required richtig verwendet wird, ist das natürlich suboptimal und nun standen wir vor der Frage, ob wir entweder 1. alle Pfichfelder markieren und die optionalen nicht oder 2. anders herum. Es gab Gründe dafür, dass wir uns für 2. entschieden haben und das in einem ersten Wurf umgesetzt haben.

Nun steht tatsächlich an allen (optionalen Inputs) die Markierung und jetzt kommst erst die eigentliche Frage ...

In ein input type="text", dass ein Pflichtfeld ist, muss man einen Wert eintragen. Welchen ist ja für required erstmal egal. Für eine Checkbox kann ich mir nur einen Fall vorstellen, in dem es verpflichtend ist, dass man sie checked. Sowas wie "Bestätigen Sie, dass Sie mit irgendwelchen Bedingungen einverstanden sind". Ansonsten ist eine Checkbox ja immer eine Entscheidung. Für irgendetwas (checked) oder dagegen. Noch schwieriger finde ich Radiobuttons. Die machen aus meiner Sicht nur Sinn als Gruppe mit einem Element, dass default-selected ist. Damit ist es ein Umschalter zwischen Optionen und persé Pflichtfeld.

Kann da jemand etwas zur Klärung beitragen?

Danke und

Beste Grüße, heinetz

  1. Hallo heinetz,

    Kann da jemand etwas zur Klärung beitragen?

    Was genau möchtest Du denn klären? Die Semantik von "required" für text, checkbox und radio hast Du meiner Meinung nach richtig dargestellt.

    Bei Radio ist es so, dass ein einziges required an einem Radiobuton in der Gruppe reicht, damit man einen davon auswählen muss. Zumindest war das gerade bei mir in Chrome so.

    Übrigens sind die Attribute required und aria-required sehr verschieden. Das required-Attribut steuert das submit-Verhalten - solange es nicht erfüllt ist, kann man nicht submitten.

    Das aria-required Attribut setzt Du dann, wenn Du kein required-Attribut verwendest, sondern ein eigenes Widget gebaut hast, dessen required-Verhalten Du auf andere Weise steuerst. Inclusive der Submit-Sperre. MDN führt als Beispiel ein div mit role="checkbox" an. Es ist nicht unbedingt empfehlenswert, sowas zu tun, aber es mag Fälle geben, wo man seine eigenen Widgets bauen muss. Und die müssen dann mit aria-Attributen vollgepflastert werden, um das Standardverhalten der Zugänglichkeit, das die HTML Elemente von Haus aus mitbringen, nachzubilden.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. @@Rolf B

      Bei Radio ist es so, dass ein einziges required an einem Radiobuton in der Gruppe reicht, damit man einen davon auswählen muss. Zumindest war das gerade bei mir in Chrome so.

      Das sollte überall so sein, weil es so spezifiziert ist:

      Constraint validation: If an element in the radio button group is required, and all of the input elements in the radio button group have a checkedness that is false, then the element is suffering from being missing.”

      🖖 Живіть довго і процвітайте

      --
      „Ukončete, prosím, výstup a nástup, dveře se zavírají.“
      1. Hello,

        Input Type Radio

        Da gibt es ja noch weitere Spielarten:

        1. Drei Radios für Ja, Nein, keine Wahl
        2. Wenn vorstehendes nicht verfügbar ist, das gesamte Formular nicht abschicken
        3. Um das Nichtabschicken auszuhebeln, jede Wahl sofort per AJAX zum Server schicken und in der Session speichern

        Mich würde interessieren, wie Ihr das bewertet.

        Glück Auf
        Tom vom Berg

        --
        Es gibt soviel Sonne, nutzen wir sie.
        www.Solar-Harz.de
        S☼nnige Grüße aus dem Oberharz
        1. @@TS

          Input Type Radio

          Da gibt es ja noch weitere Spielarten:

          1. Drei Radios für Ja, Nein, keine Wahl
          2. Wenn vorstehendes nicht verfügbar ist, das gesamte Formular nicht abschicken
          3. Um das Nichtabschicken auszuhebeln, jede Wahl sofort per AJAX zum Server schicken und in der Session speichern

          Mich würde interessieren, wie Ihr das bewertet.

          Losgelöst vom jeweiligen Anwendungsfall bewerte ich das gar nicht.

          🖖 Живіть довго і процвітайте

          --
          „Ukončete, prosím, výstup a nástup, dveře se zavírají.“
        2. Kannst du genauer erklären was du meinst?

          1. Wenn man diese drei Optionen hat, wüsste ich außer einer umständlichen Combobox keine andere Möglichkeit.
          2. Was ist "vorstehendes"?
          3. Welches Nichtabschicken soll wie ausgehebelt werden?
        3. Input Type Radio

          1. Um das Nichtabschicken auszuhebeln, jede Wahl sofort per AJAX zum Server schicken und in der Session speichern

          Mich würde interessieren, wie Ihr das bewertet.

          Abseits davon, dass ich null verstehe welchen Sinn die ganze Fragestellung haben soll: diesen Punkt bewerte ich negativ. Wenn ein Formular mir suggeriert, dass ich erst beim Absenden Serverkontakt haben werde, dann würde mich das potentiell veräppelt zurücklassen und ich mach den Tab dann womöglich einfach zu.

          1. Hello,

            Input Type Radio

            1. Um das Nichtabschicken auszuhebeln, jede Wahl sofort per AJAX zum Server schicken und in der Session speichern

            Mich würde interessieren, wie Ihr das bewertet.

            Abseits davon, dass ich null verstehe welchen Sinn die ganze Fragestellung haben soll: diesen Punkt bewerte ich negativ. Wenn ein Formular mir suggeriert, dass ich erst beim Absenden Serverkontakt haben werde, dann würde mich das potentiell veräppelt zurücklassen und ich mach den Tab dann womöglich einfach zu.

            A. Das sind die mir zusätzlich zu Gunnars Beschreibungen bekannten Spielarten
            B. Das merkt man vermutlich gar nicht, wenn da etwas im Hintergrund per AJAX zum Server geschicht wird.

            Allerdings finde ich es als Nutzer der Seite auch nicht fair.
            Bei Suchfeldern wird das aber gerne verwendet.

            Glück Auf
            Tom vom Berg

            --
            Es gibt soviel Sonne, nutzen wir sie.
            www.Solar-Harz.de
            S☼nnige Grüße aus dem Oberharz
            1. Allerdings finde ich es als Nutzer der Seite auch nicht fair.
              Bei Suchfeldern wird das aber gerne verwendet.

              Der Vergleich hinkt IMHO. Irgendwelche Auswahlen ungefragt in der Session zu hinterlegen ist ein anderer Fall, als mir Suchvorschläge zu präsentieren…

              1. Hello,

                Allerdings finde ich es als Nutzer der Seite auch nicht fair.
                Bei Suchfeldern wird das aber gerne verwendet.

                Der Vergleich hinkt IMHO. Irgendwelche Auswahlen ungefragt in der Session zu hinterlegen ist ein anderer Fall, als mir Suchvorschläge zu präsentieren…

                Gegen deine Meinung dazu habe ich auch nichts eingewandt.

                Ich habe nur mitgeteilt, dass das (leider) oft so gemacht wird, um dann z. B. "Andere Besucher dieser Seite haben sich auch Dies Das Jenes angeschaut" daraus zu basteln - oder eben ähnliches Tracking zu veranstalten.

                Glück Auf
                Tom vom Berg

                --
                Es gibt soviel Sonne, nutzen wir sie.
                www.Solar-Harz.de
                S☼nnige Grüße aus dem Oberharz
  2. ... Radiobuttons. Die machen aus meiner Sicht nur Sinn als Gruppe mit einem Element, dass default-selected ist.

    Das mag subjektiv erscheinen und vielleicht auch gegen allgemeine Konventionen verstoßen, aber ich finde die können auch sinnvoll sein wenn nichts vorgewählt ist.
    Eine Combobox erfordert einen Klick mehr und man sieht nur was man ausgewählt hat, aber nicht was es sonst noch alles an Optionen gibt.

    Man stelle sich ein Quiz vor das mit Comboboxen realisiert ist. Unbrauchbar.

    1. @@encoder

      ... Radiobuttons. Die machen aus meiner Sicht nur Sinn als Gruppe mit einem Element, dass default-selected ist.

      Das mag subjektiv erscheinen und vielleicht auch gegen allgemeine Konventionen verstoßen, aber ich finde die können auch sinnvoll sein wenn nichts vorgewählt ist.

      Oder auch nur dann sinnvoll, wenn nichts vorgewählt ist.

      So bei Online-Fragebögen mit Multiple-Choise-Fragen. Menschen tendieren dazu, eine Vorauswahl nicht abzuändern. Wenn aber nichts vorgewählt ist, muss jede Person eine Entscheidung treffen.

      Ein Vorauswahl würde das Ergebnis verfälschen. Hier müssen Radiobuttons verwendet werden, bei denen initial keiner vorgewählt ist.

      🖖 Живіть довго і процвітайте

      --
      „Ukončete, prosím, výstup a nástup, dveře se zavírají.“
  3. Dieser Beitrag wurde gesperrt: Wenig hilfreiche ChatGPT Antwort

    **Hello Heinett,

    Thank you for your question. I understand that you are working on improving the accessibility of the forms in your portal and are struggling with identifying which fields should be marked as required and how to mark them. You also have some questions about how to handle mandatory fields for different input types.

    In general, marking required fields is important for accessibility, as it helps users understand what information they need to provide. It sounds like you have already made the decision to mark optional fields, which is a good step. Now you need to decide how to mark required fields.

    Regarding checkboxes, you are correct that they are typically used for binary decisions. However, it is possible to use them as a required field if there is only one option and the user must confirm it, as you mentioned. Radio buttons, on the other hand, are often used when there are multiple options, but only one can be selected. In this case, you could consider making one of the options the default selection and marking the radio button group as required.

    Ultimately, the decision of how to mark required fields will depend on the specific requirements of your forms and the needs of your users. It may be helpful to do some user testing to see how users interact with the forms and to get feedback on any accessibility issues they encounter.

    1. Well said, my dear friend ChatGPT.