Rules 1, 2, and 4 summarize the key technical principles of using heading elements. The most important thing to be added is that heading texts should be short, informative, and descriptive of the content that they are headings for. In particular, the headings should give a good idea of the content as a whole and the content of each part when read in isolation, as this is one important way of “consuming” them in accessibility software.

The aria-labelledby attribute is commonly not used for headings, and it is mainly intended to be used when an association with some labeling text and the labeled element is otherwise difficult to see. In a case like this, the association is programmatically determinable, since the old implicit principle (spelled out in HTML5) is that a heading element is a heading for a section that ends before the next heading of the same or higher level. Besides, there is not much evidence that accessibility software would make specific use of such an association; it lets users identify headers, have them presented in special ways, etc., and to continue reading from the content right after a heading, but the appearance of the next heading is a sufficient signal of end of section, as a rule.

Thus, rule 3 is not needed. If it is applied, it is not quite clear whether the heading should be moved inside the div, as it is the MDN example on aria-labelledby. Here, as usual, ARIA markup examples are simple, used in situations where it is questionable whether it is needed. The reason, of course, is that a more realistic example where ARIA attributes really matter to accessibility are more difficult to compose and understand.