Accessibility
Guidelines

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

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

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

レビュー・テスト方法

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

実装方法

文字間隔の調整

良い実装例

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

<h1>東京</h1>

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

悪い実装例

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

<h1>東 京</h1>

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

参考文献