セマンティックHTML実践：ナビゲーションリスト

Question

私はちょうど隠しテキストは私がちょうど作っthreadから悪い試み、追記として

で、Googleは 隠されたテキストを好きではない、とあなたが持っている場合は、その実現 の多くは、それは欺瞞的だと考えます コーディング。 1つはおそらく問題ありませんが、 イメージタグのalt 属性を使用する方がよいでしょう。

、しかし、私は時々、下記のようなナビゲーションリンクリストの画像を使用する必要があるので、私は<a>タグのCSSの画像の背景を使用して<span>を使用して、HTML内の実際のテキストを隠す

<div id="header" class="align-center"> 
<ul id="menu-header"> 
    <li id="menu-header-home"><a href="#" class="current-header"><span>Home</span></a></li> 
    <li id="menu-header-portfolio"><a href="#"><span>Portfolio</span></a></li> 
    <li id="menu-header-profile"><a href="#"><span>Profile</span></a></li> 
    <li id="menu-header-newsletter"><a href="#"><span>Newsletter</span></a></li> 
    <li id="menu-header-blog"><a href="#"><span>Blog</span></a></li> 
    <li id="menu-header-shop"><a href="#"><span>Shop</span></a></li> 
</ul>   
</div> 

それは意味論が真剣に欠けていて、それはそれを欺瞞的なコーディングとみなすでしょうか？テキストを画像に置き換えるために多くの隠れたテキストを使用していたので、

ボタンの画像とナビゲーションリンクリストの画像を使用する必要がある場合は、どうすればよいですか？

ありがとうございました。

Answer 1

テキストを非表示にすると、一部のスクリーンリーダーでは表示されなくなります。

これを行うには、テキストのインデントを使用して画面外にテキストを配置するか、スパンの絶対配置を使用して画面外に配置するか、単に表示/非表示にします。