I thought I’d need to jump through many hoops to resolve an a11y issue in this site. Today, I realised I didn’t need to.
From my previous Lighthouse reports,
Heading elements are not in a sequentially-descending order
had been a thorn in the flesh. I didn’t want to override the original styles of the headers. But I wanted my h2 to look like h3. I wanted my h3 to look like h5. And I wanted some p to look like h5.
To make a header look like another, do something like:
<!-- Typescale -->
<h2 class="h3">Hello, I'm Jiayee.</h2>
To make a paragraph larger, do:
<!-- Lead Paragraph -->
<p class="lead">{{ .Site.Params.subtitle }}</p>
For more information, check out Foundation’s docs.
Making everything 100 and doing the manual checks are next!
P.S. If you need to include raw HTML in a Markdown file in Hugo, remember to enable it in config.toml:
[markup.goldmark.renderer]
unsafe = true
Otherwise, your element won’t appear and you’ll see:
<!-- raw HTML omitted -->
when you inspect your HTML elements (Cmd + Opt + I).