Aufheben der Verknüpfung des CSS-Layouts und der Quellenreihenfolge

Wir benötigen Ihr Feedback zu einer vorgeschlagenen Lösung für das Problem der Layoutmethoden, bei denen Elemente in einer Reihenfolge angeordnet werden, die von der Quelle des Dokuments getrennt ist.

Rachel Andrew

Die CSS-Arbeitsgruppe arbeitet an einer Lösung für den Fall, dass Elemente mithilfe einer Layoutmethode in einer Reihenfolge angeordnet werden können, die von der Quelle getrennt ist und daher nicht in der Lese- und Fokusreihenfolge des Dokuments liegt. In diesem Artikel werden das Problem und der Lösungsvorschlag erläutert. Wir freuen uns auf Ihr Feedback.

Das Problem

Die Lesereihenfolge eines HTML-Dokuments entspricht der Reihenfolge der Quelle. Das bedeutet, dass ein Screenreader das Dokument so liest, wie es in der Quelle angeordnet ist, und eine Person, die die Tastatur verwendet, um mit der Tabulatortaste durch das Dokument zu navigieren, folgt ebenfalls dieser Reihenfolge der Quelle. Normalerweise ergibt dies Sinn und eine sinnvolle Quellreihenfolge für das Dokument ist von entscheidender Bedeutung für Präsentationen im Lesemodus von Inhalten, Screenreadern und Geräten mit begrenztem CSS. CSS und insbesondere Flexbox und Raster können jedoch Layouts erstellen, bei denen das Layout eine visuelle Lesereihenfolge definiert, die von der zugrunde liegenden Quelle abweicht.

Wenn Sie beispielsweise die Eigenschaft order für flexible Elemente verwenden, ändert sich die Layoutreihenfolge, jedoch nicht die Reihenfolge in der Quelle.

Klicken Sie auf das Beispiel und wechseln Sie mit der Tabulatortaste, um zu sehen, wie die TAB-Reihenfolge von der Layoutreihenfolge getrennt wird. Verwenden Sie dazu die Eigenschaft „order“.

Wenn Sie das Rasterlayout verwenden, kann die ausgewählte Layoutmethode die TAB-Reihenfolge durcheinanderbringen, z. B. wenn Sie grid-auto-flow: dense verwenden, wodurch eine zufällige Layoutreihenfolge der Elemente erstellt wird.

Klicken Sie auf das Beispiel und wechseln Sie mit der Tabulatortaste, um zu sehen, wie die TAB-Reihenfolge von der Layoutreihenfolge getrennt ist. Dieses Mal werden die Elemente in eine andere Reihenfolge gebracht.

Ein Entwickler kann diese Verbindung auch verursachen, indem er Elemente im Raster in einer anderen Reihenfolge platziert als in der Quelle vorgegeben.

Klicken Sie auf das Beispiel und die Tabulatortaste, um zu sehen, wie die TAB-Reihenfolge von der Layoutreihenfolge getrennt wird, indem Sie die Eigenschaften der Rasterplatzierung verwenden.

Vorgeschlagene Lösung

Die Arbeitsgruppe des Preisvergleichsportals schlägt eine Lösung für dieses Problem vor. Wir würden uns über Feedback von Entwicklern und der Community für Barrierefreiheit im Internet freuen.

Ich werde mit reading-order: auto zufällig ausgewählten Layouts folgen

In Situationen, in denen eine zufällige Layoutreihenfolge erstellt wird, z. B. bei Verwendung von dichten Packungen im Rasterlayout, sollte der Browser dem Layout und nicht der Quellreihenfolge folgen. Dies kann passieren, wenn die Flex- oder Rasterelemente das Attribut reading-order mit dem Wert auto haben.

Das folgende CSS würde bewirken, dass die Lesereihenfolge der Platzierung von Artikeln folgt, die aufgrund von grid-auto-flow: dense dicht gepackt wurden.

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

Nicht zufälligen Layouts mit reading-order-items folgen

In einigen Raster- und Flex-Layouts ist die Layoutreihenfolge einfach zu verstehen. Beispielsweise gibt es in einem flexiblen Layout, bei dem das Attribut order zum Neuanordnen von Elementen verwendet wird, eine offensichtliche Layoutreihenfolge, die durch das Attribut order vorgegeben wird. Bei anderen Layouts ist die ideale Layoutreihenfolge weniger klar, es gibt möglicherweise mehr als eine Auswahl. Wenn Sie nicht randomisierte Layouts verwenden, müssen Sie dem Container daher die Eigenschaft grid-order-items hinzufügen. Geben Sie dabei Keyword-Werte an, die Ihre Absicht für die Layoutreihenfolge erläutern.

Das folgende Beispiel zeigt ein flexibles Layout mit row-reverse. Die Flex-Elemente haben reading-order: auto und den Flex-Container reading-order-items: flex flow, um anzugeben, dass auch die Lesereihenfolge der flex-flow-Richtung folgen soll, anstatt einer visuellen Reihenfolge (die wir mit flex visual angeben könnten).

.cards {
  display: flex;
  flex-flow: row-reverse;
  reading-order-items: flex flow;
}

.cards li {
  reading-order: auto;
}

In diesem nächsten Beispiel wird mit grid-template-areas ein Rasterlayout erstellt und die Elemente werden in einer anderen Layoutreihenfolge als die Quellreihenfolge platziert. Mit der Eigenschaft reading-order-items wird angegeben, dass die Layoutreihenfolge eingehalten werden soll, also jede Zeile durchlaufen soll, bevor zur nächsten gewechselt wird. (grid column würde die entgegengesetzte Richtung anzeigen.)

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a b b b b"
    "c c d d e e"
    "f f g g h h";
  reading-order-items: grid rows;
}

.a {
  grid-area: a;
  reading-order: auto;
}

Spielt die Reihenfolge der Quellen keine Rolle?

Nein, die Reihenfolge der Quellen ist weiterhin wichtig. Diese Funktion sollte nur in bestimmten Situationen verwendet werden, in denen die Lesereihenfolge von der Quelle abweichen kann. Dies ist beispielsweise der Fall, wenn Layoutmethoden, wie z. B. zu viele Raster, oder eine andere Layoutreihenfolge an einem bestimmten Haltepunkt sinnvoll sind.

Wenn Sie diese Eigenschaften verwenden, erstellen Sie ein Quelldokument mit einer Reihenfolge, die sinnvoll wäre, wenn die Seite ohne CSS gerendert würde. Fügen Sie diese Eigenschaften nur an den Stellen und an den Haltepunkten hinzu, für die sie erforderlich sind.

Sollten diese Eigenschaften von Authoring-Tools angewendet werden?

Authoring-Tools, die es Nutzern ermöglichen, durch Ziehen und Ablegen von Elementen ein Rasterlayout zu erstellen, sollten dennoch dazu beitragen, ein sinnvolles Quelldokument zu erstellen. Daher ist es in den meisten Fällen besser geeignet, die Quelle basierend auf der Layoutreihenfolge neu anzuordnen, anstatt diese Eigenschaften zu verwenden, um Unterbrechungen zu vermeiden.

Bitte teilen Sie uns Ihr Feedback zu diesem Vorschlag mit.

Wir freuen uns sehr über Feedback zu diesem Thema. Wenn Sie einen Anwendungsfall haben, der Ihrer Meinung nach dadurch nicht gelöst werden kann, oder wenn Sie Bedenken hinsichtlich der Barrierefreiheit im Hinblick auf diesen Ansatz haben, informieren Sie bitte die Arbeitsgruppe für Preisvergleichsportale.

Es gibt einen laufenden Thread, der viele Anwendungsfälle und Überlegungen zum Ansatz enthält. Dieser Thread ist ein guter Ort, um Kommentare zu hinterlassen und potenzielle Probleme mit diesem Vorschlag hervorzuheben. Der aktuelle Vorschlag unterscheidet sich stark von meinem ursprünglichen Vorschlag, mit dem der Thread begonnen hat. Interessierte Menschen könnten die Gespräche, die zu unserem heutigen Stand geführt haben, interessant finden. Es ist ein gutes Beispiel dafür, wie Vorschläge in der Arbeitsgruppe des Preisvergleichsportals umgesetzt werden, um etwas zu machen, das in Browsern implementiert werden kann.

Miniaturansicht von Patrick Tomasso. Vielen Dank an Chris Harrelson, Tab Atkins und Ian Kilpatrick für Feedback und Rezensionen.