論理的なコンテンツの順番について考えてたら、CSS Gridで順番は変えない方がいいと思えてきた件

CSS GridやFlexboxを使うと簡単に視覚的なコンテンツの順番を変えられるけど、アクセシビリティについては注意が必要ですよということを「CSS Gridとアクセシビリティについて気になっていたこと」で書きました。 ざっくり言うと以下の3つに気をつける必要があるんですが、そもそも「論理的なコンテンツの順番」てなに？どうやって決めたらいいの？という疑問は未解決のままでした。 HTMLソースでは論理的なコンテンツの順番を保つ CSS GridやFlexboxを使った順番の変更は視覚的な順番のみが変わる スクリーンリーダーやタブ操作にはHTMLソースの順番が使われる ということで、今回はこの「論理的なコンテンツの順番」についてとCSS GridやFlexboxでのコンテンツの順番の変更につい書いてみます。実は、まだモヤモヤが残ったままなんですが、どこでハマっているか整理しておけば次につなが

[namikuguri]

order プロパティは視覚的な順序を変えるだけ。スクリーンリーダーを使うと HTML に書かれた順序で情報が読まれるので注意。