web-dev-qa-db-ja.com

アイコンのアクセシビリティとフォント文字の使用

今のところ、カスタムWeb Dingbatフォントを埋め込み、Webページのアイコンとして使用する傾向にあるようです。しかし、スクリーンリーダーがこれらの文字を読み上げるのは本当ではないでしょうか。

たとえば、視覚障害のある訪問者向けのメニューを読み取ると、次のように聞こえる可能性があります（この例では、文字fは派手な矢印の絵記号です）。これをもっとアクセシブルにする方法は？

accessibilityfont
19
Tony Bolero

すばらしい質問です!!

私自身も強い疑いを持っていたので、同僚（ [〜＃〜] jaws [〜＃〜] ユーザー）の1人にテストしてもらいました。

そうです、キーボードと同等のものを読んでいるように見えます。 Wingdingの "スノーフレーク"（横5、下3 この画像では ）でテストすると、JAWSは[〜＃〜] t [〜＃〜]。これは、翼の代わりに文字を読む効果があります。

このコンテンツを提供するためのアクセシブルな方法は、画像を使用し、適切な代替テキスト（必要な場合）とフォーム要素にsを提供することであろうと思います。

6
msanford

これを行うための現在の最良の方法は、:beforeおよび:afterpseudo elements を使用することだと思います。一般に、 スクリーンリーダーはCSSで生成されたコンテンツをアナウンスしません （これが、必須のコンテンツを:beforeまたは:after疑似要素に配置してはならない理由です）。

[〜＃〜] html [〜＃〜]

<ul>
    <li>Home</li>
    <li>About</li>
</ul>

[〜＃〜] css [〜＃〜]

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
ul {
    list-style-type: none;
}
li:before {
    display: inline-block;
    margin-right: 0.5em;
    font-family: 'FontAwesome', sans-serif;
    content: '\F0A3';
}

フィドル： http://jsfiddle.net/CuC64/

4
steveax