Accessibility: missing ARIA landmark roles and unlabeled interactive elements in Spacious theme

[tg-autopilot]

Summary

Multiple accessibility (WCAG/ARIA) issues appear in the Spacious theme templates that can cause automated audits to flag sites using the theme. Problems include missing ARIA landmark roles on primary page regions, unlabeled interactive elements (social links, search button/input), and other form/heading inconsistencies which together can cause failures reported in the customer's audit (landmark roles, label-in-name, unlabeled form fields, heading order, and tab order concerns).

Customer context

Customer provided an accessibility audit log (Crisp conversation) highlighting the following findings: missing ARIA landmark roles; tab order issues; heading tag hierarchy problems; elements without accessible names; unlabeled form fields. No theme version was provided in the conversation.

Reproduction notes

1. Review theme templates in this repository. The problems are visible in source:
   • header.php: skip link exists but header/footer/main elements lack explicit ARIA landmark roles.
   • footer.php: footer has id="colophon" but no role="contentinfo".
   • inc/header-functions.php: social links are rendered as empty anchors (no text or aria-label), e.g. line 41.
   • searchform.php: input uses a placeholder without a visible , and the submit has no accessible name.

I did not run an automated audit tool, but the code inspection reproduces the conditions that would trigger the reported findings.

Diagnosis

Key code references (file:line):

• header.php:63 - <header id="masthead" ...> — no role="banner" present. The page main region has id="main" (line 250) but no role="main".
• footer.php:17 - <footer id="colophon" ...> — no role="contentinfo" present.
• inc/header-functions.php:41 - social links output: '<li class="spacious-' . strtolower( $value ) . '"><a href="' . esc_url( $link ) . '" ' . $new_tab . '></a></li>' — generates anchor tags with no text content and no aria-label.
• searchform.php:10-13 - search input has only a placeholder and no or aria-label; submit button is empty (<button class="search-icon" type="submit"></button>).

These findings explain the customer's audit entries:

• "ARIA Landmark Roles not coded correctly": theme markup omits explicit ARIA landmarks for major regions (banner, main, contentinfo). While HTML5 semantic elements (, , ) are helpful, older or stricter auditors/assistive tech require explicit role attributes in some contexts (or the theme may be served in a way where landmarks are not inferred). Adding explicit roles will make the landmarks unambiguous.
• "Label in Name" and "Unlabeled Formfields": social links and the search form lack accessible names.
• "Headings" / "Focus order": heading choices in header (site title h1 on front page, h3 otherwise) can be OK if page titles elsewhere are used correctly, but automated audits often flag heading hierarchy issues when themes use nonstandard heading levels in multiple template areas.

Confidence: 80/100 — direct code inspection shows missing accessible names and missing landmark roles; some items (tab order, heading hierarchy) depend on page content and theme configuration and could vary per site.

Recommended next steps

1. Add explicit ARIA roles to primary structural elements: role="banner" on the header, role="main" on the main container, role="contentinfo" on the footer.
2. Fix unlabeled links and controls:
   • Output an accessible name for social links (visible text or aria-label attribute).
   • Add a (visually hidden if needed) or aria-label to the search input and an accessible name to the submit button.
3. Review heading outputs across templates to ensure a single H1 per page (or otherwise follow site content hierarchy) and avoid skipping heading levels.

These changes are small, backwards-compatible, and will address the audit items reported by the customer.

Source: Crisp conversation