Grid, Content Re-ordering Und Barrierefreiheit

Nehmen Sie das

<ol>
  <li>Get hungry</li>
  <li>Order pizza</li>
  <li>Eat pizza</li>
</ol>

Das HTML landet auf diese Weise im DOM (und damit, wie es für assistierende Technologien zugänglich ist), und standardmäßig werden diese Listenelemente auch *visuell* in dieser Reihenfolge angezeigt. In den meisten Layout-Situationen stimmt die visuelle Reihenfolge mit der DOM-Reihenfolge überein. Tun Sie nichts, und die Listenelemente fließen in der Blockrichtung des Dokuments. Wenden Sie Flexbox an, und sie fließen in der Inline-Richtung des Dokuments.

Aber Flexbox und Grid erlauben Ihnen auch, das Durcheinander zu machen. Nehmen Sie nun das hier

ol { 
  display: flex;
  flex-direction: row-reverse;
}

In diesem Fall ergibt die DOM-Reihenfolge immer noch Sinn, aber die visuelle Reihenfolge ist völlig falsch. Es ist nicht nur row-reverse. Es gibt eine Reihe von Flexbox- und Grid-Eigenschaften, die ins Spiel kommen und die Dinge verkomplizieren können: die order-Eigenschaft, das Fließen von Elementen in Spalten statt in Zeilen und die spezifische Positionierung von Elementen in ungewöhnlichen Reihenfolgen, unter anderem. Selbst absolute Positionierung könnte das gleiche Problem verursachen.

Manuel Matuzovic sagt

Wenn die visuelle Reihenfolge und die DOM-Reihenfolge nicht übereinstimmen, kann das Benutzer bis zu einem Punkt irritieren und verwirren, an dem die Erfahrung so schlecht ist, dass die Website unbrauchbar wird.

Rachel Andrew beleuchtet dieses Problem (einschließlich der Dinge, die wir veröffentlicht haben) als ein großes Problem und hofft, dass wir CSS-Tools bekommen, die helfen.

Ich denke, das ist etwas, das wir dringend auf CSS-Ebene angehen müssen. Wir müssen eine Möglichkeit bieten, die Tabulator- und Lesereihenfolge der visuellen Reihenfolge folgen zu lassen. Die Quellreihenfolge ist eine gute Standardeinstellung, wenn Sie den normalen Fluss nutzen, oft ist die Verfolgung der Quelle genau das, was Sie wollen. Aber nicht immer, nicht bei jedem Breakpoint. Wenn wir den Leuten keine Lösung dafür geben, werden wir mit einem Chaos enden. Wir haben den Leuten diese großartigen Werkzeuge gegeben, und jetzt fühle ich mich, als würde ich den Leuten sagen, sie sollen sie nicht benutzen.

Direkter Link →