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

Wir würden uns über Ihr Feedback zu einem Lösungsvorschlag für das Problem der Layoutmethoden freuen, bei dem Elemente so angeordnet werden, dass sie nicht mit der Quelle des Dokuments verbunden sind.

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 Präsentation 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, lassen sich jedoch Layouts erstellen, die eine visuelle Lesereihenfolge definieren, 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 Unterbrechung auch verursachen, indem sie Elemente in einer anderen Reihenfolge als in der Quelle im Raster platzieren.

Klicken Sie auf das Beispiel und wechseln Sie mit der Tabulatortaste, um zu sehen, wie die Tab-Reihenfolge durch die Raster-Placement-Eigenschaften 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.

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

In Situationen, in denen eine zufällige Layoutreihenfolge erstellt wird, z. B. bei Verwendung der dichten Packung im Rasterlayout, möchten Sie wahrscheinlich, dass der Browser dem Layout und nicht der Quellreihenfolge folgt. Dazu müssen die Flex- oder Grid-Elemente die Eigenschaft reading-order mit dem Wert auto haben.

Das folgende CSS führt dazu, dass die Lesereihenfolge der Platzierung von Artikeln folgt, die aufgrund von grid-auto-flow: dense dicht verpackt wurden.

.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 folgen

Bei einigen Raster- und flexiblen Layouts ist die Layoutreihenfolge einfach zu verstehen. 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. In anderen Layouts ist die ideale Layoutreihenfolge weniger klar. Es kann mehr als eine 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 flexibles 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 Reihenfolge der Quellen spielt dennoch eine Rolle. Diese Funktion sollte nur in bestimmten Situationen verwendet werden, in denen die Lesereihenfolge von der Quelle abweichen kann. Dies ist beispielsweise bei Verwendung von Layoutmethoden der Fall, die zu Verbindungsabbrüchen führen können, z. B. bei einer dichten Rasterpackung oder wenn an einem bestimmten Haltepunkt 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 werden die gesamte Unterhaltung, die zu dem heutigen Stand geführt hat, vielleicht interessant finden, da sie ein gutes Beispiel dafür ist, wie Vorschläge in der CSS-Arbeitsgruppe bearbeitet werden, um in Browsern implementiert zu werden.

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