Как заменить кнопки HTML-изображения текстовой ссылкой?

Question

Я хотел бы сделать мою веб-страницу очень совместимой; поэтому, когда пользователь отключает все стили при просмотре моих сайтов, я хочу, чтобы они могли найти все в тексте. Проблема в том, что некоторые из моих веб-страниц используют кнопки с изображением, как показано ниже:

<a href="next.html"><img src="images/next_button.png"></a>

Это проблема, поскольку, когда я захожу на страницу с такой кнопкой (в режиме без стилей), я получаю изображение кнопки вместо текстовой ссылки. Как в таком случае заменить кнопку с изображением текстовой ссылкой? Спасибо!

Answer 1

использовать атрибут alt?

<img src="images/next_button.png" alt="next" />

Answer 2

На самом деле для спецификации HTML требуется , чтобы у вас был атрибут ALT в ваших тегах img, например:

<a href="next.html"><img alt="Next" src="images/next_button.png" /></a>

Браузеры, такие как браузеры в текстовом режиме, программы чтения с экрана и другие, которые не отображают изображение, автоматически заменят текст ALT на изображение.

Answer 3

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

Также было бы целесообразно добавить атрибут rel="next" к тегу a, чтобы указать, что это реляционная ссылка на следующую страницу:

<a href="next.html" rel="next"><img src="images/next_button.png" alt="next page"></a>

Answer 4

Как уже говорилось, правильный атрибут alt будет легко исправить.

Мне нравится идея использовать CSS для кнопок всякий раз, когда это возможно (таким образом, стилизация реального текста). Если вы используете jQuery, посмотрите на новый виджет кнопки jQuery UI, который делает именно это.

Вы также можете использовать метод замены изображения, при котором вы сохраняете фактический текст на странице, а затем либо закрываете текст изображением, либо отодвигаете текст в сторону с помощью CSS. В обоих случаях фактический текст был бы там для целей доступности / SEO, и изображение было бы просто фоновым изображением, чтобы сделать его красивым.

Answer 5

Решение состоит в том, чтобы использовать только тексты в HTML и стилизовать их с изображениями в CSS:

HTML:

<a href="next.html" class="next-button"><span>Next</span></a>

CSS:

.next-button
{
    display: inline-block;
    width: 100px; /* image width */
    height: 20px; /* image height */
    background: url("../images/next_button.png")
}

.next-button span
{
    display: none;
}

Редактировать: скрыть текст при отображении фона с помощью дополнительного тега span