Kein <div> und kein <p> im <summary> erlaubt - was tun?

[fietur]

(1) Pfeif auf valides HTML und möglicherweise auch auf zugängliche Bedienung, und bau deine Seite so, wie Du angefangen hast.

Ja, so hat es angefangen und ging online. Dann erst kam der Check mit dem Validator...

(2) Spiele ein bisschen mit position:absolute herum und lege dein Summary komplett über deine Card. Nachteil: Der Anwender kann nichts mehr in der Card auswählen (es sei denn, du nimmst den füllenden Effekt in der ausgeklappten Version 'raus).

Insofern stimmt der Inhalt mit einer Zusammenfassung/einem Teaser überein: Da gibt es keine Links, das Ganze ist eine kompakte Einheit.

Das könnte so aussehen

Danke für die Mühe. Tatsächlich blende ich den "Schalter" nach Aufklappen aus, weil er unnötig wird. Das ist sicher nicht generell so, aber bei mir schon; zugeklappt sind die Artikel, die als Kacheln den Bildschirm füllen, übersichtlich. Aufgeklappt werden sie meist auch gelesen/die Bilder angesehen werden. Es gibt keinen Grund, zurückzuscrollen an den Anfang, um dort den Artikel wieder einzuklappen. Es folgt mehr der Logik: Wo etwas (noch) verborgen ist, befindet sich ein gut wiedererkennbares Schaltelement (auch wenn das Bild und der teaser als solcher dienen kann). Wo nichts verborgen ist (weil aufgeklappt), braucht es auch keinen Schalter mehr.

An anderer Stelle (einer Tabelle, von der nur die ersten Einträge gezeigt werden) handhabe ich das anders: dort ändert sich das "..." nach Aufklappen in ":" - simpel und wirkungsvoll implementiert (wenn auch nicht mit details/summary). Der Nutzer sieht die zugrunde liegende Technik nicht, aber die Bedienung wirkt konsistent und wirft keine Fragen auf.

• ich nehme aber an, dass ins summary-Element noch ein visuell versteckter Informationstext hinein muss, damit das Ganze zugänglich ist. Muss man mit NVDA oder so schauen, der sagt ja für summary bereits etwas an. Die teiltransparente Hintergrundfarbe für's summary ist drin, damit man sieht, wo es ist - die ist nicht für den praktischen Einsatz

Ich habe es mir mit NVDA "angesehen"; es scheint zu funktionieren (das Summary wird als Schalter gemeldet). Um in der Hinsicht wirklich barrierefrei zu sein, müsste ohnehin ein "richtiger" Nutzer testen.

(3) Baue das Ding mit JavaScript nach. Viel Glück mit der Zugänglichkeit, das wird ein Haufen aria-Gedöns.

Bisher habe ich noch keine Notwendigkeit für JavaScript gesehen. CSS und Server-Voodoo (PHP) reichen mir vollauf.