„grafische“ Aufbereitung Stammbaum bearbeitet von Rolf B 23.10.2021 21:40 Hallo Linuchs,[in etwa so](https://jsfiddle.net/Rolf_b/g4k56jwu/)?Das ist natürlich nur ein Wireframe und keine fertige Seite mit Links.Die „durcheinander“ aussehende Reihenfolge von Bezugsperson, Eltern und Großeltern ist Absicht. Ein Screenreader wird auf diese Weise zuerst die Bezugsperson, dann den Vater, dann dessen Eltern, dann die Mutter, dann deren Eltern und dann die Kinder und jeweils deren Kinder vorlesen. Für jemanden, der die Visualisierung nicht hat und nur hört, dürfte das am Besten sein.Eventuell muss man mit aria-label noch etwas zur Verständlichkeit des Vortrags hinzufügen.Die Platzierung von Großeltern, Eltern und Bezugsperson erfolgt mit spaltenorientierter Autoplatzierung (grid-auto-flow: column;). Die Kinder sind ein Problem, denn sie sollen die Grid-Zeilen der Eltern und Großeltern ja nicht beeinflussen. Darum sind sämtliche Kinder eine einzelne Gridzelle in der 4. Spalte, und weil das alles eine Description List ist, gehört da auch ein <dt>Kinder</dt> zu - das verstecke ich aber mit font-size:0; vor dem sehenden Leser. Für den Hörenden Besucher wird nach der Auflistung der Großeltern nun erstmal "Kinder" angesagt, das hilft sicherlich als Abgrenzung.Die Kinder selbst sind wieder eine Description-List, die sich untereinander in der 4. Spalte anordnet. Damit die Box-in-Box Darstellung erfolgt und die Kinder auch sauber bei den Enkeln platziert werden, sind die dd-Elemente der Kinder zweispaltige Grids. Links das Kind, rechts die Enkel. Natürlich wieder als Description List. Statt Grid hätte man da auch mit Flexbox arbeiten können, aber ich dachte, konsistent ist besser.Auf eine farbliche Darstellung für männlich/weiblich verzichte ich und solltest auch Du verzichten. Die Klassifikation "Vater" und "Mutter" ist zwar durch die Biologie klar definiert, das hat aber nichts mit dem sozialen Geschlecht zu tun; eine Gleichsetzung wäre fatal. Es ist ja durchaus möglich, dass die Mutter eines Kindes sich als divers sieht und befremdet ist, wenn sie als weiblich dargestellt wird, während der biologische Vater transsexuell ist, sich als Frau fühlt und demnach eine Markierung als männlich zurückweist. Ich persönlich kann solche Befindlichkeiten nicht verstehen, das ist aber irrelevant. Relevant und zu respektieren ist die Auffassung der Betroffenen. _Rolf_-- sumpsi - posui - obstruxi
„grafische“ Aufbereitung Stammbaum bearbeitet von Rolf B 23.10.2021 22:00 Hallo Linuchs,[in etwa so](https://jsfiddle.net/Rolf_b/g4k56jwu/)?Das ist natürlich nur ein Wireframe und keine fertige Seite mit Links.Die „durcheinander“ aussehende Reihenfolge von Bezugsperson, Eltern und Großeltern ist Absicht. Ein Screenreader wird auf diese Weise zuerst die Bezugsperson, dann den Vater, dann dessen Eltern, dann die Mutter, dann deren Eltern und dann die Kinder und jeweils deren Kinder vorlesen. Für jemanden, der die Visualisierung nicht hat und nur hört, dürfte das am Besten sein.Eventuell muss man mit aria-label noch etwas zur Verständlichkeit des Vortrags hinzufügen.Die Platzierung von Großeltern, Eltern und Bezugsperson erfolgt mit spaltenorientierter Autoplatzierung (grid-auto-flow: column;). Die Kinder sind ein Problem, denn sie sollen die Grid-Zeilen der Eltern und Großeltern ja nicht beeinflussen. Darum sind sämtliche Kinder eine einzelne Gridzelle in der 4. Spalte, und weil das alles eine Description List ist, gehört da auch ein <dt>Kinder</dt> zu - das verstecke ich aber mit font-size:0; vor dem sehenden Leser. Für den Hörenden Besucher wird nach der Auflistung der Großeltern nun erstmal "Kinder" angesagt, das hilft sicherlich als Abgrenzung.Die Kinder selbst sind wieder eine Description-List, die sich untereinander in der 4. Spalte anordnet. Damit die Box-in-Box Darstellung erfolgt und die Kinder auch sauber bei den Enkeln platziert werden, sind die dd-Elemente der Kinder zweispaltige Grids. Links das Kind, rechts die Enkel. HNatürlich wieder als Description List. Statt Grid hätte man da auch mit Flexbox machrbeiten können…, aber ich dachte, konsistent ist besser._Rolf_-- sumpsi - posui - obstruxi
„grafische“ Aufbereitung Stammbaum bearbeitet von Rolf B 23.10.2021 21:50 Hallo Linuchs,[in etwa so](https://jsfiddle.net/Rolf_b/g4k56jwu/)?Das ist natürlich nur ein Wireframe und keine fertige Seite mit Links.Die „durcheinander“ aussehende Reihenfolge von Bezugsperson, Eltern und Großeltern ist Absicht. Ein Screenreader wird auf diese Weise zuerst die Bezugsperson, dann den Vater, dann dessen Eltern, dann die Mutter, dann deren Eltern und dann die Kinder und jeweils deren Kinder vorlesen. Für jemanden, der die Visualisierung nicht hat und nur hört, dürfte das am Besten sein.Eventuell muss man mit aria-label noch etwas zur Verständlichkeit des Vortrags hinzufügen.Die Platzierung von Großeltern, Eltern und Bezugsperson erfolgt mit spaltenorientierter Autoplatzierung (grid-auto-flow: column;). Die Kinder sind ein Problem, denn sie sollen die Grid-Zeilen der Eltern und Großeltern ja nicht beeinflussen. Darum sind sämtliche Kinder eine einzelne Gridzelle in der 4. Spalte, und weil das alles eine Description List ist, gehört da auch ein <dt>Kinder</dt> zu - das verstecke ich aber mit font-size:0; vor dem sehenden Leser. Für den Hörenden Besucher wird nach der Auflistung der Großeltern nun erstmal "Kinder" angesagt, das hilft sicherlich als Abgrenzung.Die Kinder selbst sind wieder eine Description-List, die sich untereinander in der 4. Spalte anordnet. Damit die Box-in-Box Darstellung erfolgt und die Kinder auch sauber bei den Enkeln platziert werden, sind die dd-Elemente der Kinder zweispaltige Grids. Links das Kind, rechts die Enkel. Hätte man auch mit Flexbox machen können…_Rolf_-- sumpsi - posui - obstruxi
„grafische“ Aufbereitung Stammbaum bearbeitet von Rolf B 23.10.2021 21:50 Hallo Linuchs,[in etwa so](https://jsfiddle.net/Rolf_b/g4k56jwu/)?Das ist natürlich nur ein Wireframe und keine fertige Seite mit Links._Rolf_-- sumpsi - posui - obstruxi
„grafische“ Aufbereitung Stammbaum bearbeitet von Rolf B 23.10.2021 21:41 Hallo Linuchs, [in etwa so](https://jsfiddle.net/Rolf_b/g4k56jwu/)? _Rolf_ -- sumpsi - posui - obstruxi
nicht angemeldet
