Job Detail
Primary user task: A candidate has clicked through from the vacancy list and wants to read the role and apply.
Job detail for a Second Chef Bank role. The audit's clearest example of template-misalignment, a job-detail page built from the care-home template, carrying ~3,700 px of content that belongs elsewhere.
The user landed here from the vacancy list, they have already self-selected the role. What this page actually shows in the first 5,000 px: a 46-photo gallery of the care home, two generic “catering at Care UK” sections, four accordions about employer benefits in general, and testimonials. The job description itself sits below all of that. Once the candidate’s task drives the page structure (read role → apply → confirm location), the page is short, focused, and converts, 7,497 → 3,400 px (−55%, the largest reduction in the audit set).
Page-specific findings
F6.1 High density 4 Job-specific content is buried under generic recruitment chrome
The user landed here from the vacancy list, they have already self-selected the role. After H1 (top 212), the page shows in order: 46-photo gallery (~1,500 px), "Why work at Ancasta Grove", "A catering role at Care UK", "A catering career at Care UK", 4 accordions about employer benefits, testimonials, nearby homes. **~4,300 px of "Care UK as employer" content sits between the job title and the next role-relevant section.**
Items 5–8 in that list apply to **every catering job posting on the site**, not specific to this Second Chef Bank role at Ancasta Grove.
Restructure job-detail template: - **Above the fold:** H1 + summaryPanel + Primary Apply CTA + lead role description sentence. - **Second viewport:** full role description (responsibilities + requirements). - **Third viewport:** about the home (3-photo strip + "View 46 photos" + map preview). - **Fourth viewport:** relegated `accordion` group, "Working at Care UK" linking to a canonical hub. - **Footer-adjacent:** nearby roles (not nearby homes, the user is in a job flow).
content-section · accordion
F6.2 Medium density 2 46-photo + 10-video gallery on a job detail page
Photo galleries make sense on a care-home detail page (a prospective resident wants to see the home). On a job detail page, the candidate's question is "do I want this job?", not "do I want to live here?" The full gallery is misaligned with the visitor's task. 5 modal dialogs also sit in DOM on initial page load.
Collapse to a 3-image strip + "View all photos →" link to the home detail page.
card-flush · image-gallery
F6.5 High layout 2 104 of 106 images missing dimensions (98%), highest CLS exposure in the audit
All overlayGallery thumbnails + their expanded views render without `width` / `height` / `aspect-ratio`. The page also has 3 iframes missing dimensions, likely embedded videos. iframe CLS is harder for the browser to estimate than `<img>` because it can't query intrinsic dimensions ahead of time.
Catalyst `image` for static thumbnails (declares dims), `image-gallery` overlay opens lightbox on demand. Set explicit `width` / `height` on iframes. Single highest-leverage Core Web Vitals change in the careers section.
image
F6.7 Medium touch 1 4 accordion buttons at 41–42 px (sub-AAA by 2–3 px)
Rewards and benefits / Learning and development / Diversity and inclusion / Our People Promise. All 288 wide × 41–42 tall. Two pixels short of AAA, just inside AA.
Catalyst `accordion` already uses 44 px min-height tokenised via `--accordion-trigger-min-height`. Replacement-only.
accordion
F6.6 Low touch 1 Shortlist trigger row is 169×28 (sub-AAA)
A "Shortlist" / "Save job" trigger that secondary-converts unsuccessful candidates is a useful affordance, but at 169×28 it's below the AAA touch minimum.
Catalyst `button` Tertiary or `card-action` row pattern with 44 px min-height.
button
F6.9 Low touch Footer link rows at 19 px height (site-wide)
8 footer links each at 19 px height, below the AA 24 minimum. Site-wide footer issue, not page-specific.
Promote footer link `body-sm` to a row with 44 px min-height. Apply across all pages.
footer
F6.8 Medium navigation 2 Apply CTA discoverability is unclear from page structure
Five primary buttons distributed across a 12-viewport page, likely Apply on first viewport + Apply at end + Enquiry form + 2 modal CTAs. The page's primary action should be sticky-visible on every viewport. The current pattern lets the user scroll past the Apply CTA, lose sight of it, and have to scroll back up to convert.
Sticky `button` Primary "Apply for this role" anchored to bottom-of-viewport on mobile, with safe-area inset coordinated against C-CHAT.1 widgets (the `floating-action` pattern).
button · floating-action
F6.3 Low accessibility H1 is the job title, then job title repeats as H4 elsewhere
Same role name appears at H1 (top 212) and H4 (top 0). Likely the H4 is in a hidden floating "Apply now" rail or sticky widget. Screen-reader heading rotor reads the title twice. Outline jumps H1 → H4 → H5, non-monotonic.
Floating apply rail should not redeclare the job title as a heading, use a visually-hidden label or an `aria-labelledby` reference to the H1.
F6.4 Low accessibility Decorative use of H3 / H5 for contact details
Phone numbers and contact-section labels rendered as H3 / H5, H5 "new care enquires" + H3 "03339 200 748" + H3 "friends &family" + H3 "03339 200 748" + H5 "Enquiry form". Mixes structure with style. Also a typo, "enquires" (should be "enquiries"), and "&family" missing space.
`body-lg` + `<strong>` (or `--font-weight-semi-bold`) for visual emphasis instead of H3 / H5.
body-lg
Cross-page findings that apply here
These are component-level findings catalogued in the Cross-page findings view. Each appears on multiple pages; fixing the component delivers the fix everywhere.
C-FONT.1 Medium typography P01P02P03P04P05P06 11–14 px text used in 100+ places site-wide
WCAG and iOS HIG both recommend ≥ 16 px for body text. 11–12 px text is below that floor; 14 px is borderline (acceptable for footnotes / captions, not body copy). P01 alone has 39 elements at 11 px, 38 at 12 px, 99 at 14 px.
Use the existing `body` component sizes, `body-md` (16 px) as default, `body-sm` (14 px) as the smallest defensible body size. Footnote / caption uses can drop to `body-xs` (12 px) but should be bounded.
body
C-FOOTER.1 Low density P01P02P03P04P05P06 3 Footer carries decorative pink swoosh adding ~300 px chrome
Decorative pink swoosh sits before the actual footer content (links, copyright, social, accreditation badge). On mobile, after a long scroll, the user wants to be at the bottom, the swoosh delays it.
Suppress decorative footer elements at small viewports. Apply a mobile-suppression utility on the swoosh decoration.
footer
C-CHAT.1 High layout P01P02P03P04P05P06 2 Two persistent bottom-anchored widgets compound on every screen
Two competing always-on bottom widgets reduce the effective scrollable viewport by ~80–200 logical px on every screen of content the user reads. WCAG 2.4.11 (Focus Not Obscured), content under a persistent widget cannot be focused without scrolling around it.
Per page:
- P01, Olark chat icon + Recently Viewed (2 widgets)
- P02–P03, Recently Viewed only
- P04, Recruiting Assistant + Recently Viewed (2 widgets)
- P05–P06, Recently Viewed only
Consolidate to one persistent action per page maximum, with a documented mobile safe-area inset. Olark vs Recently Viewed must be rationalised at the application layer. Use the `floating-action` composition pattern (system-level documentation, not a new component).
floating-action
C-IMG.1 High layout P01P02P03P04P05P06 2 77% of images across the audit are missing width / height / aspect-ratio
Images without explicit dimensions cause **layout shift** as they load, content jumps as the browser reserves space. This produces a poor Core Web Vitals CLS score (a Google ranking signal) and a janky perceived performance. The brief explicitly calls this out.
Per page:
- P01: 242 / 297 (81%)
- P02: 13 / 15 (87%)
- P03: 10 / 12 (83%)
- P04: 18 / 69 (26%)
- P05: 3 / 5 (60%)
- P06: 104 / 106 (98%)
Apply the existing `image` component (or `<picture>` with explicit dims) to all live image renders. The component already documents `width` / `height` props as required, with `aspect-ratio` as the mobile-friendly modern alternative.
image
C-NAV.1 Low density P01P02P03P04P05P06 2 Top utility tab bar consumes ~50 logical px on every page
The three audience tabs (CAREERS / CARE HOMES / CUSTOMERS) sit at the very top of every page, they're a Care UK Group navigation (sister-site switcher) but consume permanent vertical space on a small viewport.
Collapse into a hamburger / dropdown on mobile via the existing `eyebrow-nav-bar` component, which already documents this pattern.
eyebrow-nav-bar
C-PANEL.2 Medium density P01P06 2 "At a glance" / "Job at a glance", long table-like metadata block
Stacks 4–6 rows of metadata (Location, View map, CQC Rating, Availability, Pricing PDF, Contract PDF on P01, Location, Pay, Shifts, Contract, Reference on P06). Sits in the second viewport on both pages.
Collapse to a compact summary (top, 1–2 facts that drive the user's decision) plus an accordion holding full detail. Catalyst components needed already exist.
card · accordion