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