2017-06-22 11 views
2

aria-hiddenがfontAwesomeに与える影響は何ですか? 使用する必要がありますか?どうして?それともなぜですか?例えばaria-hideの効果fontAwesome

私は

<i class="fa fa-star" aria-hidden="true"></i> 

以下のコードでaria-hidden="true"の効果を知りたい私を助けてください。あなたは、いくつかの余分な装飾やブランディングを追加するには、アイコンを使用している場合

+2

このリンクは、あなたが
https://stackoverflow.com/questions/31107040/whats-the-difference-between-html-hidden-and-aria-hidden-attributes – Bhaktuu

答えて

3

、それはアイコンが表示されていない可能アクセシビリティを強化するために、読者をスクリーンします。

the documentationから:

あなたには、いくつかの余分な装飾やブランディングを追加するには、アイコンを使用している場合、それは彼らがあなたのサイトやアプリの聴覚をナビゲートしているとしてユーザーに発表されている必要はありません。さらに、アイコンを使用してHTMLに既に存在するコンテンツに視覚的に再強調したりスタイリングを追加したりする場合は、ユーザー補助技術を使用する必要はありません。あなたはaria-hidden = "true"をFont Awesomeのマークアップに追加することで、これが読み取られないようにすることができます。

-1

彼らは聴覚的にあなたの サイトやアプリをナビゲートしているとして、それは ユーザーにアナウンスする必要はありません。さらに、視覚的にアイコンを使用して がHTMLに既に存在するコンテンツにスタイリングを再強調または追加する場合は、 補助技術を使用するユーザーに繰り返す必要はありません。 aria-hidden = "true"を に追加することで、これを読み取らないようにすることができます。

<i class="fa fa-fighter-jet" aria-hidden="true"></i> 

純粋な装飾として使用されているアイコン

<h1 class="logo"> 
    <i class="fa fa-pied-piper" aria-hidden="true"></i> 
    Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller 
</h1> 

ソースロゴとして使用されているアイコン:要するにhttp://fontawesome.io/accessibility/

+0

、私は考えていないことができますコードは 'aria-hidden:' true ''が要素に何をするかを示します – Swellar