Accessibility
Guidelines

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

適合レベル

A

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

概要

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

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

テスト・チェック方法

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

実装方法

文字間隔の調整

Web

良い実装例

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

<h1>東京</h1>

<style>
h1 {
  letter-spacing: 1em;
}
</style>
悪い実装例

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

<h1>東 京</h1>

これだと、空白が開くことで1つの単語と認識されず、「東京」ではなく「ひがし きょう」と読み上げられてしまう。

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

参考文献