должны ли значки ссылок отображаться как изображения или с URL-адресом фонового изображения css?

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

  1. Визуализируйте элемент img внутри anchor. Атрибут img alt будет описывать, что представляет значок (alt="значок карандаша"), а атрибут title будет описывать предполагаемые последствия (например, "Нажмите здесь, чтобы изменить этот виджет").

  2. Визуализируйте только тег anchor и используйте css для отображения изображения в качестве фона. В этом случае содержимое привязки должно описывать предполагаемые последствия, однако оно должно быть завернутый в элемент span, чтобы для его стиля отображения можно было установить значение none. Якорь также должен содержать атрибут title, соответствующий содержимому (конечно, без окружающего диапазона).

Мне кажется, что вариант № 2 проще реализовать в приложении asp.net mvc. Поскольку иконка — это проблема дизайна, а не разметки, имеет смысл определить изображение в CSS. Это также упрощает работу с точки зрения обслуживания кода... изменение местоположения img src потребует только изменений в файле CSS, а не файлов просмотра. Удаление CSS приведет к тому, что приложение также вернется к полному текстовому доступу.

Что мне кажется забавным, так это часть о вложении содержимого ссылки в диапазон, чтобы в css можно было установить disply: none;. Другое дело, что если я использую селектор :hover для замены изображения и предоставления эффекта опрокидывания / развертывания, кажется, что для замены изображений требуется больше времени, чем при использовании javascript.

Я что-то пропустил здесь?


image icons css asp.net-mvc background-image
person danludwig    schedule 17.01.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Мы часто используем вариант № 2, но по-другому. Вместо того, чтобы оборачивать содержимое якоря в диапазон, используйте CSS, чтобы присвоить якорю стиль display: block или inline-block, затем установите его text-indent в -1000em (или подобное, просто выберите большое значение). Я думаю, вам также нужно установить overflow на hidden.

Если вы делаете фоновое изображение в виде спрайта (одно изображение с состояниями без наведения и наведения в нем) и используете :hover для изменения положения фона, вы должны избежать мерцания/задержки, которые вы можете видеть сейчас. Это также приводит к тому, что на ваш веб-сервер поступает на один отдельный запрос меньше.

Обратите внимание, что для этого также требуется явно установить width и height привязки в вашем CSS, чтобы они соответствовали размеру вашего значка.

person super_seabass    schedule 17.01.2011
comment
Хороший звонок по обоим пунктам. Я не думал об использовании текстового отступа или спрайта, но я уверен, что и то, и другое было бы улучшением. Уже есть display:inline-block с явной высотой и шириной. - person danludwig; 18.01.2011

arrow_upward
1
arrow_downward

Если значок передает информацию, которая не дублирует информацию, уже имеющуюся в документе, то это должен быть настоящий <img>.

Однако атрибут alt должен содержать альтернативу изображения, а не его описание.

alt="Edit this widget"

Атрибут title следует использовать только для предоставления справочной информации (подумайте о «дополнительных функциях»), и вам следует избегать использования терминологии, специфичной для реализации (например, «Нажмите здесь»).

Что мне кажется забавным, так это часть о вложении содержимого ссылки в диапазон, чтобы он мог иметь display: none; установить в css

Если вы пойдете по пути помещения контента в фоновые изображения и скрытия реального текста, по крайней мере, text-indent скройте его из поля зрения, а не display: noneизолируйте его и сделайте невидимым на экране. читатели.

person Quentin    schedule 17.01.2011
comment
Есть ли у вас документация, подтверждающая правило alt vs title? Раньше я использовал alt для описания предполагаемого действия, когда изображение было заключено в якорь, но я мог бы поклясться, что где-то читал, что вы должны использовать alt для описания содержимого изображения, даже если оно заключено в якорь. Кроме того, вы не получаете всплывающую подсказку при наведении с помощью alt, она поставляется только с заголовком, и я хочу, чтобы всплывающая подсказка была для неинвалидов. Не означает ли это, что мне придется дублировать один и тот же контент в атрибутах alt и title? - person danludwig; 18.01.2011
comment
Попробуйте просмотреть веб-страницу в Lynx, и вы увидите, насколько бессмысленным обычно бывает описание изображения (alanflavell.org.uk/alt/alt-text.html#howlers). Если вам нужна всплывающая подсказка, вам нужно будет продублировать информацию (но это означает, что изображение может быть недостаточно информативным). - person Quentin; 18.01.2011
comment
¿Que? -- Спасибо за ссылку, было довольно забавно. Так игнорируют ли Lynx/программы чтения с экрана атрибуты заголовков (изображений или тегов привязки)? - person danludwig; 18.01.2011
comment
Атрибуты заголовка предлагают рекомендательную информацию (которая не должна быть обязательной для понимания содержания). Я не знаю, предоставляет ли Lynx способ доступа к нему, как это делают некоторые программы чтения с экрана, но нет гарантии, что пользователь воспользуется этой опцией (я думаю, что это глобальный параметр для некоторых программ чтения с экрана). - person Quentin; 18.01.2011