Page 05 https://www.careuk.com/careers/vacancies

Vacancy List

Primary user task: Find a Care UK vacancy near a postcode, optionally filtered by role type, sortable by distance or drive time.

Today
3,569 px
6 viewports
Phase 2 target
3,200 px
5 viewports
Reduction
−10%
369 px reclaimed

The shortest page in the audit (3,569 px / 6 viewports). Care UK already ship a compact list pattern here, `vacancyItem` rows at ~70 px each. This page is the benchmark; the work is **propagating its discipline** to other templates.

When a stakeholder asks “is the proposed 300 px care-home card achievable?”, this page is the answer. Care UK already ship 70 px vacancy rows in a 36-item grouped list. The page-level wins here are touch (10 sub-AAA group headers), accordion micro-control density, and form feedback, not page height.

Page-specific findings

F5.1 Note density 2

vacancyItem is the audit's compactness benchmark

Each vacancy row contains title (h4) + rate badge + shift label + 2-line description + apply CTA. Average row height ~70 logical px. Compare: - `careHomeItem` (P02–P03), ~1,000 px per row - `signpostPanel` (P04), ~700 px per row - `vacancyItem` (P05), **~70 px** per row

evidence for C-CARD-LIST.1 Read more ↓
On the page
Fix

Not a problem to fix, propagate this template's discipline to the care-home result card. The page-05 template is the model.

F5.2 Medium layout 2

36 per-vacancy readmore disclosures cluster micro-controls

Each vacancy collapses its description to ~2 lines with a "Read more" expander. Pattern is right (keeps the list short), but at 36 expanders on a 6-viewport page that's an average of 6 disclosures per viewport, every viewport carries 6 small interactive controls competing with the card title and Apply CTA.

−50 px · control noise reduction Read more ↓
On the page
Fix

One `accordion` per group (not per item) lets users expand a whole home's roles at once. Or drop the per-vacancy readmore entirely, at ~70 px without truncation each row is still well below `careHomeItem` density.

Catalyst components

accordion

F2.5 Medium touch 2

Distance / Drive time form radios are 16×16 (sub WCAG AA)

Native HTML radio inputs render at default browser size (16×16), below the WCAG AA 24×24 minimum. The labels next to them extend the perceived hit area but the actual handler usually fires on the input rect.

WCAG 2.5.8 AA fail Read more ↓
On the page
Fix

Replace with the Catalyst `radio` component (24×24, with extended 44×44 hit area via padding).

Catalyst components

radio

F5.5 Medium touch 3

10 care-home group headers double as in-page navigation but are sub-AAA

Each home name h3 link is 81–149 wide × 26 tall. Doing double duty, primary hit target for "see the care home" AND visual anchor for the grouped vacancy list. 26 px tall is below the 44 AAA minimum and within ~2 px of the AA 24 floor.

WCAG 2.5.8 AAA fail × 10 instances Read more ↓
On the page
Fix

Group header should be a `card` chrome with the home name as a `heading` (not a link) and an explicit "View care home" CTA inside the card. Separates "anchor for the group" from "navigate to the home".

Catalyst components

card · button

F5.6 Medium touch 1

Native radios 16×16 (mirrors F2.5)

Same as F2.5. `input#radioGroupDistance` / `input#radioGroupDriveTime` at 16×16, below the AA 24×24 minimum.

WCAG 2.5.8 AA fail Read more ↓
On the page
Fix

Catalyst `radio` 24×24 with extended 44×44 hit area via padding.

Catalyst components

radio

F5.4 Low touch 1

Search input is 328×42 (sub-AAA by 2 px)

42 px height is below the 44 px AAA minimum. The visual outline includes 1 px border each side, so the border-box is 44 px exactly, but the hit-target rect is the input's own bounding box (328×42).

WCAG 2.5.8 AAA marginal Read more ↓
On the page
Fix

Catalyst `input` is sized at 44 px min-height tokenised via `--input-height-base`. Existing component, replacement-only.

Catalyst components

input

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.

WCAG 2.5.8 AA fail Read more ↓
Fix

Promote footer link `body-sm` to a row with 44 px min-height. Apply across all pages.

Catalyst components

footer

F5.3 Low accessibility 1

Empty H3 heading in vacancy stream

Between "Appleby House" and "Arkall Manor" an empty h3 appears in the DOM. Empty headings break screen-reader heading navigation (VoiceOver / TalkBack rotor reads "heading, level 3, [silence]"). Probable cause, a CMS-rendered group whose home name field is empty.

heading hygiene Read more ↓
On the page
Fix

Template guard, never render an `<h3>` if the home name field is empty.

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.

WCAG / iOS HIG body floor Read more ↓
Fix

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.

Catalyst components

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.

−1,800 px · ~300 px per page × 6 pages Read more ↓
On the page
Fix

Suppress decorative footer elements at small viewports. Apply a mobile-suppression utility on the swoosh decoration.

Catalyst components

footer

C-FORM.1 Medium layout P02P03P05 2

Search form Reset / Submit visually unbalanced

Reset is a small outlined button (~75 px wide); Submit is a wide filled button (~190 px). The asymmetric pair reads as unresolved.

form consistency Read more ↓
On the page
Fix

Apply the existing form-row pattern, primary + secondary share width on mobile. `button` Primary + `button` Secondary, equal-width on small viewports.

Catalyst components

button

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

viewport reclaimed × 91 screens Read more ↓
On the page
Fix

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).

Catalyst components

floating-action

C-FORM.2 Medium navigation P02P03P05 2

Search results lack active-filter / sort summary, no count

After Submit, the page reloads with results but no chip row showing "Filters: …, Sort: …, X of Y results." Users can't refine without scrolling back to the form.

feedback gap Read more ↓
On the page
Fix

Add a `filter-chip` row + count band above results (e.g. "36 vacancies in 10 homes near GU22"). No new component needed.

Catalyst components

filter-chip · body

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%)

390 of 504 images (77%) site-wide Read more ↓
On the page
Fix

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.

Catalyst components

image

C-MAP.1 High navigation P02P03P05 2

Map experience is silently stripped on mobile

Desktop renders a large interactive UK map showing every Care UK home / hiring location. Mobile replaces the map with a single text link "View homes on a map" wedged below the search form. The primary spatial discovery affordance is removed, not adapted.

feature parity Read more ↓
On the page
Fix

Add a `card-flush` static-map preview as the second module, opening to a full-screen map sheet via an `image-gallery`-style interaction. The careers section (P06) already does this with Google Maps, proving Care UK's templates can support it.

Catalyst components

card-flush · image-gallery

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.

−300 px · ~50 px per page × 6 pages Read more ↓
On the page
Fix

Collapse into a hamburger / dropdown on mobile via the existing `eyebrow-nav-bar` component, which already documents this pattern.

Catalyst components

eyebrow-nav-bar