5

ずっと前に、スクリーン リーダーはアンカー タグ <a> 内のすべてを機能として読み始めることにしました。これにより、コンテキストが視覚的に明らかであるがスクリーン リーダーにとってあいまいな場合に、リンクを短くすることができます。
開発者は、次の行のようなものを記述して、スクリーン リーダーにすべてを読み取らせることができます。

<a href="#">More<span style="display: none;"> information about XYZ</span></a>

しかし、HTML5 では、アンカー タグが「透明」になり、その中にさまざまな要素を含めることができます。http://dev.w3.org/html5/markup/a.html#a
この新しいリンク機能は、クリック可能なオブジェクト全体を適切なセマンティックで実際にカプセル化できるため、優れています。
残念ながら、リンクに隠されているすべてのものを読み取る機能は、現在私たちを苦しめています:

<li><a href="#"> [ complicated markup ] </a></li>

上記のマークアップでは、非表示のコンテンツを使用すると、スクリーン リーダーに読み込まれます。<div> に
属性を追加すると、同じ問題が発生しますrole="dialog"

スクリーン リーダーが本当に隠されているものを読まないようにするトリックとは?

IE10 と Windows 8 のナレーターを使用しています

4

1 に答える 1

1

を使用できますaria-hiddenが、注意して使用してください。

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

作成者は、このコンテンツを非表示にする行為が、冗長または余分なコンテンツを削除することによって支援技術のユーザーのエクスペリエンスを向上させることを意図している場合にのみ、注意して、aria-hidden を使用して視覚的にレンダリングされたコンテンツを支援技術から隠すことができます。aria-hidden を使用してスクリーン リーダーから表示されるコンテンツを非表示にする作成者は、同一または同等の意味と機能が支援技術に公開されていることを確認する必要があります。

于 2013-07-24T18:11:12.683 に答える