0

私はグリフフォントを持っており、それを使用してこの効果を実現したいと考えています:

カスタム Twitter アイコンの画像

これまでの私のコード:

<div class="ico linkedin">linkedin</div>
        
.ico {border-radius:10em; background:black; color:white}
.linkedin {visibility:hidden;}
.linkedin:first-letter {
    font-family:'JustVector'; 
    font-size:900%; 
    text-indent:1em; 
    visibility:visible
 }

これは Chrome では機能しますが、Firefox や Internet Explorer 9 では機能しません。また、JAWS はhiddenまたはdisplay:none要素を読み取らないため、これにはアクセスできません。

だから、私は次のようなものを試しました：

.linkedin {position:absolute; left:-5em}
.linkedin:first-letter {/*etc*/ position:absolute; left:6em}

しかし、うまくいきません。これを達成するための適切でアクセス可能な方法はありますか?

4

3 に答える 3

2

アイコンを使用するアクセシブルな方法は、適切な属性imgを持つ要素を使用することです。alt

<img src=smiley.gif alt="Just joking!">

アイコン フォント (おそらく「gliph フォント」の意味です) には、固有のアクセシビリティの問題があります。たとえば、文字を使用して、ブラウザをだまして CSS でアイコンとしてレンダリングさせようとするということは、CSS をオフにすると、間違った情報である文字だけが表示されることを意味します。空のコンテンツと CSS で生成されたコンテンツを含む要素を使用すると、CSS (または少なくとも CSS の視覚的な部分) がオフの場合、間違った情報ではなく情報がないことを除いて、同じ問題が発生します。

于 2013-07-31T16:44:40.037 に答える
0

回答ありがとうございます。これに対処する方法についていくつか質問があります。

さて、最後に簡単なものに行きます。アクセスしやすく、よりセマンティックで、ページに CSS がなくても機能し、印刷も可能だと思います。

最初の文字 (アイコン) を周囲のテキストの余白で区切り、レイヤーをoverflow:hidden;. 次に、 と を調整marginしline-heightて、円の内側の文字/アイコンにピントを合わせます。

最終的なコード:

.ico {background:black; border-radius:10em; height:5em; overflow:hidden; position:relative; width:5em; color:white;}
.linkedin:first-letter {font-family:'JustVector'; font-size:400%; line-height: 1.3em; margin-left:0.2em; margin-right:1em;}

そのソリューションでは、スクリーンリーダーは「linkedin」を読み取り、他のユーザーに十分な情報を提供するアイコンのみを表示します。

于 2013-08-01T14:58:54.780 に答える