Barrierefreier Tabellensortierer

[JürgenB]

Hallo,

ich bin gerade dabei, den Tabellensortierer im Wiki zu überarbeiten. Anlass war die Kritik, das man der Tabelle nicht ansieht, das sie sortierbar ist. Ich habe darauf hin Auges Vorschlag angenommen und in meiner momentanen Version hinter die Spaltenüberschriften kleine Dreiecke gesetzt. Maus- und Tastaturbenutzer bekommen zusätzlich einen Tooltip.

Aber wie gehe ich mit Screenreadern um? Da brauche ich Hilfe, da ich mich mit den aria-Attributen nicht auskenne.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Aber wie gehe ich mit Screenreadern um? Da brauche ich Hilfe, da ich mich mit den aria-Attributen nicht auskenne.

In meinem Beispiel sind die Buttons gesprächig und sagen an, was sie tun – bspw. „sort by title“.

Der Button der aktuell sortierten Spalte trägt das aria-current="true"-Attribut.

Ungetestet. Und mein Beispiel sortiert nur in eine Richtung.

LLAP 🖖

PS: DOM ansehen, nicht HTML-Quelltext. 😉

[JürgenB]

Hallo Gunnar,

In meinem Beispiel sind die Buttons gesprächig und sagen an, was sie tun – bspw. „sort by title“.

verwirrt das Screenreader-User nicht wenn da als Spaltenüberschrift statt „Überschrift“ ein „Sortieren nach Überschrift“ kommt? Gibt es da keine andere Möglichkeit?

Kann man nicht „irgendetwas“ an die Tabelle heften, wo so etwas wie „Klick auf die Spaltenüberschrift sortiert“ drin steht?

Werden die title-Attribute von Screenreadern nicht gelesen?

Der Button der aktuell sortierten Spalte trägt das aria-current="true"-Attribut.

Ist drin.

Und mein Beispiel sortiert nur in eine Richtung.

Ich glaube, das ich Daten gefunden habe, die man sinnvoll auf- und absortieren kann. Ich überlege aber noch, ob das Tutorial nicht zu umfangreich wird, wenn ich weitere Steuerelemente einbaue, um für jede Spalte zu entscheiden, ob und wie sortiert wird.

Der Tabellensortiere wird mit einer Klasse gesteuert, So könnte man auch den Spalten Eigenschaften geben. So richtig schön habe ich das aber noch nie gefunden. Darf man inzwishen eigene Attribute verwenden, oder muss man so etwas wie data-sortable=true schreiben? Mir würde <table sortable> oder <th sortable=up> besser gefallen.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

Ich überlege aber noch, ob das Tutorial nicht zu umfangreich wird, wenn ich weitere Steuerelemente einbaue, um für jede Spalte zu entscheiden, ob und wie sortiert wird.

üblicherweise (siehe Datei-Explorer) sortieren solche Spaltenüberschriften beim ersten Klick aufsteigend und beim zweiten absteigend.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@JürgenB

In meinem Beispiel sind die Buttons gesprächig und sagen an, was sie tun – bspw. „sort by title“.

verwirrt das Screenreader-User nicht wenn da als Spaltenüberschrift statt „Überschrift“ ein „Sortieren nach Überschrift“ kommt?

Kommt ja nicht. Nicht „statt“ – der Button ist zusätzlich zur Spaltenüberschrift im th-Element. (Visuell überdeckt der Button die Spaltenüberschrift.)

Kann man nicht „irgendetwas“ an die Tabelle heften, wo so etwas wie „Klick auf die Spaltenüberschrift sortiert“ drin steht?

Kann man sicher auch. Auch und gerade für Sehende – sofern dies bei der Zielgruppe nötig sein sollte.

Werden die title-Attribute von Screenreadern nicht gelesen?

Steve Faulkner: Using the HTML title attribute – updated

HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Kommt ja nicht. Nicht „statt“ – der Button ist zusätzlich zur Spaltenüberschrift im th-Element. (Visuell überdeckt der Button die Spaltenüberschrift.)

oh, da habe ich das += als = gelesen. D.h der Screenreader liest „Überschrift Button (oder so) Nach Überschrift sortieren“ . Das sollte gehen. Ich baue das mal ein.

Kann man nicht „irgendetwas“ an die Tabelle heften, wo so etwas wie „Klick auf die Spaltenüberschrift sortiert“ drin steht?

Kann man sicher auch. Auch und gerade für Sehende – sofern dies bei der Zielgruppe nötig sein sollte.

Also im Text so etwas wie „Die Tabelle kann durch Klick auf die Spaltenüberschriften sortiert werden.“ Das wäre dann aber Aufgabe des Seitenautors und sollte wohl nicht ins Script integriert werden. Im Wiki also ein „Beachten Sie …“.

Werden die title-Attribute von Screenreadern nicht gelesen?

Steve Faulkner: Using the HTML title attribute – updated

Wenn ich das richtig verstanden habe, sind title-Attribute nur etwas für Maus-Benutzer. Ich blende die Titel auch noch bei focus ein, für die Tastatutbenutzer, sollte man das drin lassen? Wobei ein Klick ja auch ein focus ist und den Titel auch einblendet, da muss ich dann noch mal ran.

HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation

5.4.1 2. Otherwise use the button element subtree. 3. Otherwise use title attribute.

Habe ich das richtig vestanden, dass das title-Attribut nur verwendet (vorgelesen?) wird, wenn der Button keine Unterelemente hat?

Gruß
Jürgen

[JürgenB]

Hallo,

in meiner zweiten Version habe ich die Ideen von Gunnar aufgegriffen, den Button über die Spaltenüberschrifen zu legen und noch ein visuell verstecktes „Sortiere nach“ eingebaut.

Leider hat das position: relative für die th den Tabellenrahmen im thead verschwinden lassen. Hat da jemand eine Idee, wie ich den zurück bekomme?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

in meiner zweiten Version habe ich die Ideen von Gunnar aufgegriffen …
Leider hat das position: relative für die th den Tabellenrahmen im thead verschwinden lassen. Hat da jemand eine Idee, wie ich den zurück bekomme?

Die Ideen von Gunnar aufgreifen?

border oder outline für button. Bei mir ist es outline, da thead schon border-bottom hat (sichtbar bei Tabellen, die nicht is="sortable-table" sind) und border eine doppelt so dicke Linie ergäbe.

LLAP 🖖

PS: Der Text sieht ja fürchterlich aus mit den ganzen Kästen. Ich hab da noch so’n <I> …

[JürgenB]

Hallo Gunnar,

mein Ziel ist, dass das Script das Aussehen der Tabelle nicht verändert. Wenn ich jetzt die Tabellenlinien nachzeichnen muss, muss ja auch noch deren Farbe und Stil ermitteln. Wobei der FF die Linien schluckt, der Safari nicht.

PS: Der Text sieht ja fürchterlich aus mit den ganzen Kästen. Ich hab da noch so’n <I> …

???

Gruß
Jürgen

[JürgenB]

Hallo,

…Wobei der FF die Linien schluckt, der Safari nicht.

gerade noch mal den Windowsrechner angeworfen:

FF und Edge: keine Linien im thead. IE: keine Linien und falsche Positionierung der Buttons.
Chrome: alles OK.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

mein Ziel ist, dass das Script das Aussehen der Tabelle nicht verändert.

Da war gerade nicht mein Ziel. Warum sollten sortierbare Tabellen denn genauso aussehen wie nicht-sortierbare?

Ich wollte, dass die visuell unterschieden werden können und dass bei sortierbaren die Tabellenköpfe wie Buttons aussehen.

LLAP 🖖

[JürgenB]

Hallo,

dritte Version:

wegen der Nebenwirkungen habe ich Gunnars Idee, den Button über den TH-Inhalt zu legen, verworfen. Ich verstecke den ursprünglichen Spaltentitel jetzt visuell und legen dann den Button ins TH.

Wenn die Initialisierung des Sortierers gelaufen ist, bekommt die Tabelle noch eine Klasse, mit der dann außerhalb des Scripts auf die Sortierbarkeit hingewiesen kann. Im Beispiel gebe ich den Spaltentiteln einen hellgrauen Hintergrund.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

ich bin gerade dabei, den Tabellensortierer im Wiki zu überarbeiten …

• Mega-Euro? Ernsthaft? Nie gehört, das. Megawatt wäre wohl ein sinnvolleres Beispiel.

• Es gibt Vorsätze jenseits von Femto und Giga. Terabyte ist geläufig. (Nicht zu verwechseln mit Tebibyte.)

• Zwischendrin fehlt Deka, Beispiel Dekagramm. Im östlichen Mitteleuropa und Osteuropa sehr verbreitet; dort kauft man nicht 200 Gramm, sondern 20 Deka.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

auf der Suche nach einer Beispieltabelle bin ich in einer Anfängervorlesung gelandet, daher kommt die Tabelle. Sie beschränkt sich auf die „gängigen“ Vorsätze.

• Mega-Euro? Ernsthaft? Nie gehört, das. Megawatt wäre wohl ein sinnvolleres Beispiel.

bei großen Projekten rechnen wir in M€ 😎

• Es gibt Vorsätze jenseits von Femto und Giga. Terabyte ist geläufig. (Nicht zu verwechseln mit Tebibyte.)

• Zwischendrin fehlt Deka, Beispiel Dekagramm. Im östlichen Mitteleuropa und Osteuropa sehr verbreitet; dort kauft man nicht 200 Gramm, sondern 20 Deka.

Danke für den Link. Ich werde die Tabelle im Beispliel mal erweitern.

Gruß
Jürgen

[JürgenB]

Hallo,

bei Zugriff auf die Zellen einer Tabelle, kann man auf tbody, tr und td mit der DOM-Methode querySelector(All) zugreifen, oder mit den Tabellenobjekten tBodies, rows und cells.

Was würdert ihr nehmen? Wenn man im Netz sucht, findet man in Beispielen öfter die DOM-Methoden als die Tabellen-Methoden. Gerade zu cells habe ich fast nichts gefunden. Ist das überhaupt Standard? MDN erwähnt cells nicht.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Gerade zu cells habe ich fast nichts gefunden. Ist das überhaupt Standard? MDN erwähnt cells nicht.

Nicht? cells ist keine Eigenschaft von HTMLTableElement, sondern von HTMLTableRowElement.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

danke, auch für deine anderen Tipps uns Anmerkungen. Ich muss wohl noch an meiner Suchstrategie arbeiten.

Gruß
Jürgen

[Auge]

Hallo

Ich bin gerade dabei, den Tabellensortierer im Wiki zu überarbeiten.

Wird auch der Sortierer, wie er auf deiner Website dargeboten wird, überarbeitet? Die in diesem Thread verlinkten Beispiele funktioneren zwar, aber die Steuerung der sortierbaren Spalten über die Klassen .sortierbar und .vorsortiert+ bzw. .vorsortiert- funktioniert mit der in diesem deinen Posting verlinkten Version 3 leider nicht.

Tschö, Auge

[JürgenB]

Hallo Auge,

Wird auch der Sortierer, wie er auf deiner Website dargeboten wird, überarbeitet? Die in diesem Thread verlinkten Beispiele funktioneren zwar, aber die Steuerung der sortierbaren Spalten über die Klassen .sortierbar und .vorsortiert+ bzw. .vorsortiert- funktioniert mit der in diesem deinen Posting verlinkten Version 3 leider nicht.

ja, ich bin da dran, aber wegen des größeren Funktionsumfangs kann ich die Änderungen von der Wiki-Version nicht direkt übernehmen. Leider haben sich die Versionen etwas auseinander entwickelt.

In einem ersten Schritt habe ich schon mal die Symbole im thead geändert:

http://test.berkemeier.eu/TableSort_Beispiel.html

Gruß
Jürgen

[Auge]

Hallo

Wird auch der Sortierer, wie er auf deiner Website dargeboten wird, überarbeitet?

ja, ich bin da dran, aber wegen des größeren Funktionsumfangs kann ich die Änderungen von der Wiki-Version nicht direkt übernehmen. Leider haben sich die Versionen etwas auseinander entwickelt.

In einem ersten Schritt habe ich schon mal die Symbole im thead geändert:

http://test.berkemeier.eu/TableSort_Beispiel.html

Danke für deine Mühen und den Wasserstandsbericht. 😀

Tschö, Auge

[JürgenB]

Hallo Auge,

Wird auch der Sortierer, wie er auf deiner Website dargeboten wird, überarbeitet?

ja, ich bin da dran, aber wegen des größeren Funktionsumfangs kann ich die Änderungen von der Wiki-Version nicht direkt übernehmen. Leider haben sich die Versionen etwas auseinander entwickelt.

In einem ersten Schritt habe ich schon mal die Symbole im thead geändert:

http://test.berkemeier.eu/TableSort_Beispiel.html

Danke für deine Mühen und den Wasserstandsbericht. 😀

nachdem ich mich entschlosen hatte, nicht meinen alten Sortierer barrierefrei zu machen, sondern bei der Wiki-Version die fehlenden Funktionen nachzurüsten, war es doch recht einfach.

Wenn du den Sortierer schon verwendest, magst du dann mal die neue Version (10.0) (z.Zt. noch nur im Testbereich) bei dir testen?

Gruß
Jürgen

[Auge]

Hallo

Wird auch der Sortierer, wie er auf deiner Website dargeboten wird, überarbeitet?

nachdem ich mich entschlosen hatte, nicht meinen alten Sortierer barrierefrei zu machen, sondern bei der Wiki-Version die fehlenden Funktionen nachzurüsten, war es doch recht einfach.

Wenn du den Sortierer schon verwendest, magst du dann mal die neue Version (10.0) (z.Zt. noch nur im Testbereich) bei dir testen?

Bin schon dabei. Bis jetzt ist mir nichts Auffälliges begegnet.

Tschö, Auge

[JürgenB]

Hallo,

vielen Dank. Ich habe die neue Version jetzt auf meiner Seite veröffentlicht.

Danke auch an Gunnar und an Felix für die Unterstützung.

Gruß
Jürgen