Das Problem kann einfach mithilfe des Flexbox Layouts in jedem Template gelöst werden. Dafür wird die semantische Reihenfolge so festgelegt, dass die wichtigen Informationen zuerst kommen, und dann wird mithilfe der flexbox-direction und order die visuelle Reihenfolge angepasst.
So sieht die ideale Reihenfolge für das Card Element aus:
Dadurch wird zuerst der Titel vorgelesen, dann der Ausschnitt, die Infos, das Bild und am Ende der CTA Button. Um das Layout wieder visuell dem eigentlichen Stil anzupassen, müssen nur 2 der Elemente geändert werden:
- Meta-Infos (in Container „Text“)
- Bild (in Container „Card Content“)
Bei beiden Elementen muss unter Erweitert die Sortierung auf „Beginn“ gesetzt werden:
Hinweis: Möglicherweise wird durch diese Unterscheidung zwischen semantischer Reihenfolge und visueller Reihenfolge die Tab-Reihenfolge bei der Tastaturnavigation zerstört. Hier sollte noch weiter recherchiert werden, was da der beste Workaround ist (vllt. tab-index von Hand setzen?) oder ob das kein Problem gibt.