Одним из правил 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, который будет добавлять контент, содержащий элементы заголовка, и мне интересно, как я должен выбрать элементы заголовка (какой уровень), который я должен использовать, чтобы я не сделал недействительным документ?
В 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), но я думаю, что это самый простой способ решить вашу проблему.