CSS - reading-order

概要

属性名	reading-order
値	<integer>
初期値	0
適用可能要素	ブロック、フレックスまたはグリッドの子要素
継承	継承しない
サポート	https://caniuse.com/mdn-css_properties_reading-order

説明

reading-flow: source-order と reading-order を組み合わせることで、子要素のDOM上の要素の出現順序や表示順序に関わらず、読み上げブラウザによる読み込み順序や、TABキーによる移動順序を制御することができます。2025年の Chrome 137 からサポートされました。

使用例

TABキーで移動したり、読み上げブラウザで読み上げると、DOM上の順序や表示順序に関係なく、reading-order で指定した #3 → #2 → #4 → #1 の順となります。

CSS

.my-reading-order {
  reading-flow: source-order;
  #i1 { reading-order: 4; }
  #i2 { reading-order: 2; }
  #i3 { reading-order: 1; }
  #i4 { reading-order: 3; }
}

HTML

表示

リンク

初版：2025年5月25日、最終更新：2025年5月25日

https://www.tohoho-web.com/css/prop/reading-order.htm

CSS - reading-order

概要

説明

使用例

関連項目

リンク