Gutenberg: インライン境界の改善

私はこの機能が大好きで、入力している場所を理解するのに大いに役立つと思います。

ただし、Safari 10 + VoiceOverですばやくテストすると、リンク境界は次のように読み取られます。
link zero width no break space
またはそのようなもの、申し訳ありませんがここで英語を母国語としないでください🙂

1つのオプションは、Slackの@spockeによって言及されたものである可能性があります。

ariaタグを使用してスパンでラップする必要がある場合があります

文字や単語でナビゲートする場合、スクリーンリーダーはリンクに入るときにすでにlinkをアナウンスしますが、リンクを出るときには何もアナウンスしないので、支援技術からzwnbspの文字を隠すだけでよいかもしれません。うまくできた。

@aferciaこれについていくつかの調査を行いました。

キャレットがアンカーの内側/外側にあるときにアンカーに正規化されないようにするには、ブラウザーがデフォルトの処理を実行できないようにするものを挿入する必要があります。 ゼロ幅の改行なしスペースを使用します。これは、基本的に、ドキュメント内のBOM署名以外には使用されなくなった非表示の文字であるためです。 これらの文字はJawsによって無視されているようですが、VoiceOverとNVDAによって話されています。

私はこれをさまざまな方法で回避しようとしました：

1. ほとんどのスクリーンリーダーで属性が無頓着に無視されていたため、キャラクターをariaの役割と属性を持つスパンに変更しても機能しませんでした。 エディターのコンテキストにあるので、関連性はないと思います。 role = "presentation" aria-hidden = "true"とaria-label = "abc"を試しましたが、Jaws以外は何も起こりませんでした。
2. 予約済みのUnicode範囲\ ue000を試しました。これはアイコンなどのために予約されており、スクリーンリーダーで読み上げることはできません。 これらは話しませんが、ブラウザの選択正規化ロジックによっても無視されるため、使用できません。
3. aria-live = "assertive"でrole = "status"要素を追加し、基本的にwp.a11y.speakが行うこと、VoiceOverではキューをキャンセルするがNVDAではキャンセルしないテキストをプッシュし、Jawsでは少し奇妙に思えます。 仕様では、キューがキャンセルされる可能性があると書かれているので、何が起こるかはランダムだと思います。 ただし、これはおそらく、キャレットがリンクの開始位置、終了位置、前、後のいずれにあるかをユーザーに伝えるのが最も理にかなっています。これらは私たちが扱う場所だからです。 ただし、一部のスクリーンリーダーは、その奇妙な文字コードについて話すことがありますが、それについて多くのことができるかどうかはわかりません。

したがって、これを要約すると、複雑です。 :)

このチケットに記載されているアイテムを修正しました。 だから私はこれを閉じます。