A 11 Y研究事例:特定の語とスクリーン読者含意の上でテキストを壊すこと

戦略的な単語の上で視覚的に複数の線で文を破るよう頼むことは、特に着陸ページで、デザインチームからの一般的な要求です.EG「こんにちはN人間」.しかし、それは予期しない方法でスクリーンリーダーピッチ流れに影響を及ぼすかもしれません.

シナリオ問題

例えば、「Hello Human」というタイトルを持っていることを想像しましょう.

Hello   
human being

ここでは、私が見てきたいくつかの一般的な(貧弱な)アプローチがあります.

追加<br /> それぞれの行の間:これをしないでください!非常に一般的なにもかかわらず、その使いやすさのために、それは意味が間違っている!<br> は、行の分割が重要であるときに使用される.例えば、ストレスのアドレス、詩など..

追加<span /> with display:block 各行の間に.これは<br /> しかし、どんな意味もなしで、それはよいです.

Flexboxの使用:各行をAに折り返す<span> そして、flexboxを文自身に加えるflex-direction: column トリックも.

しかし、これら3つのアプローチの全ては、VoiceOverスクリーンリーダのピッチフローにおいて、予想外の結果をもたらす.

期待されるピッチ

実際のピッチ:“こんにちは”ポーズ."

別の一般的な練習を設定することですmax-width , しかし、その解決はテキスト内容に非常に依存しています.このシナリオでは、アプローチは動作しません.

代わりに防弾ソリューションを探し続けましょう.

可能解

他の実験の中でwrite-space: pre-line; 最高の解決策のようだ!リテラルの改行または使用を作成できます
 コントロール文字でテキストを中断します.

<h2 style="white-space:pre-line;">Hello       
human being</h2>

<h2 style="white-space:pre-line;">Hello &NewLine;human being</h2>

これはHTMLの意味とCSSの使用方法が、テキストが予期しない方法で大きく読まれる方法に影響する方法の例です.
ここでは、記述されたアプローチと他の解決方法を試してみることができるcodepenです.