Accessibility
Guidelines

1.3.2 意味のある順序でコンテンツを表現する

適合レベル

A

※各レベルについては適合レベルとはをご覧ください

概要

レイアウトの再現を目的に、CSS等を用いてコンテンツの実装順序と表示順序を調整することがある。しかし、スクリーンリーダーは表示順序ではなく、実装順序に基づいてコンテンツを音声で読み上げる。そのため、この順序の変更が内容の理解を妨げる可能性がある。コンテンツの順序が意味を持つ場合は、その内容が正確に伝わるような順序で実装する。

また、文字間を広くするためにスペースを入れるなど、デザインを実現するためにコンテンツ内容を修正しない。下記文字間隔の調整にあるような実装方法で実現する。

テスト・チェック方法

  • マークアップ実装時、コードレビューによるチェック
  • スクリーンリーダーで読み上げたときに、コンテンツが自然な順序で読み上げられることを確認する

実装方法

文字間隔の調整

Web

悪い実装例

スペースを使用して単語内の文字間を実現している。

<h1>東　京</h1>

これだと、空白が開くことで1つの単語と認識されず、「東京」ではなく「ひがし　きょう」と読み上げられてしまう。翻訳ツールなどでも「東」と「京」の文字それぞれが翻訳されるなど、適切に変換されなくなる恐れがある。

良い実装例

CSSのletter-spacingを使用して文字間を実現している。

<h1>東京</h1>

<style>
h1 {
  letter-spacing: 1em;
}
</style>

Android

レイアウト作成時、XMLにてandroid:letterSpacing属性を使用することで文字間を実現している

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="東京"
  android:textSize="15sp"
  android:letterSpacing="1.1" />

iOS

NSAttributedStringKey.kernに対してvalueを設定することで文字間を実現している

let attrString = NSMutableAttributedString(string: "東京")
attrString.addAttribute(NSAttributedStringKey.kern, value: 1.1, range: NSMakeRange(0, attrString.length))
textLabel.attributedText = attrString

参考文献