HTML - семантический способ отображения изображений/значков/элементов пользовательского интерфейса?

Правда ли, что существуют семантически правильные и неправильные способы отображения изображений/значков?
Я имею в виду, что, конечно, не очень удобно включать все изображения газетной статьи в качестве фоновых изображений, потому что таким образом программы чтения с экрана не могут их прочитать. текст alt, а как насчет значков или элементов пользовательского интерфейса? Оправданно ли с семантически ориентированной точки зрения включать их в качестве фоновых изображений?


html semantics semantic-markup user-friendly
person Sven    schedule 05.02.2013    source источник
comment
Существует тенденция использовать элементы i с классами CSS для иконок. Если это хорошая тенденция, я не знаю. В общем, имхо, все, что связано с UI (включая иконки), должно быть в CSS.   -  person Felix Kling    schedule 06.02.2013
comment
@FelixKling Я бы сказал, что подавляющее большинство иконок по-прежнему содержат контент. Они имеют смысл и добавляют ему ценности. Это не просто фоновое украшение, которое можно удалить, не затрагивая содержимое.   -  person tomasz86    schedule 10.08.2014

Ответы (2)


arrow_upward
7
arrow_downward

Существуют семантически правильные и неправильные способы отображения разных видов изображений.

  • Обычные изображения Лучше использовать стандартные теги <img>, так как они часто являются основным содержанием сайта. Они должны иметь теги alt, чтобы информировать пользователей о важных частях контента.
  • Значки – это изображения, которые не являются основным содержанием вашего сайта, но их также следует отображать с помощью тегов <img>, поскольку для удобства использования важно показывать, что делают определенные значки, если они отображаются неправильно. .
  • Неважные изображения, которые украшают сайт и не являются его основным содержанием, должны отображаться в качестве фона, потому что тогда вы не используете ненужные узлы в вашем DOM.
person Mateusz Rogulski    schedule 05.02.2013
comment
Бинго! Я также хотел бы добавить, что так называемые «неважные» элементы часто повторяются от страницы к странице и, возможно, даже в контексте одной и той же страницы. Таким образом, загрузка в качестве фона через CSS также улучшит рендеринг. - person Giacomo1968; 06.02.2013

arrow_upward
3
arrow_downward

Я не думаю, что вам следует включать значки как отдельный элемент, просто представляющий этот значок; например img или i.

Вместо этого каждый значок представляет определенную функцию, поэтому вы должны использовать элемент, который можно использовать для этой функции, например. якорь a или button. Каждый из этих элементов должен иметь неграфическое содержимое, которое может быть проанализировано программами чтения с экрана и веб-пауками. Затем вы можете украсить эти элементы, используя фоновые изображения для некоторых графических значков.

Использование отдельной разметки для иконок является семантической ошибкой/ошибкой. Сама иконка ничего не делает. Это просто для того, чтобы запомнить функцию основного элемента. Но на самом деле эти элементы все еще там, когда вы удаляете значок.

Так что да, я всегда буду включать значки в качестве фоновых изображений непосредственно в элемент или в сгенерированный псевдоэлемент.

person feeela    schedule 05.02.2013