5

私の Web アプリケーションでは、アイコンだけで構成されるフォントを作成しました。これらのアイコンを使用して、アプリケーション内のタイトルとサブタイトルを補完し、視覚的に魅力的なものにします。

ただし、JAWS などのスクリーン リーダーはこれを読み上げるため、スクリーン リーダーのユーザーにとって不快な体験になります。

たとえば、キャラクターcは雲のイメージを表示します。たとえば、次のようなヘッダーを補完するために、この方法で使用します<h1>。

<span class="my-font">c</span>

これは既存のタイトルを補完するだけであり、ページの内容に新しい意味を追加するものではないため、スクリーン リーダーにはこれを完全に無視してもらいたいと思います。調査の結果、次の 2 つの可能性が見つかりました。

aria-hidden="true"またrole="presentation"

これらのどちら (または両方) が私が達成しようとしていることに適しているかはわかりません。

4

3 に答える 3

5

aria-hidden="true"次の属性を使用する必要があります。

要素とそのすべての子孫が、作成者によって実装されているように、どのユーザーにも表示または認識できないことを示します。

これは、要素がどのユーザーにも認識されないことを意味します。だから使用：

<span class="my-font" aria-hidden="true">c</span>

アイコンがリンクであると思われる場合、または単なる装飾用ではない場合は、スクリーン リーダーがそれが何であるかを理解できるように、テキストを添付することをお勧めします。スクリーン リーダーだけに表示されるように、テキストを画面外に移動できます。

HTML

<span>
    <span class="my-font" aria-hidden="true">c</span>
    <span class="screen-reader">About me</span>
</span>

CSS

.screen-reader {
    position:absolute;
    top:-9999px;
    left:-9999px;
}
于 2013-04-02T02:21:33.233 に答える
1

可聴アイコンを非表示にするようにaria-hidden="true"機能しますが、支援技術のリンクと見出しのリストには引き続き表示されます。

私はまだそれらを完全に隠す方法を見つけようとしていますが、それは難しいです. OPにとっては、はい、aria-hidden="true"それらをある程度隠しますが、完全には隠しません。それだけに頼らないでください。また、必ず実際のユーザーでテストしてください。

この本当に良い記事に出くわしました: http://pictos.cc/articles/using-icon-fonts/

于 2013-05-06T19:27:36.180 に答える