本文へ移動
デジタル庁デザインシステムβ版

メニュー

レイアウト（アクセシビリティ）

    レイアウトにおけるアクセシビリティ観点での留意点について説明します。

    リキッドレイアウトを採用する

    要素の横幅が画角に合わせて可変となるレイアウトをリキッドレイアウト（可変レイアウト）といい、画角に関わらず固定幅でレイアウトするものをソリッドレイアウト（固定レイアウト）といいます。

    レスポンシブデザインで設計する各レイアウトのパターンを、リキッドレイアウトで実現することで、ユーザーは自由な環境でウェブサイトを閲覧することができるようになります。

    グリッドシステムで設計されたレイアウトの場合、カラムまたはガターのどちらかを可変幅とし、もう一方を固定幅とすることで、コンテンツの視認性や可読性を維持しながらリキッドレイアウトを実現します。

    なお、ブラウザの幅を極端に狭くして表示するか、あるいはコンテンツ特有の制約により固定の大きさで表示しなければならない画像が含まれる場合などにより、リキッドレイアウトであっても横スクロールが発生することがあります。この時、横スクロールバーを隠さないようにしてください。

    参考情報

    視覚的な要素の配置と読み上げ順序をできるだけ一致させる

    現在のブラウザでは、グリッドレイアウトをCSSのみで実現することができるようになりました。すなわち、HTMLでマークアップされた文書構造と、グリッドレイアウトによるアイテムの配置は完全に分離されることとなり、CSSの記述次第で、DOMの順番に関わりなく表示位置を変更することができます。

    しかし、グリッドレイアウトを使用して視覚的に順序を変更しても、スクリーンリーダーでのコンテンツ読み上げ順序が変更されるわけではありません。また、視覚的に並べ替えてもタブキーのフォーカス順序も変わりません。視覚的な表示と論理的な表示が一致しないコンテンツは、キーボード操作で閲覧しているユーザーによって可読性や操作性が低下する可能性があります。また、スクリーンリーダーと画面拡大ソフトウェアを併用しているロービジョンのユーザーにとっては、読み上げ順序とフォーカス順序が一致しないことでフォーカスがスキップしているように見える可能性があり、情報伝達上の混乱をもたらしかねません。

    CSSグリッドレイアウトのorderプロパティとgrid-placementプロパティは、コンテンツの論理的な並び替えではなく、視覚的な並び替えのみに使用しましょう。また、視覚的な並び替えであっても、DOMの順序から大きく外れた位置変更を行う場合は、そもそも文書構造の並び順を変更することを検討してください。

    参考情報