CONTAO 4.13.35: Minikalender nicht barrierefrei

Hallo,


es ist mir bis jetzt nicht gelungen, den Minikalender barrierefrei nach WCAG Level A zu machen:
https://www.dc-zuarin.de/start.html


Das Prüftool hat einen Fehler ermittelt:
https://achecks.org/checker/index.php#output_div

Code:

---

Success Criteria 1.3.1 Info and Relationships (A)

Check 245: Data table with more than one row/column of headers does not use id and headers attributes to identify cells.
Repair: Add id and headers attributes to table cells so they identify the cells that relate to the headers.
Error Line 249, Column 1:

<table class="minicalendar">
<thead>
<tr>
<th id="previous" headers="previous" class="head previous" ...

---

Obwohl ich bereits die Attribute id und headers ergänzt habe:

Code:

---

<thead>
<tr>
<th id="previous" headers="previous" class="head previous"><a href="start.html?month=202311" title="November 2023" data-skip-search-index>&lt;</a></th>
<th id="current" headers="current" colspan="5" class="head current">Dezember 2023</th>
<th id="next" headers="next" class="head next">&nbsp;.</th>
</tr>
<tr>
<th id="Montag1" headers="Montag current day" class="label col_first">Mo<span class="invisible">ntag</span></th>
<th id="Dienstag1" headers="Dienstag current day" class="label">Di<span class="invisible">enstag</span></th>
<th id="Mittwoch1" headers="Mittwoch current day" class="label">Mi<span class="invisible">ttwoch</span></th>
<th id="Donnerstag1" headers="Donnerstag current day" class="label">Do<span class="invisible">nnerstag</span></th>
<th id="Freitag1" headers="Freitag current day" class="label">Fr<span class="invisible">eitag</span></th>
<th id="Samstag1" headers="Samstag current day" class="label weekend">Sa<span class="invisible">mstag</span></th>
<th id="Sonntag1" headers="Sonntag current day" class="label col_last weekend">So<span class="invisible">nntag</span></th>
</tr>
</thead>

---

Was mache ich falsch?


Vielen Dank für Hinweise.

Die Zuweisung der Headers, die du gemacht hast, macht imho keinen Sinn. Die erste table row mit previous, current und next sind ja keine Richtigen Header für den rest des Kalenders.

Nunja, es sind aber im Original Template 2 Zeilen mit <th> Tags

Ich habe mit dem Prüftool heute vieles versucht, aber ich komme nicht weiter, auch wenn ich in dieser Zeile die Attribute id und headers wieder entferne (so wie im Original).

Das Problem ist nicht die Zuweisung der th, sondern dass du keine Zuweisungen bei den td gemacht hast, denke ich.

Hm... obwohl das Prüftool den Fehler beim <th> markiert, oder interpretiere ich das falsch ?

Code:

---

<table class="minicalendar">
<thead>
<tr>
<th id="previous" headers="previous" class="head previous" ...

---

Ich denke es ist die gesamte <table class="minicalendar"> gemeint. Es macht ja auch keinen Sinn nur die Header zuzuweisen - der Sinn ist ja, dass die einzelnen Tabellenzellen zu den jeweiligen Headern zugewiesen werden sollen.

Die <th> Tags erhalten eine eindeutige id, und die weiteren <td> Elemente das attribut 'headers' mit dem Wert einer vorher vergebenen id

Somit hat der Minikalender 2 Zeilen mit <th> Tags:

Code:

---

<th id="month"  colspan="5" class="head current"><?= $this->current ?></th>

---

Und bei der unteren Aufzählung der tage:

Code:

---

<td class="<?= $day['class'] ?>" headers="month" ><?= $day['label'] ?></td>

---

Vielen Dank für die Unterstützung.

sollte das nicht ins Default Template übernommen werden?
Dann muss nicht jeder das Rad neu erfinden.

Kannst du ja als PR bereitstellen.

Da ich das Modul selbst nirgends nutze, mal im Blindflug.
Aber so müsste es passen.

https://github.com/contao/contao/pull/6640