footer.html: replace h5 with a span element

[XhmikosR]

Preview: https://deploy-preview-460--bootstrapblog.netlify.app/

Should be backported to icons and main repo

[XhmikosR]

@patrickhlauke does it LGTY?

Unsure what's the best approach here, previously our headers didn't follow the order.

[patrickhlauke]

don't really agree with the PR here. that text definitely acts as a heading for the list that follows, so having it marked up as a heading makes semantic sense. <h5> is fine (as skipping heading levels is not a necessarily a failure)

[XhmikosR]

Cool, dropping it then, thanks!

FYI I was trying to fix the Lighthouse a11y issues and this was one of them. Would be nice if someone could have a look at those.

[patrickhlauke]

overall, the heading structure on the blog is a tiny bit quirky, with the <h1> for "The Bootstrap Blog", and then every blog post itself starting with an <h1>... but it's excusable.

one way to bring a bit more order into the structure (and to sort out the heading levels a bit) would be to add a hidden <h1> at the start of the footer, and then have those <h5>s set to be <h2>s (but visually styled to be the same as now)

(for the other lighthouse issue, I'd suggest making the links in that footer text bold or underlines, to provide another visual hint other than just their colour that these are links)

[XhmikosR]

IIRC we get the same Lighthouse errors on the main site too, that's why I decided to try to fix the problem here and then backport the changes

[julien-deramond]

You could probably reopen this PR and replace your <span ... with a <h2 class="h5"> that would bring the right semantics with the same rendering as before. And, as mentioned by Patrick, add a hidden <h1> for the footer.

[XhmikosR]

Not quite sure I like the approach with hidden element. Is it really considered a good approach? The other change makes sense I guess.

…

On Tue, Apr 2, 2024, 14:43 Julien Déramond ***@***.***> wrote: You could probably reopen this PR and replace your <span> with a <h2 class="h5 ..." that would bring the right semantics with the same rendering as before. And, as mentioned by Patrick, add a hidden <h1> for the footer. — Reply to this email directly, view it on GitHub <#460 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNPCJYJ66XRSRPIAUV3Y3KKW3AVCNFSM6AAAAABFRW6LFWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMZRHAYDCMBRHA> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[patrickhlauke]

Is it really considered a good approach?

because there's no way to effectively "reset" the context of headings (since the whole "outline algorithm" that was proposed for HTML years ago is a pipe dream that was never implemented), just having them as <h5> at the moment without anything else before them makes them hierarchically come under the last blog post. While not the most elegant, having a hidden <h1>Footer</h1> or <h1>Additional links</h1> or similar - or even wrapping the bootstrap link at the start of the footer there in an <h1> - is probably the best we can do to make it clear those headings that then follow are "outside" of the last blog post