Semantic HTML Practice: the navigation list

I just realised that hiding text is a bad attempt from a thread I just made,

As a sidenote, Google does not like hidden text, and if you have a lot 开发者_JAVA百科of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.

But I sometimes need to use images for navigation link list such as the one below, so I use css image background on <a> tags and hide the actual text in the html using <span>,

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

is it seriously lack of semantic and 'it will consider it deceptive coding.' as I have used many many hiding text due to replacing text with images?

what should I do instead if I have to use an image for a button and images for navigation link list?

thanks.

---

Hiding the text also means it'll be missed by some screen readers.

A better way to do this would be either to use text-indent to position the text way off screen, use absolute positioning on the spans to also position them way off-screen, or simply make them visibility: hidden.