【CSS】CSSで読み上げ順をコントロールする方法 - Qiita

はじめに みなさんは、視覚的な要素の順序とDOMの順序が一致するように、GridやFlexで、アイテムの順序を制御するプロパティは使わないようにしていたとおもいます。 しかし、Chrome 137以降では、reading-flowとreading-orderというプロパティが使えるようになり、DOMの読み上げ順やフォーカス順がコントロールできるようになりました。 そのため、この記事ではreading-flowとreading-orderについて紹介します。 reading-flow とは reading-flowは、reading-flowを指定したコンテナ内の要素の読み上げ順やキーボードフォーカスの順序を制御するためのプロパティです。 指定できる値は以下の通りです。 normal DOMの順序通り（デフォルト） flex-visual writing-mode に従い、見た目上の順序に従