ドキュメント内のコンテンツの順序は、サイトのアクセシビリティにとって重要です。スクリーン リーダーは、ユーザーが選択した HTML 要素を使用して、ドキュメントの順序に基づいてコンテンツを読み上げます。タッチスクリーンやマウスではなく、キーボードを使用してサイト内を移動するユーザーは、タブでドキュメント内を移動します。 つまり、アクティブな要素からアクティブな要素にジャンプし、リンクとフォーム フィールドの間を、ドキュメント内に存在する順にタブで移動します。
したがって、アクセスしやすいサイトを作成するには、適切に構造化されたドキュメントから開始し、適切な HTML 要素をすべて使用することが重要です。ただし、CSS の使用を開始する際に、そのような優れた処理の一部を元に戻すことは可能です。その理由を見ていきましょう。
参照元と表示順序
ウェブサイトのナビゲーションは多くの場合、リンクのリストとしてマークアップされます。その後、Flexbox を使用して、これらを水平バーに変えることができます。以下の Glitch の例では、このよく使用されるパターンを作成しました。例をクリックし、リンクの間を Tab キーで移動します。 フォーカスは論理方向に左から右に移動し、英語の順序で移動します。
この種のパターンを作成し、ソースの 2 番目にある「Contact Us」を末尾に移動するよう求められた場合は、この場合、Flexbox で動作する order プロパティを使用できます。
以下の例では、タブで項目間を移動してみてください。order プロパティを使用して項目を再配置しています。
フォーカスが最後のアイテムにジャンプした後、再び戻ります。タブオーダーでは、アイテムは 2 番目のアイテムになります。 しかし、視覚的には最後のアイテムです。
上記の例は、CSS を使用してコンテンツの並べ替えや並べ替えを行う際に直面する問題を示しています。 この問題に対処する場合は、CSS を使用するのではなく、ソースで順序を変更するのが適切です。
並べ替えが発生する可能性がある CSS プロパティは次のうちどれですか。
この問題は、要素を移動できるすべてのレイアウト メソッドで発生する可能性があります。コンテンツの並べ替えに関する問題の一般的な原因となる CSS プロパティは次のとおりです。
position: absoluteを使用し、視覚的にアイテムをフローから外す。- Flexbox とグリッド レイアウトの
orderプロパティ。 - Flexbox での
flex-directionのrow-reverseとcolumn-reverseの値。 - グリッド レイアウトの
grid-auto-flowのdense値。 - 行の名前または番号による、またはグリッド レイアウトの
grid-template-areasを使用した任意の配置。
次の例では、CSS グリッドを使用してレイアウトを作成し、ソース内の場所を考慮せずに、行番号を使用してアイテムを配置しています。
この例の周りを Tab キーで移動して、フォーカスがどのように移動するかを確認してください。 特にページが大きい場合は、混乱を招く可能性があります。
問題のテスト
非常に簡単なテストは、キーボードでページを移動することです。何でも移動できますか？ 何かおかしな動きはありましたか？
コンテンツの並べ替えを視覚的にデモンストレーションするには、Chrome の Accessibility Insights 拡張機能のタブ停止チェッカーをお試しください。下の画像は、このツールの CSS グリッドの例を示しています。レイアウト内でフォーカスが移動する必要があることがわかります。
コンテンツの並べ替えとレスポンシブ ウェブ デザイン
コンテンツのプレゼンテーションが 1 つしかない場合、ソースを論理的な順序で配置し、それをレイアウトに反映させることは、通常は難しくありません。ブレークポイントを変えると、レイアウトが難しくなることがあります。小さな画面などでは、要素をレイアウトの下部に移動すると合理的です。
現時点では、この問題に適した解決策はありません。ほとんどの場合、「モバイル ファースト」で開発することで、ソースとレイアウトを整理できます。 モバイルでの優先度について決めた内容は、コンテンツ全般にとって確固たるものであることがよくあります。重要なのは、このようなコンテンツの順序変更の可能性があることに注意し、各ブレークポイントで最終的なエクスペリエンスがあまり不快でないかテストすることです。