Use appropriate heading levels throughout application
It was recently brought up in an MR that heading levels (h1
, h2
etc.) should not skip one or more levels within a given page, since doing so harms accessibility.
Basically, we shouldn't do this:
<h1>Heading level 1</h1>
<!-- h2 skipped -->
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
Instead, we should do this:
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
Heading levels should be chosen for their semantic meaning within the page, not their appearance. If a given level's appearance isn't what we want in a page, the correct thing to do would be to style it, not change its level. One way to do this is to use Bootstrap's .h1
, .h2
etc. classes, which allow you to apply the style of a particular heading level to any actual heading level element. Ideally, however, our designs shouldn't require this very often, if at all.
This issue is for tracking our progress in auditing and fixing instances of this bad practice within GitLab.