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

適合レベル

A

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

概要

スクリーンリーダーなどの支援技術を使うユーザーにも、以下のように正しい順序でコンテンツが読み上げられるようにする。

DOMの順序と表示順序を一致させる
デザインを実現するためのスペースをいれない

テスト・チェック方法

企画時、デザイナー・エンジニアによるレビュー
マークアップ実装時、コードレビューによるチェック

実装方法

文字間隔の調整

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

参考文献