Semantic HTML Praxis: die Navigationsliste

Question

Ich habe erkannt, dass der Text versteckt ist ein schlechter Versuch, aus einem thread ich gerade gemacht,

Als Nebenbemerkung, Google nicht wie verborgener Text, und wenn Sie eine haben viel von es wird es betrügerisch Codierung halten. Eine ist wahrscheinlich in Ordnung, aber Sie wäre besser dran mit dem alt Attribut auf dem Image-Tag.

Aber ich brauche manchmal Bilder für die Navigation Linkliste zu verwenden, wie die unten, so verwende ich CSS-Bild Hintergrund auf <a> Tags und den eigentlichen Text in dem HTML-Code verstecken <span> verwenden,

<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> 

ist es ernsthaft Mangel an semantischen und "es wird es betrügerische Codierung betrachten." wie ich viele viele versteckte text wegen des ersetzens von text mit bildern verwendet habe?

Was sollte ich stattdessen tun, wenn ich ein Bild für eine Schaltfläche und Bilder für die Navigationslinkliste verwenden muss?

danke.

Answer 1

Ausblenden des Textes bedeutet auch, dass es von einigen Bildschirmlesern verpasst wird.

Ein besserer Weg, dies zu tun, wäre entweder Text-Einrückung zu verwenden, um den Text weg vom Bildschirm zu positionieren, absolute Positionierung auf den Spannen zu verwenden, um sie auch außerhalb des Bildschirms zu positionieren oder sie sichtbar zu machen: versteckt.