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

Wir möchten Ihr Feedback zu einer vorgeschlagenen Lösung für das Problem mit Layoutmethoden erhalten, bei denen Elemente in einer Reihenfolge angeordnet werden, die nicht mit der Quelle des Dokuments übereinstimmt.

Rachel Andrew

Die CSS-Arbeitsgruppe arbeitet an einer Lösung für den Fall, dass Elemente mit einer Layoutmethode in einer Reihenfolge angeordnet werden, die nicht mit der Quelle und damit nicht mit der Lese- und Fokusreihenfolge des Dokuments übereinstimmt. In diesem Artikel wird das Problem und die vorgeschlagene Lösung erläutert. Wir würden uns über Ihr Feedback freuen.

Das Problem

Die Lesereihenfolge eines HTML-Dokuments folgt der Quellreihenfolge. Das bedeutet, dass ein Screenreader das Dokument so liest, wie es in der Quelle dargestellt ist, und dass eine Person, die mit der Tastatur durch das Dokument springt, ebenfalls dieser Quellreihenfolge folgt. Normalerweise ist das sinnvoll und eine sinnvolle Quellenreihenfolge für das Dokument ist für die Darstellung von Inhalten im Lesemodus, für Screenreader und für alle Geräte mit eingeschränktem CSS unerlässlich. Mit CSS, insbesondere mit Flexbox und Grid, können jedoch Layouts erstellt werden, bei denen das Layout eine visuelle Lesereihenfolge definiert, die sich von der zugrunde liegenden Quelle unterscheidet.

Wenn Sie beispielsweise die Property order auf Flex-Elemente anwenden, ändert sich die Layoutreihenfolge, aber nicht die Reihenfolge in der Quelle.

Klicken Sie in das Beispiel und wechseln Sie mit der Tabulatortaste zwischen den verschiedenen Tabs, um zu sehen, wie die Tabulatorreihenfolge mithilfe der Property „order“ von der Layoutreihenfolge getrennt wird.

Bei Verwendung des Rasterlayouts kann die Tabulatorreihenfolge durch die ausgewählte Layoutmethode durcheinandergebracht werden, z. B. bei Verwendung von grid-auto-flow: dense, wodurch eine zufällige Layoutreihenfolge der Elemente entsteht.

Klicken Sie in das Beispiel und wechseln Sie zwischen den Tabs, um zu sehen, wie die Tab-Reihenfolge von der Layoutreihenfolge getrennt ist. Diesmal wurden die Elemente im Raster nicht in der richtigen Reihenfolge angeordnet.

Entwickler können diese Abweichung auch verursachen, indem sie Elemente in einer anderen Reihenfolge als in der Quelle im Raster platzieren.

Klicken Sie in das Beispiel und wechseln Sie mit der Tabulatortaste zwischen den Elementen, um zu sehen, wie die Tabulatorreihenfolge durch die Verwendung von Grid-Placement-Attributen von der Layoutreihenfolge getrennt wird.

Vorgeschlagene Lösung

Die CSS-Arbeitsgruppe schlägt eine Lösung für dieses Problem vor und würde sich über Feedback von Entwicklern und der Community für Barrierefreiheit zu diesem Ansatz freuen.

Mit reading-order: auto zufällige Layouts folgen

In Situationen, in denen eine zufällige Layoutreihenfolge entsteht, z. B. bei der Verwendung einer dichten Anordnung im Rasterlayout, sollten Sie wahrscheinlich festlegen, dass der Browser dem Layout folgt, anstatt der Quellreihenfolge. Dazu müssen die Flex- oder Grid-Elemente die Eigenschaft reading-order mit dem Wert auto haben.

Mit dem folgenden CSS würde die Lesereihenfolge der Platzierung der Elemente folgen, die aufgrund von grid-auto-flow: dense dicht gepackt sind.

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

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

Nicht zufällige Layouts mit reading-order-items

Bei einigen Raster- und Flex-Layouts ist die Layoutreihenfolge leicht verständlich. In einem Flex-Layout, in dem die order-Eigenschaft zum Neuanordnen von Elementen verwendet wird, gibt es beispielsweise eine offensichtliche Layoutreihenfolge, die von der order-Eigenschaft vorgegeben wird. Bei anderen Layouts ist es weniger klar, was die ideale Layoutreihenfolge ist. Es kann mehr als eine mögliche Auswahl geben. Wenn Sie also nicht zufällige Layouts verwenden, müssen Sie dem Container die Property „grid-order-items“ mit Keyword-Werten hinzufügen, die Ihre Absicht für die Layoutreihenfolge erläutern.

Das folgende Beispiel zeigt ein Flex-Layout mit row-reverse. Die Flex-Elemente haben reading-order: auto und der Flex-Container reading-order-items: flex flow, um anzugeben, dass die Lesereihenfolge der Richtung flex-flow 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;
}

Im nächsten Beispiel wird mit grid-template-areas ein Rasterlayout erstellt und die Elemente werden in einer anderen Layoutreihenfolge als in der Quellreihenfolge platziert. Mit der Property reading-order-items wird angegeben, dass die Layoutreihenfolge eingehalten werden soll, d. h., dass jede Zeile durchlaufen werden muss, bevor mit der nächsten fortgefahren wird. (grid column würde die entgegengesetzte Richtung angeben).

.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;
}

Heißt das, dass die Reihenfolge der Quellen keine Rolle spielt?

Nein, die Quellenreihenfolge spielt weiterhin eine Rolle. Diese Funktion sollte nur in bestimmten Situationen verwendet werden, in denen die Lesereihenfolge von der Quelle abweichen kann. Das kann beispielsweise bei Layoutmethoden der Fall sein, die zu dieser Unterbrechung führen können, z. B. bei einer dichten Rasteranordnung, oder wenn bei einem bestimmten Bruchpunkt eine andere Layoutreihenfolge sinnvoll ist.

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

Sollten diese Eigenschaften in Authoring-Tools angewendet werden?

Mit Authoring-Tools, mit denen Nutzer ein Rasterlayout durch Ziehen und Droppen von Elementen erstellen können, sollten Nutzer dennoch dazu angehalten werden, ein sinnvolles Quelldokument zu erstellen. Daher ist es in den meisten Fällen sinnvoller, die Quelle anhand der Layoutreihenfolge neu anzuordnen, anstatt diese Eigenschaften als einfache Lösung für die Unterbrechung zu verwenden.

Bitte geben Sie uns Feedback zu diesem Vorschlag.

Wir freuen uns über Feedback zu diesem Thema. Insbesondere, wenn Sie einen Anwendungsfall haben, der Ihrer Meinung nach nicht durch diese Änderung gelöst wird, oder Bedenken hinsichtlich der Barrierefreiheit haben, wenden Sie sich bitte an die CSS-Arbeitsgruppe.

In diesem Thread finden Sie viele Anwendungsfälle und Gedanken zum Ansatz. In diesem Thread können Sie Kommentare hinzufügen und potenzielle Probleme mit diesem Vorschlag hervorheben. Der aktuelle Vorschlag unterscheidet sich stark von meinem ursprünglichen Vorschlag, mit dem der Thread begonnen wurde. Interessierte Personen könnten sich die gesamte Unterhaltung ansehen, die zu dem heutigen Stand geführt hat. Sie ist ein gutes Beispiel dafür, wie Vorschläge in der CSS-Arbeitsgruppe bearbeitet werden, damit sie in Browsern implementiert werden können.

Miniaturansicht von Patrick Tomasso. Vielen Dank an Chris Harrelson, Tab Atkins und Ian Kilpatrick für ihr Feedback und ihre Überprüfung.