空白文字を用いてレイアウトをしていない
概要
この基準では、スペースやタブ、改行などの空白文字を使ってページのレイアウト（要素の配置や間隔調整）を行なっていないことを確認してください。レイアウトを制御するときはCSSを利用してください。
メリット
- 視覚障害のあるユーザー: スクリーンリーダーは空白文字に基づくレイアウトを正しく解釈できません。CSSを使ったレイアウトは情報を適切に伝える助けとなります。
- すべてのユーザー: 空白文字を使わず、CSSでレイアウトすることで、さまざまなデバイスや画面サイズに対応できます。
悪い例
- テキストの配置にスペースを使用:
- 例: テキストを右寄せにするために、行の前に多数のスペースを挿入する。
- 項目の間隔に改行を使用:
- 例: リストの各項目の間に複数の改行を挿入して間隔を空ける。
達成方法
- CSSを用いたレイアウトの実装:
margin,padding,text-align,line-heightなどのCSSプロパティを使用して、要素の配置や間隔、位置を制御します。
- 適切なHTMLマークアップの使用:
<br>要素を行間隔の調整に使わないなど、HTML要素を意味に沿って使用し、レイアウトはCSSで制御します。
テスト方法
- コードのレビュー:
- HTMLとCSSのコードを確認し、空白文字を使用せず、CSSでレイアウトが制御されているかをチェックします。