How to semantically associate the non-heading title with text block without breaking of HTML validity?

3 weeks ago 29
ARTICLE AD BOX

The following admonition block:

enter image description here

has been implemented as:

<div role="alert" class="..." > <div id="ADMONITION_BLOCK-g63lpdW6hNuTc-02DamYx-TITLE" class="..." > Titulo </div> <div 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. </div> </div>

For this question it is important that the title semantically related with description via aria-labelledby. Until recently, the HTML validator was not complain about such implementation but updating of vnu-jar to version 26.2.13 has made the above implementation invalid:

The “aria-labelledby” attribute must not be specified on any “div” element unless the element has a “role” value other than “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, or “superscript”.

I need to update the implementation of the above component, but the solution is not as simple as it seems.

[NOT THE SOLUTION] Use the h-tags

The alert of Bootstrap has such implementation:

enter image description here

<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>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.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>

However, the usage of h4 means that the text inside the admonition block is the separate section what it not always fine. In below example, the getLatElementOfArray is h1 heading, and "Examples" is h2 heading. The "Documentation Page has not been checked by Native Speakers yet" is not the heading for the the separate section; this admonition block is a part of the 1st level section, and after the admonition block the content of the 1st is continues.

enter image description here

[NOT THE SOLUTION] Use p tag instead of div

In above example there is only one paragraph of text while the number of paragraphs and other elements like ul or dl may be arbitrary large as in above bootstrap example. The div with aria-labelledby attribute is the wrapper for description which also a grid cell:

enter image description here

Usually I am avoiding of the extra wrapper but here I don't know the solution how to keep the current layout with arbitrary large number of elements like p or ul instead of single div with aria-labelledby.

[NOT THE SOLUTION] Downgrade the vnu-jar

First of all, the problem is not about vnu-jar - it is about updated HTML validity standards. Next, the previous major versions of vnu-jar are vulnerable.

Read Entire Article