Accessibility: Global header & footer fixes

[n-lark]

Global header & footer fixes

One PR. Clears findings on every page of the site.

Issue 1.1 — Header logo link missing accessible name ✅ Done

WCAG: 2.4.4 / 4.1.2 (Level A)

The desktop wordmark and mobile square logo links in the global header contained only SVGs with no text fallback or aria-label. Screen readers announced them as "link" with no destination context.

Files:

• src/_includes/layouts/base.njk:232 — desktop wordmark logo
• src/_includes/layouts/base.njk:235 — mobile square logo

What was done: Added aria-label="FlowFuse home" to both <a> elements.

Acceptance criteria:

• Both logo links have aria-label="FlowFuse home"
• Lighthouse no longer flags a.flex.md:hidden.lg:flex... as missing a discernible name (verify after deploy)

---

Issue 1.2 — Header CTA <ul> contains stray <a> child ✅ Done

WCAG: 1.3.1 (Level A)

<ul class="cta"> in the global header contained a "Contact Us" <a> element as a direct child rather than wrapped in <li>. Screen readers announce list items by count; an unwrapped child confused the announced structure.

Files:

• src/_includes/layouts/base.njk — header CTA <ul> block (was lines 299–305, now 299–309 after edit)

What was done: Wrapped the <a class="ml-2 ff-btn ff-btn--primary">Contact Us</a> in <li class="flex">.

Acceptance criteria:

• Contact Us link is wrapped in <li> inside <ul class="cta">
• Lighthouse no longer flags ul.cta for the "Lists do not contain only <li> elements" violation (verify after deploy)
• No visual regression — Contact Us button still aligns the same way in the header (verify visually)

---

Issue 1.3 — Platform mega-menu <ul> structure (covers original 1.3 + 1.4) ✅ Done

WCAG: 1.3.1 (Level A)

Lighthouse flagged three list-structure violations on every page: ul.narrow.sm:grid…items-center, ul.sub-menu.grid.grid-rows-subgrid.row-span-4, and ul.sub-menu.grid.grid-rows-subgrid.row-span-3. All three were caused by the same structural issue in the Platform mega-menu: the two <ul class="sub-menu"> blocks were direct children of <ul class="narrow"> (rather than nested inside their respective title <li>s).

Files:

• src/_includes/layouts/base.njk — Platform mega-menu block (was lines 247–264, now 247–267 after edit)

Acceptance criteria:

• All direct children of <ul class="narrow"> are <li> elements
• All direct children of <ul class="sub-menu"> are <li> elements
• Lighthouse no longer flags ul.narrow.sm:grid…items-center, ul.sub-menu.…row-span-4, or …row-span-3 (verify after deploy)
• No visual regression on header dropdown menus across breakpoints — particularly the Platform dropdown, which has the most complex grid layout (verify visually)

---