Существует ли браузер для быстрого просмотра информации о заголовках сайта?

Question

Иногда вам нужен быстрый обзор всех используемых заголовков HTML (h1, h2, h3, ...) веб-сайта. Да, на самом деле вы могли бы взглянуть на исходный код, чтобы получить его, но это не очень быстрый обзор.

Многим веб-разработчикам известен хороший инструмент Chromiumbrowser под названием "Веб-разработчик". Инструмент позволяет вам очертить заголовки, но цвета контуров не позволяют определить номер заголовка или иерархию заголовков.

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

Answer 1

У вас есть аддон для веб-разработчиков для Firefox и расширение для веб-разработчиков для Chrome, которое точно выполняет вашу работу. Кроме того, есть еще один инструмент под названием WAVE Toolbar, который выполняет подсчет заголовков и многое другое, что связано с доступностью.

Панель инструментов WAVE

Answer 2

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

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

H1 Navigation
H1 Content: Here comes the "real" title and content of the current page
  H2 Content sub section 1
  H2 Content sub section 2
    H3 Content sub section 2.1
  etc.
H1 Related
  H2 News
    H3 News 1
    H3 News 2
    H3 News 3

Часто в графическом дизайне многие из этих заголовков опускаются (например, "Навигация" или "Связанные"), и их значение передается через графическую структуру страницы. Тем не менее, неграфические пользовательские агенты (например, программа чтения с экрана) полагаются на эти заголовки, поэтому они все еще должны существовать в исходном коде HTML и скрываться только визуально для графических пользовательских агентов ("обычных" веб-браузеров).

Теперь есть два способа скрыть что-то визуально от веб-страницы:

Прежде всего, мы можем использовать свойства CSS display: none или же visibility: hidden, Что некоторые люди не знают: используя эти свойства, программы чтения с экрана также пропускают скрытый контент. Так что это не хороший способ скрыть контент, который программы чтения с экрана все еще должны видеть, и поэтому не является подходящим способом скрытия заголовков для наших целей.

Второй способ - переместить контент, который должен быть скрыт, из порта просмотра. Обычно это делается чем-то вроде position: absolute, left: 10000px, width: 1px; height: 1px; overflow: hidden (существует множество вариантов этого в сети, но все они в основном делают то же самое). Так, как правило, вы определяете класс CSS, как .visually_hidden с атрибутами выше и назначьте этот класс заголовкам, которые вы хотите скрыть визуально (но не от программ чтения с экрана).

H1 Navigation.visually_hidden
H1 Content
  H2 Content sub section 1
  H2 Content sub section 2
    H3 Content sub section 2.1
  etc.
H1 Related.visually_hidden
  H2 News
    H3 News 1
    H3 News 2
    H3 News 3

Теперь вернемся к исходной теме!

Как указывалось ранее, в упомянутых инструментах / расширениях заголовков не делается различий между визуально и полностью скрытыми элементами (фактически, они вообще не заботятся о CSS)! Так что они полезны только в ограниченной степени. (Пожалуйста, исправьте меня, если я ошибаюсь или кто-нибудь знает расширение, которое реализует эту функцию.)

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

Обновить

Похоже, что панель инструментов веб-доступности Internet Explorer учитывает вышеупомянутые CSS-атрибуты display / visibility в своей функциональности "Структура => Структура заголовков", поэтому она подходит для отображения иерархий заголовков такими, какие они есть на самом деле.

Answer 3

Вы можете попробовать установить firebug на аддон Firefox по адресу: http://getfirebug.com/

Это мощный инструмент веб-разработки.:)