Tabellenüberschrift als Link

Anti-Frickel · #1 (**permalink**) 11.07.2008, 14:07

Hallo,

ich habe eine Tabelle, die in etwa so aufgebaut ist:

Code:

<table>
    <thead>
        <tr>
            <th scope="col" abbr="Überschrift" title="Überschrift">Überschrift</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Information</td>
        </tr>
    </tbody>
</table>

Eine Anforderung für diese Tabelle ist es, dass die Kopfzeile jeder Spalte ein Link sein soll (beim Draufklicken wird die Tabelle nach dieser Spalte sortiert).

Aus programmiertechnischen Gründen (es werden wesentliche Daten in Hidden-Fields gehalten) muss ich dies über ein Formular lösen, d.h. der "Link" muss ein Input-Button sein (Ein Link der per Javascript die Form submittet ist ja gemäß BIK/BITV Prüfschritt 6.3.1 keine Lösung). Den Button würde ich per CSS dann wieder wie einen Link aussehen lassen.

Meine Frage ist, ob es die Zugänglichkeit der Tabelle behindert, wenn im TH-Tag ein Input-Button steht, in etwa so:

Code:

<table>
    <thead>
        <tr>
            <th scope="col" abbr="Überschrift">
                <input type="submit" value="Überschrift" title="Überschrift - Klicken Sie hier um nach Überschrift zu sortieren" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Information</td>
        </tr>
    </tbody>
</table>

Zumindest der W3C-Validator hat nichts dagegen.

Danke schonmal und Gruß

toscho · #2 (**permalink**) 14.07.2008, 12:19

Wenn es dir eher um Barrierefreiheit geht, dann ist das Hauptproblem an deinem Ansatz, daß der Absendebutton zu früh auftaucht. Zu diesem Zeitpunkt ist ja noch ganz offen, was denn genau übermittelt werden soll. Und wenn man das dann herausgefunden hat, muß man wieder zurück. Finde ich etwas unglücklich.

Wenn es allein ums Sortieren geht, würde ich versuchen sorttable: Make all your tables sortable zu nutzen. Die zusätzlichen Daten, die du brauchst, kannst du ja auch in ein Cookie packen.

Gruß
Thomas

Anti-Frickel · #3 (**permalink**) 14.07.2008, 14:51

Hallo Thomas,

Zitat:

Zitat von toscho

Wenn es dir eher um Barrierefreiheit geht, dann ist das Hauptproblem an deinem Ansatz, daß der Absendebutton zu früh auftaucht. Zu diesem Zeitpunkt ist ja noch ganz offen, was denn genau übermittelt werden soll.

es geht mir bei der Frage vor allem um Barrierefreiheit.

Was mit dem "Absendebutton" ausgelöst wird, ist ja nur eine direkte Änderung der Sortierung. Angenommen ich habe eine 5-spaltige Tabelle, dann würde jeder Spaltentitel aus einem Button bestehen, der die Bezeichnung des Spaltentitels enthält (z.B.: input type=submit value=Nummer). Wenn man auf einen der Buttons klickt, wird die Tabelle dann nach der Spalte sortiert (die Information zur dieser Funktionalität würde ich in einem title-Tag des Buttons beschreiben).

Es gibt sonst keine Formulardaten, die der User da eingeben müsste. Die gesamte <Form> enthält also nur diese Buttons zum Ändern der Sortierung.

Eine Javascript-Lösung ist leider keine Alternative.

Gruß

kampfgnom · #4 (**permalink**) 14.07.2008, 19:08

Richtig
aber wenn z.b. ein screenreader kommt, und ließt das vor. Dann weiß der User noch gar nicht was er sortieren kann/soll. Sondern nur das er's kann

Geronimo · #5 (**permalink**) 14.07.2008, 22:12

Zitat:

Zitat von kampfgnom

[...] aber wenn z.b. ein screenreader kommt, und ließt das vor. Dann weiß der User noch gar nicht was er sortieren kann/soll. Sondern nur das er's kann

Und das ist auch vollkommen richtig so. Es wäre äußerst ärgerlich erst hinterher zu erfahren, dass man die Informationen auch sortieren hätte können. Es ist mir allerdings ein Rätsel warum es unbedingt eine Schaltfläche sein muss. Kann man die Informationen denn nicht per Parameter übertragen?

Anti-Frickel · #6 (**permalink**) 15.09.2008, 11:41

Nur falls es jemanden interessiert, die Seite mit betreffender Tabelle wurde mittlerweile beim BIK geprüft, demnach gibt es unter dem Gesichtspunkt der Barrierefreiheit keinerlei Einwände dagegen, wie ich es gemacht hatte (also Tabelle mit Button-Überschriften).

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
clearen im 21 Jhr.	Muamicus	CSS	23	14.12.2010 19:50
ul richtig zentrieren	Muamicus	CSS	23	14.12.2010 18:28
Definitionsliste in einer Floatumgebung	*pi	CSS	11	07.01.2009 18:34
Ständig wechselnde Bilder, Werbung	Vybsi	(X)HTML	17	24.01.2008 23:00
CSS Navigationsproblem	thesecretboy	CSS	0	12.04.2007 08:12