Причины не использовать CSS для визуального изменения порядка элементов HTML

Question

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

На базовом уровне член нашей команды хочетструктурировать HTML следующим образом (этот запрос основан исключительно на перспективе дизайна)

<div class="secondary-content">
    <h2>Secondary content heading</h2>
    <p>This is the secondary content</p>
</div>
<div class="main-content">
    <h1>Main heading</h1>
    <p>This is the main content</p>
</div>

, а затем использовать CSS, чтобы визуально поместить main-content div перед secondary-content.

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

Будучи разработчиком внешнего интерфейса, я беспокоюсь о доступности

1. Считыватели экрана / вспомогательные технологии в первую очередь попадут на secondary-content.Для меня это похоже на открытие книги, начиная с главы 4, а затем возвращаясь и читая главы 1, 2, 3, 5, 6 и т. Д.
2. Структура заголовка страницы будет разделена (H2 до H1и т. д.)
3. Если в secondary-content имеется какой-либо контент, для понимания которого требуется информация из main-content, это может сбить с толку пользователей с отключенными / вспомогательными технологиями CSS и т. д.

Тем не менее, настоящая горячая кнопка для людей в бизнесе - это Google / SEO.Следовательно, кто-нибудь знает какие-либо хорошие аргументы / статьи о том, почему написание HTML плохо структурированным образом негативно повлияет на нашу SEO?

Answer 1

[Будет ли] написание HTML плохо структурированным способом, что негативно скажется на нашем SEO?

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

Вот что говорится в Руководстве Google для веб-мастеров:

• Создайте полезный, богатый информацией сайт и напишите страницы, которые четко и точно описывают ваш контент . [Страницы, содержание которых скрывает фактический визуальный порядок, не дают четкого и точного описания их содержания.]

• Сделать сайт с четкой иерархией и текстовыми ссылками. [Помещение <h2> перед <h1> нарушает иерархию.]

• Используйте текстовый браузер , такой как Lynx, для проверки вашего сайта, потому что большинство поисковых роботов видят ваш сайт так же, как Lynx. [Кто-то, использующий текстовый браузер, наверняка будет сбит с толку странными схемами переупорядочения контента.]

Итак, короче говоря, вы вмешиваетесь в "четкую иерархию", которую поисковые системы пытаются проиндексировать. Это явно не желательно.

Чтобы ответить на ваш более общий вопрос:

Я ищу доказательства, подтверждающие аргумент, что мы вообще не должны этого делать.

По сути, документы HTML - это просто: документы , предназначенные для передачи семантической информации через их структуру.

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

• В книге вы ожидаете, что глава 7 будет предшествовать главе 6?
• В газетной статье вы ожидаете, что тело появится перед заголовком?
• Ожидаете ли вы, что в фильме заключительные титры появятся до титульной карты?

Вы можете понять, почему структурно было бы неуместно переупорядочивать элементы таким образом. Документ имеет естественную форму; искажение затрудняет понимание .

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

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

Answer 2

Это похоже на ужасную идею. Главным образом из-за читабельности. Логично, что не имеет смысла, чтобы вторичное выступление предшествовало первичному. Если бы я был веб-разработчиком, смотрящим на код страницы, и увидел это, единственное, о чем я мог бы подумать, это «что».

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

Answer 3

Повторный ответ от Джона Феминеллы, WCAG 2.0 имеет несколько методов о (против) переупорядочении контента.
Вот несколько ссылок, связанных с доступностью:

• Размещение интерактивных элементов в порядке, который следует за последовательностями и взаимосвязями внутри содержимого (G59)
• Создание логического порядка табуляции с помощью ссылок, элементов управления формы и объектов (H4)
• Настройка порядка DOM в соответствии с визуальным порядком (C27)
• Организация страницы с использованием заголовков (G141)

С точки зрения CSS, что вы подразумеваете под

визуально поместите div основного контента перед вторым содержимым

Являются ли они столбцами плавающими (или отображают: встроенный блок или ячейку таблицы, как угодно) или один над другим? В последнем случае любое масштабирование текста (IE7, IE6, пользователи ZoomText , все пользователи, которые отключают графическое масштабирование, чтобы избежать горизонтальной прокрутки и нуждаются в большом увеличении), будут плохо работать. Если бизнес заинтересован только в Google / SEO, скажите им, сколько в вашей стране ЧАСТИЧНО зрячих пользователей. В десять раз больше слепых пользователей. Не говоря о пожилых, как наши (дедушки) родители.
Они хотят, чтобы они были клиентами, или, может быть, ваша компания достаточно богата и не нуждается в них и не заботится о них и их деньгах? ;)

Answer 4

На этот вопрос нет однозначного ответа. Причина в том, что для некоторых форм макета потребуется переупорядочение источника. Если необходимо плавать secondary-content, а вокруг него течет main-content (сбоку и под ним), то , то оно должно быть помещено первым в порядке источника . Там нет выбора в этом вопросе.

Лучше ли размещать контент в исходном порядке, если это возможно, да. Всегда ли это возможно, нет.

См. Пример: http://jsfiddle.net/ceHGX/3/