2016-08-17 5 views
3

私はコンテンツキュレーションのウェブサイトに取り組んでいます。キュレートすることのできるものの1つは、テキストと文字の制限がないウィジェットです。ウィジェット(およびそのプレビュー)は、設定をシンプルにしてレンダリングされますoverflow: hiddenスクリーンリーダーからオーバーフローコンテンツを隠す方法

管理者は現在、ウィジェットをプレビューし、公開前に「大丈夫」になっていることを確認する必要があります。

ただし、スクリーンリーダーを使用している場合は、スクリーンリーダーが隠れたテキストも読み上げるので、視覚障害のある管理者は、目に見えるユーザーのコンテンツがオーバーフローすることは考えられません。

1つの解決策は、文字の制限が非固定幅フォントではあまり大きくないため、当初回避していた文字の制限を適用することです。

しかし、それに慣れる前に、あふれたコンテンツをスクリーンリーダーから隠すことが可能かどうか疑問に思っていましたか?

答えて

0

これを解決する1つの確かハックの方法は、最初にこの質問の答えに従うことです:

Transfer overflow from one div to another

これは、別のdivに溢れたコンテンツを分離にあなたをできるようになります。その後、あなたがそうのようなJavaScriptでaria-hidden=trueを追加することができます。

elem.setAttribute("aria-hidden", "true");

を私は上記のあなたを与えた例では、スニペットは、あなたも、このようにそれを行うことができますので、jQueryのを使用しています。

p2.attr("aria-hidden", "true");

オーバーフローが水平の場合、これはうまくいかないと思います。解決は非常に難しいでしょうが、これは垂直オーバーフローのために機能します。

+0

これは最も可能性が高い回答ですが、私はテストしませんでした - 私たちは、物事を単純にするために文字制限を設定するつもりです。 – Alec

+0

うまくいくといいですね。 upvotingも考慮してください:) –

-1

スクリーンリーダーからコンテンツを非表示にするには、属性aria-hidden="true"を使用します。

<span aria-hidden="true">Here be redundant or extraneous content</span> 

Source

+0

コンテンツの_part_のみを非表示にしようとしています。すべてではありません。 – Alec

1

aria-hidden="true"は、スクリーンリーダーがその要素とその内容を認識しないようにします。つまり、読み取られません。

aria-labelは、支援技術(スクリーンリーダーなど)が認識するテキストを設定します。

http://www.w3.org/TR/wai-aria/states_and_properties

+0

'aria-label'は' div'で動くことができますか?そしてそれはラベルとその内容の両方を読むでしょうか? – Alec

+0

いいえ、aria-labelはdivで動作しません。スクリーンリーダーはフォーム関連のコントロールとメディアについてのみそれを考慮します。 –

+0

はい、 'div'の' aria-label'を使うことができます。 * aria-label属性は、現在の要素にラベルを付ける文字列を定義するために使用されます。特定の要素に限定されない。 **この属性は、どのような典型的なHTML要素でも使用できます** https://www.w3.org/TR/wai-aria/states_and_properties#aria-label @Alec – Jeni

0

これは、あなたが後にしている答えではないかもしれないが、私の考えでは、アクセシビリティは単純でなければならないことは常にあります!

ここで最悪のケースは何ですか?スクリーンリーダーのユーザーは、他のユーザーには見られない文章をもっと聞く必要がありますか?それとも、実際にはテキストの段落にすることができますか?それが前者なら、私はそれについて全く心配しないでしょう。

+0

問題は部分的に見えるユーザーですスクリーンリーダーが示唆するよりもずっと前に切り取られたテキストを取得する可能性のある、目に見えているユーザーのためのコンテンツを効果的に管理することはできません。 – Alec

+0

ああ、あなたを持っています。その場合、文字の制限が最も賢明であるようです –

関連する問題