Семантический HTML Практика: список навигации

Question

Я просто понял, что сокрытие текста плохая попытка из thread я только что сделал,

Как Замечание, Google не любит скрытый текст, и если у вас есть lot это, он будет считать обманчивым кодирования. Один из них, вероятно, прекрасен, но вам лучше использовать атрибут alt в теге изображения.

Но иногда нужно использовать изображения для списка навигационных ссылок, таких как показано ниже, так что я использую CSS фоновое изображение на <a> теги и скрыть фактический текст в HTML с использованием <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> 

это серьезно отсутствие семантики и «это будет считать обманчивым кодированием». как я использовал много много скрывающего текста из-за замены текста изображениями?

что мне делать, если мне нужно использовать изображение для кнопки и изображения для списка ссылок для навигации?

спасибо.

Answer 1

Скрытие текста также означает, что некоторые устройства чтения с экрана будут пропущены.

Лучшим способом сделать это было бы либо использование текстового отступа, чтобы разместить текст с экрана, использовать абсолютное позиционирование на пролетах, а также позиционировать их вне экрана или просто сделать их видимыми: скрытыми.