Gunnar Bittersmann: Neues Anfänger-Tutorial für JavaScript: Tic-Tac-Toe

Beitrag lesen

problematische Seite

@@Felix Riesterer

ich habe mir diese Antwort nocheinmal durchgesehen, um zu prüfen, was eine zugängliche Bedienung alles erfordert. Nun bin ich mir nicht mehr so sicher, ob Deine Vorschläge unbedingt die besten sind.

Du begehst erneut denselben Fehler, den du schon beim Vergleich der Komplexität unserer JavaScript-Codes begangen hattest: Du schiebst „alles“ der Zugänglichkeit zu. In Wirklichkeit ist vieles davon aber für progressive enhancement und hat nichts mit Barrierefreiheit (im engeren Sinn, s.u.) zu tun.

Der Inhalt könnte in einem Button bestehen, der als Eingabewerkzeug dafür dient, dass der Spieler, der gerade an der Reihe ist, dieses Feld belegen möchte.

Also: Ein Button in jedes Tabellenfeld. Nur einer.

„Das Mindest-Markup“, das sagte ich doch.

Dazu fragen wir uns, was denn die Gundfunktionalität ist: Ganz einfach die Auswahl von Kreuz oder Kreis in jedem Feld.

Nein. Das ist nicht die Grundfunktionalität. Diese besteht in der Auswahl eines der noch freien Felder. Der Benutzer wählt keinesfalls zwischen Kreuz und Kreis! Das würde sich mit der Spielmechanik stören, da dann eine Mehrfacheingabe denkbar wäre, welche gegen die Spielregel verstößt, dass die Spieler im Wechsel jeweils ein Feld für sich in Anspruch nehmen.

Grundfunktionalität ist für mich, was sich mit einfachsten Mitteln umsetzen lässt. Und das ist eben ein Tic-Tac-Toe nur mit HTML – bei dem die Spieler freilich selbst aufpassen müssen, wer am Zug ist und dass derjenige seine eigene Marke in ein Feld setzt. 🐕

Das müssen die Spieler beim Spielen auf Papier doch auch. Es besteht kein Zwang, dass die Grundfunktionalität beim Spiel auf dem Computer mehr bieten müsste.

Eine solche Auswahl müsste man aufwendig wieder kompensieren, damit der aktuelle Spieler nur "sein" Symbol benutzen kann.

Das wäre bei mir dann progressive enhancement – eine Erweiterung der Grundfunktionalität.

Dieselbe Logik muss bei einer nur mit JavaScript spielbaren Implementation ja auch vorhanden sein – nur fehlt dann o.g. Grundfunktionalität.

Aber das passende UI-Element zur Auswahl ist ein Drop-Down-Menü. Das Innere der Tabellenzellen wäre

Finde ich nicht.

Ja ja, schon gut. Zwei Radiobuttons sind besser. ;-)

Hier (erst!!) kommt nun JavaScript ins Spiel.

Finde ich nicht. JavaScript sollte das Spielfeld bereits erstellen. JavaScript kann einen Button ins Dokument pflanzen, der das Erstellen des Spielfeldes verursacht. Ohne JavaScript sollte ja auch keine Tabelle zu sehen sein.

Aber warum denn nicht? Die Grundfunktionalität funktioniert (bei entsprechenden UI-Elementen) doch auch ohne JavaScript.

Findest Du nicht, dass mein Vorschlag mit nur einem Button hier ebenso zugänglich

Ja, wenn du „zugänglich“ im engeren Sinn meinst, also zugänglich auch bspw. für Blinde. Siehe oben.

Nein für „zugänglich“ im erweiterten Sinn. Im erweiterten Sinn zugänglich heißt zugänglich für alle ohne spezielle Anforderungen, also zugänglich bspw. auch ohne JavaScript.

aber technisch simpler

Vielleicht etwas. Aber auch nicht wesentlich.

und von daher sinnvoller ist?

Das hängt davon ab, was man als sinnvoll erachtet. Wenn man es sinnvoll findet, Anfängern ohne Blick zur Seite JavaScript einzuflößen, mag ein Nur-JavaScript-Tic-Tac-Toe dafür passend sein.

Wenn man es sinnvoll findet, Anfängern auch auf den Weg zu geben, wozu man JavaScript verwenden kann und wofür man es nicht verwenden sollte und was alles auch ohne JavaScript geht, dann halte ich das progressively enhanced Tic-Tac-Toe für angebrachter.

Ich finde nicht, dass eine JavaScript-freie Lösung in ein JavaScript-Tutorial sollte.

Ich finde, doch! Weil ich die Erfahrung gemacht habe, dass Leute auf alles mit JavaScript drauflos ballern, weil sie außer JavaScript nichts anderes gelernt haben. Traurige Wirklichkeit.

(An der Stelle sei mir noch ein Verweis auf diesen Tweet von Heydon gestattet. Ich weiß, du stehst darauf. ;-))

Wie ich sagte: Barrierefreiheit muss im Artikel mit vermittelt werden, progressive enhancement sollte im Artikel mit vermittelt werden.

„Die Entscheidung, ob progressive enhancement in den Artikel gehört, ist eine technische. Die Entscheidung, ob Barrierefreiheit in den Artikel gehört, ist eine menschliche.“

LLAP 🖖

--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
3 205

Neues Anfänger-Tutorial für JavaScript: Tic-Tac-Toe

Felix Riesterer
  • meinung
  • seitenbewertung
  • selfhtml-wiki
  1. 0
    Matthias Scharwies
    1. 0
      Felix Riesterer
      1. 0
        Matthias Apsel
        1. 0
          Felix Riesterer
          1. 0
            Der Martin
            1. 0
              Gunnar Bittersmann
              1. 0
                Der Martin
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Matthias Apsel
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Der Martin
                        1. 0
                          Gunnar Bittersmann
                2. 0
                  Felix Riesterer
                  1. 0
                    Camping_RIDER
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Camping_RIDER
          2. 0
            Gunnar Bittersmann
            1. 3
              Felix Riesterer
              1. 1
                Gunnar Bittersmann
                1. 0
                  Felix Riesterer
                  1. 0
                    Gunnar Bittersmann
                    1. 1
                      Matthias Apsel
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Matthias Apsel
                          1. 0
                            Gunnar Bittersmann
                            1. 0
                              Camping_RIDER
                              1. 0
                                Gunnar Bittersmann
                                1. 0
                                  JürgenB
                                  1. 0
                                    Gunnar Bittersmann
                                    1. 0
                                      JürgenB
                                      1. 0
                                        Gunnar Bittersmann
                                2. 4
                                  Camping_RIDER
                                  1. 0
                                    Gunnar Bittersmann
                                    1. 0
                                      Camping_RIDER
                                      1. 0
                                        Gunnar Bittersmann
                                        1. 0
                                          Felix Riesterer
                                          1. 0
                                            Gunnar Bittersmann
                                            1. 0
                                              Camping_RIDER
                                              1. 0
                                                Gunnar Bittersmann
                                                1. 1

                                                  Kommunikation

                                                  Camping_RIDER
                                                  • meinung
                                                  • menschelei
              2. 0
                Richard Rüfenacht
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Richard Rüfenacht
                  2. 0
                    Auge
                    • meinung
                    • selfhtml-wiki
                    1. 0
                      Gunnar Bittersmann
                2. 0
                  Auge
                  • meinung
                  • selfhtml-wiki
    2. 0
      Gunnar Bittersmann
      1. 0
        Felix Riesterer
        1. 0

          Großes ẞ

          Gunnar Bittersmann
          • typografie
          1. 0
            Camping_RIDER
            1. 0
              Gunnar Bittersmann
              1. 0
                Camping_RIDER
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Camping_RIDER
                    1. 0
                      Der Martin
                      1. 0
                        Christian Kruse
                        1. 0
                          Der Martin
                        2. 0
                          Gunnar Bittersmann
                          1. 0
                            Christian Kruse
                            1. 0
                              Camping_RIDER
                            2. 0
                              Christian Kruse
                          2. 0
                            Der Martin
                            1. 0
                              Gunnar Bittersmann
                              • menschelei
                    2. 0
                      Matthias Apsel
            2. 0
              MudGuard
              1. 0
                Christian Kruse
              2. 0
                Gunnar Bittersmann
                1. 0
                  Felix Riesterer
              3. 0
                Gunnar Bittersmann
                1. 0
                  Matthias Apsel
          2. 2

            Großes ẞ - der Vollständigkeit halber

            Bai Se Wey
            1. 0
              Gunnar Bittersmann
              1. 1

                Großes ẞ - der Kleinlichkeit halber

                Bai Se Wey
      2. 0
        Klawischnigg
        1. 0
          Camping_RIDER
          • menschelei
  2. 0
    Gunnar Bittersmann
    1. 0
      JürgenB
      1. 0
        Matthias Apsel
        1. 0
          Christian Kruse
          1. 0
            JürgenB
            1. 0
              Tabellenkalk
          2. 0
            Camping_RIDER
      2. 0
        Gunnar Bittersmann
        1. 0
          Felix Riesterer
          1. 0
            Gunnar Bittersmann
            • selfhtml-wiki
            • svg
            1. 0
              Felix Riesterer
              1. 0
                Camping_RIDER
                1. 0
                  Gunnar Bittersmann
                  • selfhtml-wiki
                  • typografie
                  1. 0
                    Auge
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Christian Kruse
                        1. 0
                          Gunnar Bittersmann
                          1. 3
                            Christian Kruse
              2. 0
                Gunnar Bittersmann
                1. 1
                  Camping_RIDER
                  1. 0
                    Gunnar Bittersmann
    2. 0
      Felix Riesterer
  3. 0
    JürgenB
    1. 0
      Felix Riesterer
      1. 0
        Gunnar Bittersmann
        1. 0
          Matthias Apsel
        2. 0
          Felix Riesterer
        3. 0
          Camping_RIDER
          1. 0
            Gunnar Bittersmann
            1. 0
              JürgenB
              1. 0
                Auge
              2. 0
                Camping_RIDER
              3. 0
                Gunnar Bittersmann
                1. 0
                  Gunnar Bittersmann
      2. 0
        JürgenB
  4. 4
    dedlfix
    1. 0
      Matthias Scharwies
      1. 0
        dedlfix
        1. 0
          Matthias Scharwies
          1. 0
            dedlfix
            1. 0
              Matthias Scharwies
              1. 0
                dedlfix
          2. 0
            Matthias Apsel
            1. 0
              Matthias Scharwies
            2. 0
              Camping_RIDER
    2. 0
      Felix Riesterer
      1. 0
        Gunnar Bittersmann
      2. 0
        dedlfix
  5. 0
    pl
    1. 0
      Felix Riesterer
      1. 0
        pl
        1. 0
          Gunnar Bittersmann
  6. 0
    Msass
  7. 5
    Gunnar Bittersmann
    1. 1
      dedlfix
      1. 0
        Gunnar Bittersmann
        1. 2
          Felix Riesterer
          1. 1
            Gunnar Bittersmann
            1. 1
              Felix Riesterer
              1. 0
                Gunnar Bittersmann
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Felix Riesterer
                    • meinung
                    • selfhtml-wiki
                2. 0
                  Felix Riesterer
                  • meinung
                  • selfhtml-wiki
            2. 3
              Matthias Apsel
    2. 0
      Matthias Apsel
      1. 0
        Matthias Apsel
        1. 2
          dedlfix
      2. 0
        Gunnar Bittersmann
        1. 0
          Felix Riesterer
          1. 0
            Gunnar Bittersmann
            1. 0
              Camping_RIDER
              1. 0
                Gunnar Bittersmann
                1. 1
                  Felix Riesterer
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Felix Riesterer
            2. 0
              Felix Riesterer
              1. 0
                Gunnar Bittersmann
    3. 0
      Felix Riesterer
      1. 1
        Gunnar Bittersmann
        1. 0
          Gunnar Bittersmann
    4. 0

      Wer hat gewonnen?

      Matthias Apsel
      • javascript
      1. 0
        Gunnar Bittersmann
    5. 0
      Matthias Apsel
    6. 0
      Matthias Apsel
      1. 0
        Matthias Apsel
    7. 6
      Felix Riesterer
      1. 1
        Der Martin
        1. 1
          Felix Riesterer
          1. 0
            Matthias Scharwies
            1. 0
              Felix Riesterer
              1. 0
                Gunnar Bittersmann
          2. 1
            Gunnar Bittersmann
            1. 0
              Felix Riesterer
              1. 0
                Gunnar Bittersmann
                1. 0
                  Felix Riesterer
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Matthias Apsel
                2. 1

                  Roter-Faden-Artikel in Wikis

                  Camping_RIDER
              2. 0
                Gunnar Bittersmann
      2. 1
        Gunnar Bittersmann
  8. 0
    Gunnar Bittersmann
    1. 0
      Felix Riesterer
      • meinung
      • selfhtml
      • selfhtml-wiki
    2. 0
      Camping_RIDER
  9. 1
    Gunnar Bittersmann
    1. 0
      Felix Riesterer
      1. 0
        Gunnar Bittersmann
        1. 0
          Felix Riesterer
          1. 0
            Gunnar Bittersmann
            1. 2
              Mitleser
              1. 0
                Gunnar Bittersmann
              2. 0
                Matthias Apsel
                1. 0
                  Gunnar Bittersmann
                  1. 1
                    Camping_RIDER
                    1. 1
                      Gunnar Bittersmann
                      1. 1
                        Felix Riesterer
                        • meinung
                        • selfhtml-wiki
                        1. 0
                          Gunnar Bittersmann
                          1. 1
                            Camping_RIDER
                            1. 0
                              Gunnar Bittersmann
                              1. 1
                                Matthias Apsel
                        2. 0
                          Gunnar Bittersmann
                          1. 2
                            Tabellenkalk
                    2. 1
                      Gunnar Bittersmann
                      1. 0
                        Camping_RIDER
                        1. 1
                          Der Martin
                      2. 0
                        Matthias Apsel
          2. 1
            Gunnar Bittersmann
    2. 0
      Camping_RIDER
      1. 0
        Gunnar Bittersmann
        1. 1
          Camping_RIDER