Accessibility: Heading hierarchy, generic "Read More" & aria-labelledby

[n-lark]

A11y Tasks 6, 7 & 8 - Changes

Three small, isolated fixes bundled together: heading hierarchy (WCAG 1.3.1), generic "read more" link text (WCAG 2.4.4), and a broken aria-labelledby reference (WCAG 4.1.2).

Changes

File	What changed
src/vs/litmus.njk	Blue value-prop cards: <h5> → <h3> (added text-xl to preserve visual size); "Why Industrial Teams Consider FlowFuse" section cards: <h5> → <h3> (was h1→h5 and h2→h5 skips)
src/vs/kepware.njk	"Why Industrial Teams Are Moving Away from Kepware" section cards: <h5> → <h3> (was h2→h5 skip)
src/_includes/benefits.njk	All 6 company-value headings: <h5> → <h3> (included under an <h2> in about.njk, so h3 is the correct next level). Also fixed a mismatched <h5>Flexible Hours</h3> typo in the process
src/css/style.page.css	.company-value h5 rule extended to also match .company-value h3 + explicit font-weight: 600 added. Needed because the global h5 { font-weight: 600 } rule was what made the benefit tiles bold; swapping to h3 (which inherits font-weight: 400) would have dropped the bold unless the class rule picks it up. Rule still covers values.njk and referral-sign-up.njk which continue to use h5
src/_includes/changelog/changelog-posts.njk	read more... link gained aria-label="Read more about {{ item.data.title }}" so screen readers reading the links list get the post title, not a list of identical "read more..." entries
src/_includes/blog/pagination.njk	<nav aria-labelledby="pagination"> → <nav aria-label="Pagination">. The referenced id="pagination" doesn't exist anywhere in the codebase, so assistive tech was getting no label for the pagination nav

Note on the audit

The audit originally attributed the broken aria-labelledby to src/integrations/index.njk, but that file actually uses aria-label="Integrations pagination" already. The bad aria-labelledby is in src/_includes/blog/pagination.njk (which renders on blog and changelog index pages). Fixing there instead.

Test Plan

✅ All tests passed

Two of these are structural/label changes with no visible effect (tasks 7, 8). Task 6 changes tag names, which can shift visual sizing — needs a quick visual review.

Visual review (task 6)

• Litmus page - Two blue value-prop cards still look roughly the same size (text-xl was added to match the old h5 sizing)
• Litmus page - 3 icon cards look unchanged — the inner <div class="text-xl"> controls sizing so the h5→h3 swap should be visually neutral
• Kepware page - 3 icon cards look unchanged (same inner-div situation)
• About page / Working at FlowFuse - 6 benefit titles still render in the intended style under their pictograms

Heading outline check (task 6)

Fastest option: open DevTools console on each page and paste:

console.table([...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].map(h => ({level: h.tagName, text: h.innerText.trim().slice(0, 60)})))

• /vs/litmus/ — no H5 entries. (An H1 → H3 skip on the two blue cards below the hero remains — known and acceptable, WCAG AA does not mandate sequential levels)
• /vs/kepware/ — outline has no h5 entries; no jumps larger than one level
• /about/ — scoped to the "Working at FlowFuse" section only. The 6 benefit rows below that H2 should all be H3, not H5. (The rest of the /about/ outline has other known skips that are intentionally out of scope for this PR)