Лучшая практика для заголовков HTML, когда вложенность разделов составляет 7 глубин

Ваше предложение является передовой практикой, поскольку оно используется в примере для соответствия критериям успеха WCAG 2.1 в разделе ARIA12 Использование role=heading для определения заголовков.

Во втором примере со страницы говорится следующее:

В этом примере показано, как реализовать заголовок уровня 7, используя role=heading и атрибут aria-level. Поскольку HTML поддерживает заголовки только до уровня 6, нет встроенного элемента, обеспечивающего эту семантику.

...
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
...
<div role="heading" aria-level="7">Jonagold</div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>

Вы можете применять роль и уровень к любым элементам, если это не переопределяет подразумеваемую семантику элемента. Например, вы можете поместить их в элемент div, но вы не можете назначить role элементу кнопки, так как он имеет подразумеваемую роль кнопки, и вы не можете aria- level на h1...h6, так как на них уже есть подразумеваемый уровень. Дополнительные сведения см. в разделе Требования соответствия документа для использования атрибутов ARIA в HTML.

HTML и ARIA по расширению определяют 6 уровней заголовков. Хотя технически <div role="heading" level="7"> является правильным, он не является общепризнанным заголовком 7-го уровня всеми средствами чтения с экрана и другими вспомогательными средствами. Jaws, например, считает, что любой элемент с атрибутом уровня aria со значением за пределами 1-6 является заголовком уровня 2. Интерпретация Jaws не противоречит спецификации ARIA.

По этой причине я рекомендую не использовать aria-level для заголовков уровня 7 или выше. ЕСЛИ вам действительно нужны заголовки 7-го уровня и выше, просто используйте <p> или <div> без каких-либо указаний, чтобы не мешать программам чтения с экрана и другим вспомогательным инструментам, которые не поддерживают заголовки выше 6-го уровня.

Однако, прежде чем принимать это простое решение как должное, спросите себя:
Вам действительно нужно идти так глубоко?

Вы должны задать себе этот вопрос, потому что на самом деле, вероятно, вам это не нужно. Многие люди испытывают трудности с пониманием длинных текстов и сложных структур. Нормальный хорошо структурированный текст разумной длины не должен использовать более 3 уровней. Техническая спецификация, руководство пользователя или исследовательская работа могут потребовать 4 или, может быть, 5, учитывая их сложность, глубину и объем. В принципе, 6-го уровня должно быть более чем достаточно для построения правильной, осмысленной и понятной структуры.

Если вам нужно больше уровней, возможно, вы пропускаете уровни без причины, или ваш текст плохо продуман. Вы не можете организовать это по-другому? Может, разделить на разные части?

Вы говорите о <section> и <article>, но действительно ли все они ограничивают разделы или статьи? Другими словами, действительно ли все они играют роль секционирования во всем документе с семантической точки зрения? Я сомневаюсь в этом. Я почти уверен, что некоторые из них имеют только роль визуального разделения, и в этом случае вы должны заменить их на <div>.

Посмотрите на следующий вопрос, где я дал аналогичный ответ: a-h7-element/55892415#55892415">Является ли h6 aria-level=7 надежным способом создания элемента h7?

Лично я считаю, что все, что меньше <h3>, слишком мало. <h4> размером с <p>. Если вы действительно хотите что-то меньшее, вы можете установить для него свойство стиля font-size. Ниже приведена таблица размеров px от <h1> до <h6>:

Таким образом, предложенное вами «<h7>» будет около 8px. Для вашего <div>, которое вам нужно сделать <h7>, вы должны дать ему class="h7" и в своем CSS поместить:

.h7{font-size:8px}

Конечно, вы можете поставить любой размер, который вы хотите. Таким образом, вы можете создавать еще более мелкие шрифты, хотя это может быть плохой идеей (для удобочитаемости текста).