Как добиться иерархической организации заголовка при динамическом создании HTML?

Question

Как добиться иерархической организации заголовка при динамическом создании HTML?

0

Одним из правил wcag 2.0 является то, что элементы заголовка, то есть h1/h2/h3/и т.д., Должны указывать структуру документа. Это означает, что вы не можете пропустить уровень, например:

<h1>main heading</h1>
...
<h3>subheading</h3>

недействительно, так как нет h2-элемента между h1 и h3. Это действительно (согласно http://achecker.ca/checker/index.php), хотя h2 находится внутри элемента раздела:

<h1>Structure test: h1</h1>
<section>
  <h2>section heading: h2</h2>
</section>
<h3>2nd sub-sub-heading: h3</h3>

следующий пример недействителен, поскольку последний h3 следует за h1:

<h1>Structure test: h1</h1>
<h2>sub-heading: h2</h2>
<h3>sub-sub-heading: h3</h3>
<section>
  <h1>section heading: h1</h1>
</section>
<h3>2nd sub-sub-heading: h3</h3>

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

thebjorn 01 дек. 2013, в 00:46

Источник

Теги:

javascript

html

wcag2.0

1 ответ

Ещё вопросы

Tae · Accepted Answer · 2013-11-30T20-43-00.000Z

2

Лучший ответ

В HTML5 вы можете использовать элементы h1 внутри элементов section чтобы определить вашу структуру:

<section>
    <h1>Blah</h1>
    <p>Asdf asdf...</p>
    <section>
        <h1>Bleh</h1>
        <p>Asdf again...</p>
    </section>
</section>
<section>
    <h1>Another header</h1>
    <p>Qwerty...</p>
</section>

Сложнее применять к нему стили (потому что вам нужно будет полагаться на классы или беспорядок section>section>h1 CSS selectors), но я думаю, что это самый простой способ решить вашу проблему.

Tae 30 нояб. 2013, в 20:43

0

Не работает Даже если я добавлю последний пример в теги раздела, он не будет проверен.
thebjorn 30 нояб. 2013, в 23:31
1

Я не знаю, каков алгоритм этого валидатора, может быть, он старый? Я знаю только один актуальный валидатор HTML5 - html5.validator.nu. И если вы хотите быть уверенным, что код доступен, вам следует попробовать его на реальном программном обеспечении. Кстати, теперь я помню, что для спецификации вполне допустимо иметь что-то вроде </ section> <h1> </ h1> <section> <h3> </ h3> </ section> </ section> ,
Tae 30 нояб. 2013, в 23:42
0

Я думаю, что html5.validator.nu является валидатором html, а не валидатором wcag ... (он также проверяет мой первый пример).
thebjorn 30 нояб. 2013, в 23:59
0

Пример @thebjorn Tae отлично подходит для меня в валидаторе achecker.ca (как только будет добавлен правильный шаблон HTML5).
Zero Piraeus 01 дек. 2013, в 00:19
0

@ZeroPiraeus хорошо, да, но в его примере нет заголовков, которые вышли из строя (все они h1). Мой третий пример не проверяется, даже если я обертываю его в элемент section (но, может быть, я что-то неправильно понимаю??)
thebjorn 01 дек. 2013, в 00:44
1

Алгоритм HTML5 понимает, что section> h1 является заголовком с большей иерархией, чем section> section> h1. Прочитайте это: coding.smashingmagazine.com/2011/08/16/… Моя точка зрения относительно используемого вами валидатора заключается в том, что, возможно, он устарел, поэтому он не понимает, что делать с секционированием.
Tae 01 дек. 2013, в 00:55
1

@thebjorn Я считаю , что смысл ее ответа заключается в том , что вы будете иметь меньше головную боль , если вы либо использовать h1 - h6 или использовать h1 элементы внутри section элементов, а не смешивая их. Тем не менее, в вашем коде нет ничего плохого - если либо валидатор, либо сам WCAG скажут иначе, они ошибаются (или, что более мягко говоря, не догнали современную лучшую практику).
Zero Piraeus 01 дек. 2013, в 00:58
0

Ах хорошо. Я попробовал плагин TotalValidator для Firefox, и он проверяет :-) wcag 2.0, похоже, с 2008 года, поэтому я не удивлюсь, если он не соответствует современным лучшим практикам ;-)
thebjorn 01 дек. 2013, в 01:03

Показать ещё 6 комментариев