Как семантически связать заголовок без заголовка с текстовым блоком, не нарушая правильности HTML? ⇐ Html

[Anonymous]

Следующий блок предупреждений:


был реализован как:

Код: Выделить всё

  role="alert"
class="..."
>

Titulo

aria-labelledby="ADMONITION_BLOCK-g63lpdW6hNuTc-02DamYx-TITLE"
class="..."
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Для этого вопроса важно, чтобы заголовок был семантически связан с описанием через aria-labelledby. До недавнего времени валидатор HTML не жаловался на такую реализацию, но обновление vnu-jar до версии 26.2.13 сделало вышеуказанную реализацию недействительной:

Атрибут «aria-labelledby» не должен указываться ни для одного элемента «div», если элемент не имеет значения «роли», отличного от «заголовок», «код», «удаление», «выделение», «общий», «вставка», «абзац», «презентация», «сильный», «подстрочный индекс» или «надстрочный индекс».

Мне нужно обновить реализацию вышеуказанного компонента, но решение не так просто, как кажется.
[НЕ РЕШЕНИЕ] Используйте h-теги
Предупреждение Bootstrap имеет такую реализацию:

Код: Выделить всё

[h4]Well done![/h4]
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Однако использование h4 означает, что текст внутри блока предупреждений представляет собой отдельный раздел, что не всегда приемлемо. В приведенном ниже примере getLatElementOfArray — это заголовок h1, а «Примеры» — это заголовок h2. «Страница документации еще не проверена носителями языка» не является заголовком отдельного раздела; этот блок с предупреждением является частью раздела 1-го уровня, и после блока с предупреждением продолжается содержимое 1-го уровня.


[НЕ РЕШЕНИЕ] Используйте тег p вместо div
В приведенном выше примере существует только один абзац текста, в то время как количество абзацев и других элементов, таких как ul или dl, может быть сколь угодно большим, как в приведенном выше примере начальной загрузки. Элемент div с атрибутом aria-labelledby является оболочкой для описания, которая также является ячейкой сетки:


Обычно я избегаю дополнительной оболочки, но здесь я не знаю решения, как сохранить текущий макет с произвольным большим количеством элементов, например p или ul вместо одного div с меткой aria.
[НЕ РЕШЕНИЕ] Понизить версию vnu-jar
Прежде всего, проблема не в vnu-jar, а в обновленных стандартах валидности HTML. Далее, предыдущие основные версии vnu-jar уязвимы.

Подробнее здесь: https://stackoverflow.com/questions/798 ... thout-brea