CSS Gridとアクセシビリティについて気になっていたこと

前回の記事でCSS Gridは「魔法の杖」だと書きましたけど、1つ気になっていたことがあります。 それは、HTMLソースの順番（ソースオーダー）と視覚的な順番（ビジュアルオーダー）にまつわるアクセシビリティについてです。FlexboxでもそうなんですがCSS Gridを使うとCSSで表示順を変更することができます。そうするとHTMLソースにあるコンテンツの順番とブラウザで表示される順番が異なる場合が出てくるわけですね。 「でも、それってアクセシビリティ的にはどうなんだろう？」というのが気になっていました。 マルチデバイス対応のレイアウトを考える際、CSSで表示順を変えられるのはものすごく便利で、まさにここがCSS Gridの「魔法の杖」的な要素の一つでもあるわけです。でも、技術的にできるからといって考えなしにやっていいかというと、そんなことはないですよね。 調べてみたところ、CSS Gri

[sometk]

気になっていた点を述懐。とはいえ勝手コンテンツ作ってた頃みたいに安易にテーブルでデザインするのとは訳が違うよね。

[yamadar]

良き

[s99e209]

HTMLソースでは論理的なコンテンツの順番を保ち、CSS Gridで変えるのは視覚的な順番のみにする。ブラウザは、CSS Gridで表示順を変えても音声ブラウザやナビゲーション操作には影響を与えないようになっている。

[yasu-log]

【B!】CSS Gridとアクセシビリティについて気になっていたこと - Rriver