Users with visual impairment use headings as jumping points for navigation. I read Episode Structure and I did not find any mention of the recommendation for heading level.
When using sandpaper, I noticed that headings in callout blocks are converted to level 3 heading. For example, in the Optional Elements we have
with the following HTML
<section>
<h2 class="section-heading" id="optional-elements">Optional Elements<a class="anchor" aria-label="anchor" href="#optional-elements"></a></h2>
<div class="section level3">
<h3 id="callout-blocks">Callout blocks<a class="anchor" aria-label="anchor" href="#callout-blocks"></a></h3>
<hr class="half-width">
<p>Lessons do not have to contain the following structural elements, ....</p>
<div class="section level3">
<h3 id="callout-blocks">Callout blocks<a class="anchor" aria-label="anchor" href="#callout-blocks"></a></h3>
<p>One of the key elements of our lessons are our callout blocks that ...</p>
<div id="callout-component-guide" class="callout">
<div class="callout-square">
<svg>...</svg>
</div>
<span class="callout-header">Callout</span>
<div id="callout-component-guide" class="callout-inner">
<h3 class="callout-title">Callout Component Guide</h3>
<div class="callout-content">
<p>You can find a catalogue of the different callout blocks ....</p>
</div>
</div>
</div>
</div>
</div>
My feeling is that the heading inside the callout block should be a level 4 heading instead of a level 3. But might be wrong.
Users with visual impairment use headings as jumping points for navigation. I read Episode Structure and I did not find any mention of the recommendation for heading level.
When using sandpaper, I noticed that headings in callout blocks are converted to level 3 heading. For example, in the Optional Elements we have
with the following HTML
My feeling is that the heading inside the callout block should be a level 4 heading instead of a level 3. But might be wrong.