最近「社会的距離 ソーシャルディスタンス」を意識して、文字間にスペースで空白を挟むことが流行り、スクリーンリーダーでの読み上げに支障が出たり、検索エンジンでスペース無しの通常の検索キーワードを入れた時に、スペースも含めた内容と検索キーワードが一致せず、該当する検索結果が無い状態になってしまい、検索結果に表示されなくなる問題が話題になっています。

そこで紹介したいのが、以下のHTMLタグです。

<div style="letter-spacing: 空けたい文字数em;">空白を入れたい文字列</div>

では早速、全角スペース区切りとHTMLタグで空白を挿入した文章の読み上げを比較してみましょう。

例文1

「　　社　　会　　的　　距　　離　　の　　表　　現　　方　　法　　」

こちらは全角スペース2文字を挟んで空白を入れており NVDAでの読まれ方は
「しゃかいてききょはなれのおもてげんほうほう」になります。（OneCore音声使用）

例文2

　<div style="letter-spacing: 2em;">「社会的距離の表現方法」</div>

上記のようにメモ帳などのテキストエディターに入力し、拡張子をhtmlで保存して、ChromeやFirefoxなどのブラウザで開きます。

こちらは、HTMLタグで視覚的な空白を表現しています。
NVDAでの読まれ方は
「しゃかいてききょりのひょうげんほうほう」と正しい読み上げになります。(OneCore音声使用)

このように、HTMLタグを使用して表示間隔を調整すると、スクリーンリーダーではそのまま読み上げ、表示上の文字間隔は文字の大きさの2倍となっています。
適切な方法で書式情報の文字間を調整してソーシャルディスタンスを表現する事で、スクリーンリーダーで正常に読み取る事も、検索エンジンでも適切に検索されるようになります。

Webデザイナーの皆様、是非 外見的にも効果があり、スクリーンリーダーでの可読性の維持としてのアクセシビリティーを保ちながら、検索性も両立できるこの方法を活用して情報発信をお願いいたします。