見た目と食い違う読み上げ順序

このように書かれるのは、フロートのためです。フロートは、それより前に書かれた内容より上には置けません。名前がどんな長さでも金額を行の1行目にそろえるため、金額を先に書く習慣があります。Bootstrap 3の公式ドキュメントもリストのバッジをこの形で書いており、当時のテーマにはいまも残っています。見た目は正しくても、スクリーンリーダーは各金額を名前より先に、前の行のすぐ後で読みます。行をflexboxと flex-direction: row-reverse で書き直しても、見た目と一緒に誤った順序がそのまま残ります。

マークアップで各名前が金額より先に来て、flexboxが金額を動かさずに行の右端へ寄せるため、注文内容は「キャンバストート $28」と読まれ、見た目は変わりません。説明リスト（dl で、名前を dt、金額を dd にする）や表でも構いません。配送方法は1行に一つの方法を書いた表になり、行ごとに読まれます。スクリーンリーダーの表の操作でも、価格がどの配送方法のものか分かります。

どちらも基準を満たします。おすすめは、読む順にソースを書く方法です。順序そのものを直すため、スクリーンリーダー、読み上げ機能、リーダー表示、スタイルを外したページのどれにも画面と同じ順序が届き、合わせて保守するものも増えません。注文内容のテンプレートでフロートをflexboxに置き換え、配送方法の枠を表に書き換える必要があります。隠したテキストはマークアップをそのまま使えるため、テーマや外部のウィジェットを変えられない場合に役立ちます。ただし、スクリーンリーダーの利用者には名前が繰り返され、マークアップに従うほかの人には崩れた順序が残ります。

float: right は、内容をマークアップ上の位置から離れた場所に描く方法の一つにすぎません。次の指定も同じ結果になるため、値が名前やラベルに属している箇所では検索してください。

• 横のテキストより前に書いた要素への float: right（または inline-end）：このガイドの例です。
• flex-direction: row-reverse と column-reverse、order：行や列を反転させたり並べ替えたりします。フロートをflexboxに移すと、よくこの形になります。
• grid-template-areas、grid-row、grid-column によるグリッドの配置：どの子要素もどこにでも置けます。
• 絶対位置指定：バッジや価格を流れから外し、枠の角などへ移します。

レイアウトが並べ替わるのは、ある幅だけのこともよくあります。スマートフォンで行を column-reverse の縦並びにし、金額を名前の上に出す場合は、その幅だけが誤りになります。ブレークポイントごとに確認してください。

違いがすべて問題になるわけではありません。フロートした写真は段落の前でも後でも構いませんし、独立した二つのカードはどちらの順でも、サイドバーは本文の前でも後でも読めます。問題になるのは、意味が変わる違いです。項目より先の金額、前提となる手順より先の手順、値の後のラベルがそうです。新しいCSSの reading-flow プロパティを使うと、一部のブラウザーはflexやgridのコンテナーを描画の順に読み、Tabで移動します。ただし、フロートには効かず、すべてのブラウザーが対応しているわけでもないため、ソースを直してください。

列を並べる古い方法でも、同じ問題が起きます。直線化するとセルの順序が崩れるレイアウト用の表も、スペース、タブ、改行でそろえた列のテキストも、同じように失敗し、ひと続きの崩れた文として読まれます。本当の行と列は表にし、それ以外の配置はCSSに任せてください。

並べ替えた項目がリンクやボタンのようにフォーカスを受け取る場合、同じ食い違いがTabキーの移動もレイアウトと逆向きにします。その面はページ内を飛び回るフォーカス順序で扱っています。