CSSのorderで読み順も変わる？見た目とキーボードの順序を確認しよう

CSSのorderでカードの順番を変えると、HTMLの並びまで入れ替わるのかな。見た目と、キーボードでたどる順序を分けて確かめよう。

orderが変えるのは表示上の順番

.row { display: flex; }
.first { order: 2; }
.second { order: 1; }

FlexboxやGridのアイテムに対するorderは、表示上の順番を調整する。HTMLのDOM上の並びや、通常のTabキーの移動順そのものを書き換えるものではないよ。

MDNのorderも、見た目と論理的な順序がずれる問題を説明している。

作例で表示とTabを比べる

下の作例には、HTMLではA、B、Cの順でボタンを置いている。「Cを先頭に表示」を選ぶと、見た目はC、A、Bになる。各ボタンを押すと、その名前を表示するだけで、外部への送信や画面遷移はないよ。

1. 初期状態のA、B、Cを見る。
2. Cを先頭へ表示する設定へ切り替える。
3. 「移動開始」を押してからTabで進み、フォーカスの枠と順序を見る。
4. リセットで見た目も元のA、B、Cへ戻す。

移動開始の後は、見た目がC、A、Bでも、作例内の通常のキーボード移動はA、B、Cの順になる。編集部ではこの順序をブラウザで確認した。すべての支援技術の読み上げを実測したという意味ではないよ。

意味のある順番はHTMLで整える

手順、日時、優先度など、情報の意味として順番がある場合は、HTML側でも自然に読める並びにしよう。見た目を直すためにtabindexの正の値をあちこちへ足すと、別の移動順の問題を生むことがある。

画面幅によって順番を変えるデザインでも、クリックだけでなく、キーボードでたどる操作も確認したいね。順序付きリストの基礎と合わせて、見た目と意味の順序を分けて考えてみよう。