音声読み上げとwhite-space: nowrap;

2019年7月1日 著

少し前に英語圏で話題にのぼっていたのを目にし、Diigoにブックマークしたmike-engel/a11y-css-reset: A small set of global rules to make things accessible and reset default stylingが、今日になってコリスで紹介されているのを読みました（アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset | コリス）。情報量的に日本語で紹介しやすい内容だし、コリスで取り上げられるべくして取り上げられた感があります......というのはさておき、気になったのがa11y.cssに対する解説で、.visually-hiddenの宣言ブロックに書かれた以下のコメント＆スタイル：

/* 誤って発音されたテキストの回避策 */
white-space: nowrap;

.visually-hiddenに指定されたスタイルの元ネタはWriting CSS with Accessibility in Mind - Manuel Matuzovic - Mediumであり、コリスもそちらの記事から当該コメントを取り出して訳しているようなのですけど、原文にはWorkaround for falsely pronounced, smushed textとあります。なので、コリスの訳は決して間違っているわけではないと思いますが、しかしsmushed textのニュアンスを十分には伝えていないように感じました。敢えて訳し落としているのか、それとも......？

white-space: nowrap;の必要性については、軽くググると3年前の記事だけどBeware smushed off-screen accessible text - J. Renée Beach - Mediumに辿り着きます。記事中ではゼロ幅とあるのですが、要は極端に短い幅が指定された要素内容について、単語ごとに改行コードが挿入されてしまい、かつ改行コードは空白文字と同じようには取り扱われないので、すべての単語が結合された状態の一単語として支援技術に渡されてしまうのだとか。その結果として、よくわからん読み上げられ方をしてしまうから、それを避けるべく指定されたのがwhite-space: nowrap;だそうです。

......であるからして、要素内容が日本語で書かれたテキストに限定できる場合、わざわざwhite-space: nowrap;を指定しなくとも良い可能性があるかなと。まぁ自分の場合、視覚を介して得られる情報と聴覚を介して得られる情報とで（厳密には一致させることなどできないのだけど）可能な限り一致している状態なりマークアップなりデザインが好ましいと考えているので、そもそも.visually-hiddenが実現しているような、画面上には表示させないがスクリーン・リーダーのような音声読み上げ環境に対しては出力を期待するスタイル指定には、あまりお世話になりたくないわけですが（少なくとも「積極的には」）。