diff --git a/frontend/src/components/HomePage.css b/frontend/src/components/HomePage.css index 9188e98..1af42d7 100644 --- a/frontend/src/components/HomePage.css +++ b/frontend/src/components/HomePage.css @@ -116,7 +116,8 @@ main.home { color: var(--photo-eyebrow); } -.home-band h2 { +/* The first band's heading is the page's

, the others

; all look the same */ +.home-band :is(h1, h2) { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.5rem); diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx index fdff897..9729164 100644 --- a/frontend/src/components/HomePage.tsx +++ b/frontend/src/components/HomePage.tsx @@ -22,11 +22,12 @@ import './HomePage.css'; * later. When it does, see the note in the food band below. * * Accessibility: - * - The page has one visible

, "Welcome to Wine not?", styled as the - * small line above the first band's heading, and one

per band, so - * screen reader users can jump between the bands by heading. (Earlier - * the

was hidden text for screen readers only; we use visible text - * or aria-label instead of hidden helper elements.) + * - The first band's heading, "Find wines that match your taste", is the + * page's

, and the two other bands have an

each, so screen + * reader users can jump to the start of the page and between the bands + * by heading. It looks the same as the

s. (Earlier the

was + * hidden text for screen readers only; we use visible text or + * aria-label instead of hidden helper elements.) * - Each band is a
named by its heading (aria-labelledby). * - The photos are decorative (alt=""): the text says where each band * leads. A dark veil behind the text keeps the white text at 4.5:1 or @@ -65,8 +66,8 @@ export default function HomePage() { height={807} fetchPriority="high" /> -

Welcome to Wine not?

-

Find wines that match your taste

+

Explore by taste

+

Find wines that match your taste

See how wines compare on body and acidity, and pick one from the map.