視覚障害者が用いるスクリーンリーダは、画面内の配置を利用者に伝えることができません。スクリーンリーダは、ほぼHTMLの記述順にテキスト等を読み上げます。こういった利用者に配慮するため、順序に意味のあるコンテンツについては、注意が必要です。
CSSのpositionやfloatプロパティによる表示位置の制御の際、それが意味に影響を与えるかどうかをよく吟味してください。
「博物館」を「博 物 館」と記述してしまうようなこと（いわゆる「単語の泣き別れ」）や、改行や空文字を駆使したレイアウトをして、意味の理解を妨げないようにしてください。改行で行の終端をそろえたり、空文字で行等をそろえていると、スクリーンリーダで情報を取得しづらくなるだけでなく、文字サイズ変更時などにも、たいへん読みづらくなります。また、検索エンジン対策上もけっしてプラスには働きません。
他方、スペースを用いて整形するのが自然な場合もあります。エラーチェックに引っかかることがありますが、法人格と法人名を「株式会社 みやこ酒店」というような表記を禁止する必要はないでしょう。
マークアップエンジニアがHTMLの可読性維持のために、altなどの属性値中で、改行による整形をする場合、一部のスクリーンリーダで改行ごとに意図しない読み上げを行う事例もあることを覚えておくと良いでしょう。
表組みの場合は線形情報にして意味が通るようにすることが望ましいです。表組みを線形情報にするのは、技術者でなければ難しいかもしれません。原則は「左上から右下に向かって読んでいく」と考えてください。また、じっさいのスクリーンリーダで確認するのも有効です。
| 原則 | 知覚可能 | 情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。 |
|---|---|---|
| ガイドライン | 適応可能 | 情報、及び構造を損なうことなく、様々な方法 (例えば、よりシンプルなレイアウト) で提供できるようにコンテンツを制作すること。 |
| 達成基準 | 意味のある順序 (1.3.2 A) |
コンテンツが提示されている順序が意味に影響を及ぼす場合には、正しく読む順序はプログラムによる解釈が可能である。 |