Можно ли использовать spacer.gif в контейнере с фоновым изображением, чтобы применить замещающий текст к этому фоновому изображению?

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

Я поместил spacer.gif (вы знаете... то, что мы использовали в старые времена табличных макетов :) ) в этот контейнер и добавил к нему замещающий текст, чтобы программы чтения с экрана по-прежнему могли обеспечить хорошую доступность.

Я не нашел ничего, что бы говорило, что это «хорошо», поэтому мне интересно, хорошая практика или нет. При этом я также не нашел ничего, что говорило бы о том, что это нехорошая практика «не в порядке».

Может ли кто-нибудь пролить свет здесь? ТИА

РЕДАКТИРОВАТЬ: В итоге я использовал свое собственное предложение, так как не получил никаких отзывов, чтобы сказать мне, что это плохая идея. Я отмечу ответ Ишервуда как ответ, потому что это, безусловно, жизнеспособная альтернатива.

вот что я сделал:

        <div id="headerImage">
            <img src="~/Content/images/spacer.gif" alt="Widgets For Sale Here At This Widget Store" />
        </div>

где #headerImage содержит CSS для размещения моего изображения баннера в качестве фонового изображения.


html accessibility wai-aria screen-readers
person Christopher Johnson    schedule 11.11.2014    source источник
comment
Покажите свой код и объясните, что вы считаете потенциальной проблемой. Обратите внимание, что вопросы о «хорошей практике», как правило, основаны на мнениях и, следовательно, не по теме в SO; поэтому убедитесь, что вы задаете вопрос, на который можно ответить на прочной технической основе.   -  person Jukka K. Korpela    schedule 11.11.2014
comment
@Jukka, я бы спросил, правильно ли рассматривать вопросы хорошей практики как не по теме. Очевидно, что такие вопросы, как лучший браузер, основаны на мнениях и не по теме, но мы все должны поощрять передовой опыт (там, который явно принят отраслью как таковой). И мы должны учить хорошей практике, отвечая на вопросы по ней. Чтобы показать, что может пойти не так, если мы этого не сделаем, просмотрите все ответы на вопросы CSS на StackOverflow, в которых говорится, используйте !important. Это может быть технически точным, но в отрасли принято считать, что это чуть ли не худший поступок в практике CSS.   -  person GuyH    schedule 12.11.2014

Ответы (2)


arrow_upward
2
arrow_downward

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

Я бы использовал закадровый текстовый элемент в начале элемента с фоновым изображением:

.offscreen {position: absolute; left: -999em;}

<div class="header-with-css-background">  
    <span class="offscreen">Information about the image here</span>
    Other header content
</div>

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

person isherwood    schedule 11.11.2014
comment
Я читал об этом как о варианте и просто использовал атрибут ARIA. На самом деле мне больше нравится мой подход, и я думаю, что мой вопрос больше касается того, является ли это хорошей практикой или нет. Если нет, то почему? - person Christopher Johnson; 11.11.2014
comment
Я упомянул, почему не в своем вступительном предложении. Не думаю, что есть более серьезные недостатки. - person isherwood; 11.11.2014
comment
разница в разметке между вашим решением и моим незначительна, а файл изображения составляет всего 43 байта, так что тут тоже ничего страшного. Я думаю, что буду работать с этим, если кто-то еще не может дать мне вескую причину, почему нет. - person Christopher Johnson; 11.11.2014

arrow_upward
-1
arrow_downward

Если вы хотите, чтобы программы чтения с экрана собирали информацию о вашей компании, добавьте ее в тег alt для фонового изображения. Согласно странице W3.org, если изображение является единственным содержимым ссылки или элемента управления формы, «Используйте атрибут alt, чтобы сообщить о назначении ссылки или предпринятом действии».

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

person Anthony R Gray    schedule 11.11.2014
comment
Фоновое изображение (примененное с помощью CSS) не может иметь атрибут alt. - person isherwood; 11.11.2014
comment
Это не тот случай, когда они «не могут», чем обычно «не делают», потому что фоновое изображение обычно просто радует глаз. ОП сказал, что он хочет, чтобы программы чтения с экрана предоставляли информацию о компании в соседней распорке. Поскольку тег alt будет содержать больше, чем просто бессмысленное сообщение «это изображение», имеет смысл просто добавить эту информацию в тег alt фонового изображения. - person Anthony R Gray; 11.11.2014
comment
Нет, ты не понимаешь. Нельзя использовать замещающий текст для элемента, отличного от изображения, и в этом случае не существует тега изображения. - person isherwood; 11.11.2014
comment
isherwood, вы правы насчет отсутствия тега alt. моя вина. но вы все равно можете добавить альтернативный тег, используя атрибут title следующим образом: ‹div class=company_info title=поместите информацию о компании здесь, в заголовке›‹/div› CSS .company_info { float: left; поле справа: 10px; фон: url(~/images/super_duper_background_image.png) -50px 0; ширина: 20 пикселей; высота: 20 пикселей; } очевидно, что значения пикселей произвольны и представлены только для примера - person Anthony R Gray; 11.11.2014
comment
правда, это не идеально, но он спрашивал, можно ли ассоциировать информацию о компании с фоновым изображением страницы. Поскольку W3C подписывает практику, я думаю, моя точка зрения такова: действуйте и делайте это. Если он использует заголовок на фоновом изображении или тег alt на изображении-разделителе, это не имеет значения. Я оставляю реализацию ему; Я всего лишь хочу ответить на его вопрос о передовой практике, сказав: «Дерзайте». интернет-полиция за это на тебя не нападет. - person Anthony R Gray; 11.11.2014
comment
Атрибут title не объявляется надежными вспомогательными технологиями. Не используйте его для передачи важной информации. - person steveax; 12.11.2014