DOMを論理順にする
最も基本的な解決です。CSSがなくても意味が通る順番でHTMLを書きます。
WEB ACCESSIBILITY · READING FLOW
Reading Order Inspector
見えている順番と、読まれる順番を重ねて見る。 DOMと新しいCSS、2つの直し方を比べる。
LIVE ORDER COMPARISON
同じ見た目、違う読み順
FLEX ORDERMISMATCH
TWO WAYS TO FIX
DOMを基本に、必要な場面だけCSSで補う
reading-flow
Flex・Grid・Blockコンテナで、読み上げと順次フォーカスの流れを指定します。
reading-order
Reading Flow Container内の特定要素を、整数値で個別に前後させます。