1.3.2 意味のある順序でコンテンツを表現する
スクリーンリーダーなどの支援技術を使うユーザーにも、正しい順序でコンテンツが読み上げられるように
- DOMの順序と表示順序を一致させる
- デザインを実現するためのスペースをいれない
レビュー・テスト方法
- 企画時、デザイナー・エンジニアによるレビュー
- マークアップ実装時、コードレビューによるチェック
実装方法
文字間隔の調整
良い実装例
CSSのletter-spacingを使用して文字間を実現している。
<h1>東京</h1>
<style>
h1 {
letter-spacing: 1em;
}
</style>
悪い実装例
スペースを使用して単語内の文字間を実現している。
<h1>東 京</h1>
これだと、空白が開くことで1つの単語と認識されず、「東京」ではなく「ひがし きょう」と読み上げられてしまう。