@@Felix Riesterer

ich habe den Artikel und seine Beispiele komplett neu gefasst und überarbeitet. Jetzt sollten alle Aspekte der Zugänglichkeit auch in @Gunnar Bittersmann-s Sinne in diesem Anfänger-Tutorial zur Zufriedenheit behandelt und an den passenden Stellen angemahnt und vorgeführt sein.

Du hast erkennbare Fortschritte gemacht. Mit „alle Aspekte“ solltest du aber vorsichtig sein.

Es ist nicht geholfen, wenn ein Screenreader „Button wählen Button wählen Button wählen Button wählen Button wählen Button wählen Button wählen Button wählen Button wählen“ vorliest. Die Buttons brauchen eine jeweils eigene Beschriftung:

<tr>
  <td><button>Feld oben links wählen</button></td>
  <td><button>Feld oben Mitte wählen</button></td>
  <td><button>Feld oben rechts wählen</button></td>
</tr>
<tr>
  <td><button>Feld Mitte links wählen</button></td>
  <td><button>Feld Mitte Mitte wählen</button></td>
  <td><button>Feld Mitte rechts wählen</button></td>
</tr>
<tr>
  <td><button>Feld unten links wählen</button></td>
  <td><button>Feld unten Mitte wählen</button></td>
  <td><button>Feld unten rechts wählen</button></td>
</tr>

(„Feld Mitte Mitte“ hört sich nicht besonders an, da lässt sich Besseres finden. „Mittelfeld“?)

„Es sieht so aus, als wäre die Doppelung mit dem Tabelleninhalt „x“ und der Klasse x unnötig. […] Um die Doppelung mit gleichlautender Klasse zum Tabelleninhalt kommt man daher nicht herum.“

Das ist eine Lüge-für-Kinder. Es sollte auch mit <td aria-label="x"></td> gehen, was Screenreader zufriedenstellen dürfte und auch zum Styling verwendet werden kann.

Aber das nur nebenbei. Das soll nicht heißen, dass man das so umsetzen sollte. Gerade in einem Anfängertutorial ist Tabellenzelleninhalt und Klasse wohl eine gute Wahl. Vielleicht einfach die Aussage „um die Doppelung kommt man nicht herum“ entschärfen/weglassen?

„[…] die einem geeigneten Block-Element (in diesem Tutorial <aside>, aber es könnte auch ein fast beliebiges anderes sein) vergeben wird“

Nein, das ist fehlerhaftes HTML. aside ist hier nicht geeignet, wenn das Tic-Tac-Toe doch der Hauptinhalt der Seite ist.

Manchmal ist das geeignete HTML-Element auch ein div.

Ich bin auch nicht sicher, ob caption der beste Platz ist, um die Information unterzubringen, welcher Spieler am Zug ist.

„im gegenwärtigen Zustand kann unser Spiel nicht neu gestartet werden.“

Bei vernünftigem™ Markup mit zwei Radiobuttons (bzw. einem select) hat man die Funktion gratis. Das Ganze in ein form-Element, einen Reset-Button rein – fertig.

Irgendwann kommst du noch dahinter, dass progressive enhancement nicht kompliziert und aufwendig ist, sondern im Gegenteil viele Dinge vereinfacht.

LLAP 🖖