TIL that adding a psuedo-h7
POSTED ON:
TAGS: accessibiilty html mdn
Natively, there are 6 heading levels.
Via the MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
Within the accessibility realm:
https://www.w3.org/TR/wai-aria-1.1/#aria-level
If you want to define a new heading level, you should use:
<h6>A deeply nested section</h6>
<p>Some Text in heading level 6</p>
<div role="heading" aria-level="7">
This is effectively a <h7> even though they don't exist!
</div>
<p>[...content...]</p>
via W3C's Using role=heading to identify headings
via 101 Digital Accessibility (a11y) tips and tricks
Related TILs
Tagged: accessibiilty