私はコンテンツ キュレーション Web サイトに取り組んでいます。キュレートできるものの 1 つは、文字数制限のないテキスト付きのウィジェットです。ウィジェット (およびそのプレビュー) は、単に設定するだけでレンダリングされますoverflow: hidden
管理者は現在、ウィジェットをプレビューして、公開する前に「問題なく」表示されることを確認する必要があります。
ただし、スクリーン リーダーを使用している場合、スクリーン リーダーは非表示のテキストも読み上げるため、目の不自由な管理者は目の見えるユーザーに対してコンテンツがオーバーフローすることを認識できません。
解決策の 1 つは、文字数制限を強制することです。これは、文字数制限は非等幅フォントには適していないため、当初は避けていました。
しかし、それに頼る前に、オーバーフローしたコンテンツをスクリーンリーダーから隠すことができるかどうか疑問に思っていましたか?
これを解決する確かにハックな方法の1つは、最初にこの質問の答えに従うことです:
これにより、オーバーフローしたコンテンツを別のに分離できますdiv。その後、次aria-hidden=trueのように JavaScript で追加できます。
elem.setAttribute("aria-hidden", "true");
上記の例では、スニペットは jQuery を使用しているため、次のようにすることもできます。
p2.attr( "aria-hidden", "true" );
オーバーフローが水平の場合、これは機能しないと思います。これを解決するのは非常に困難ですが、これは垂直オーバーフローに対して機能します。
それが役に立ったことを願っています！
スクリーン リーダーからコンテンツを非表示にするには、属性を使用できますaria-hidden="true"。
<span aria-hidden="true">Here be redundant or extraneous content</span>
ソース。