Design system
Harborwalk UI/UX Foundations
A working reference for brand colors, typography, reusable UI components, and the accessibility checks we need to keep in mind as the system evolves.
Color palette
Contrast issues are documented in the accessibility audit(s) below rather than corrected by changing these colors.
- #0F2B8E
Primary Blue
--color-navy
Primary UI and links
- #000D3A
Dark Blue
--color-navy-deep
Primary text and dark surfaces
- #091F6C
Harbor Blue
--color-harbor
Large color blocks
- #5A6488
Muted Blue
--color-fg-muted
Secondary text
- #FF6224
Orange
--color-orange
Brand action and selection
- #E5501A
Orange Deep
--color-orange-deep
Orange hover and pressed state
- #85E5E5
Turquoise
--color-turquoise
Accent on dark grounds
- #5F8C82
Patina
--color-patina
Maritime secondary
- #9FC4BB
Patina Soft
--color-patina-soft
Patina on dark grounds
- #FFFFFF
White
--color-bg
App and content ground
- #F4F6FA
Paper
--color-paper
Section surface
- #EEF1F7
Surface
--color-surface
Raised surface
- #E1E5EE
Hairline
--color-hairline
Borders and dividers
- rgba(238,241,246,0.16)
Hairline on Dark
--color-hairline-on-dark
Borders on dark surfaces
Typography
Display
- Typeface
- Overpass
- Weight
- 800 (Extra bold)
- Size
- 44–104px, scales with viewport
- Line height
- 0.94
- Letter spacing
- −0.038em
The waterfront
Heading 2
- Typeface
- Overpass
- Weight
- 800 (Extra bold)
- Size
- 30–60px, scales with viewport
- Letter spacing
- −0.038em
Forty miles, one path
Heading 3
- Typeface
- Overpass
- Weight
- 700 (Bold)
- Size
- 20px
A public right of way
Lede
- Typeface
- Overpass
- Weight
- 400 (Regular)
- Size
- 18px, 21px from medium screens
- Line height
- 1.625 (Relaxed)
A continuous public path along the city's edge.
Body
- Typeface
- Overpass
- Weight
- 400 (Regular)
- Size
- 16px
- Line height
- 1.625 (Relaxed)
The Harborwalk connects parks, piers, and plazas.
Eyebrow
- Typeface
- Overpass
- Weight
- 600 (Semibold)
- Size
- 12px
- Letter spacing
- 0.16em
- Case
- Uppercase
Why you can walk here
Component library
Each component lists its visual variants; select a component's header to expand or collapse it. States and sizes appear inside each variant, and every variant has its own WCAG 2.2 checks grouped by semantics, keyboard and focus, contrast, target size, and manual verification. Hover, focus, and pressed states are live: interact with the examples.
Lets people take an action, such as submitting a form, starting a task, or moving to the next step.
Compact, selectable pills for filtering content, switching between categories, or showing which filters are applied.
Filter chip
Toggles a filter on or off. Multi-select within a labelled ChipGroup.
InteractiveClick or press Space/Enter to toggle.
StatesHover and focus are live.
Sizes
Accessibility checks10 pass · 4 fail · 2 not tested
Semantics
- PASSName, role, and stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Native <button> with aria-pressed reflecting selection (source review).
ChipGroup has role="group" and an aria-label describing the filter set (source review).
Keyboard & focus
- PASSKeyboard operationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Each chip is a native button; Space and Enter toggle it (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
A 2px Primary Blue outline with 2px offset is applied on :focus-visible (source review).
Contrast
Dark Blue (#000D3A) on White is 18.77:1 (computed).
- PASSRest borderWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Hairline (#E1E5EE) on White is 1.26:1, but the text label identifies the control, so the boundary is not required (per Understanding 1.4.11).
- FAILSelected textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
White on Orange (#FF6224) is 2.99:1, below 4.5:1 (computed).
- FAILSelected hover textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
White on Orange Deep (#E5501A) is 3.82:1, below 4.5:1 (computed).
- FAILSelected indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Orange fill is the only visual state cue and is 2.99:1 against White, just below 3:1 (computed). A check icon on selection would fix this.
- FAILState not by color aloneWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
Selected and rest differ only in fill and text color, with 2.99:1 between them. Add a non-color cue (icon or weight) to pass.
Inactive controls are exempt from contrast requirements. Do not use disabled styling for content users need to read.
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
Target size
32px high, above the 24 × 24 CSS px minimum (source review).
36px high, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify each chip announces as a toggle button with pressed / not pressed in VoiceOver and NVDA.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Chips have fixed heights; verify labels are not clipped at 200% text size.
Category chip
Navigates between categories. Render links with asChild; mark the active one aria-current="page".
ExampleLinks; hover and focus are live.
Accessibility checks8 pass · 4 fail · 1 not tested
Semantics
- PASSNavigation landmarkWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Wrapped in <nav aria-label> with a list of links (source review).
- PASSCurrent categoryWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The active link has aria-current="page" (source review).
Keyboard & focus
- PASSKeyboard operationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Native anchors activate with Enter (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
A 2px Primary Blue outline with 2px offset is applied on :focus-visible (source review).
Contrast
Dark Blue (#000D3A) on White is 18.77:1 (computed).
- PASSRest borderWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Hairline (#E1E5EE) on White is 1.26:1, but the text label identifies the control, so the boundary is not required (per Understanding 1.4.11).
- FAILCurrent textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
White on Orange (#FF6224) is 2.99:1, below 4.5:1 (computed).
- FAILCurrent hover textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
White on Orange Deep (#E5501A) is 3.82:1, below 4.5:1 (computed).
- FAILCurrent indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Orange fill is the only visual state cue and is 2.99:1 against White, just below 3:1 (computed). A check icon on selection would fix this.
- FAILState not by color aloneWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
Selected and rest differ only in fill and text color, with 2.99:1 between them. Add a non-color cue (icon or weight) to pass.
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
Target size
36px high, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
Removable chip
Shows an applied filter; activating it removes the filter.
InteractiveRemoving a chip moves focus to the next one.
Accessibility checks10 pass · 0 fail · 2 not tested
Semantics
- PASSSpecific accessible nameWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Each chip is a button named "Remove {filter}" via visually hidden text, not a generic "Remove filter" (source review).
- PASSLabel in nameWCAG 2.2 SC 2.5.3 Label in Name (opens in a new tab)
The visible filter label is contained in the accessible name, so speech commands like "click Seating" work (source review).
- PASSDecorative icon hiddenWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
The X icon is aria-hidden (source review).
Keyboard & focus
- PASSKeyboard operationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Native buttons activate with Enter and Space (source review).
- PASSFocus after removalWCAG 2.2 SC 2.4.3 Focus Order (opens in a new tab)
Focus moves to the neighbouring chip, or to the group when none remain (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
A 2px Primary Blue outline with 2px offset is applied on :focus-visible (source review).
Contrast
Dark Blue (#000D3A) on White is 18.77:1 (computed).
- PASSRest borderWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Hairline (#E1E5EE) on White is 1.26:1, but the text label identifies the control, so the boundary is not required (per Understanding 1.4.11).
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
Target size
36px high, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify removal is perceivable; consider announcing the updated result count in a status region.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
Collects information from people, with a clear label, optional guidance, and feedback when something needs fixing.
Text input
Single-line text. Use type email, password, search, tel, or url as appropriate, with matching autocomplete values.
Anatomy
We'll send your route confirmation here.
Enter a full email address, like name@example.com.
- Label
- Names the field and stays visible while typing. Don't rely on placeholder text instead.
- Required marker
- Flags fields that must be filled in. Explain it once at the top of the form: “Fields marked * are required.”
- Helper text
- Optional guidance, such as the expected format or why we're asking.
- Error message
- Shown when the value needs fixing. Say what to do, not just what went wrong.
StatesClick or Tab into a field to see focus.
Enter a full email address, like name@example.com.
Accessibility checks14 pass · 3 fail · 5 not tested
Semantics
- PASSProgrammatic labelWCAG 2.2 SC 3.3.2 Labels or Instructions (opens in a new tab)
FieldLabel is associated with the control through htmlFor and id (source review).
- PASSHelper and error text associatedWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Helper text and error text are referenced from the control's aria-describedby (source review).
- PASSInvalid stateWCAG 2.2 SC 3.3.1 Error Identification (opens in a new tab)
aria-invalid is set and the error is described in text, not by color alone (source review).
- PASSDisabled stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Uses the native disabled attribute (source review).
- PASSRequired stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The required attribute exposes required state; the visual asterisk is aria-hidden (source review).
- PASSRead-only stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Uses the native readonly attribute (source review).
Keyboard & focus
- PASSKeyboard operationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Native <input> (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
On :focus-visible the border turns Dark Blue and a 1px ring of the same color makes it 2px thick (source review).
Contrast
- PASSLabel and value textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Dark Blue (#000D3A) on White is 18.77:1 (computed).
- PASSPlaceholder and helper textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue (#5A6488) on White is 5.81:1 (computed).
Orange Deep (#E5501A) on White is 3.82:1, below 4.5:1 (computed).
- FAILField boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Hairline (#E1E5EE) on White is 1.26:1. An empty field needs a visible boundary to be identified, so 3:1 applies (computed).
- PASSInvalid boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Orange Deep border on White is 3.82:1, above 3:1 (computed).
Inactive controls are exempt from contrast requirements. Do not use disabled styling for content users need to read.
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Dark Blue (#000D3A) focus border is 18.77:1 against White and 14.88:1 against the Hairline rest border (computed).
- FAILRequired indicatorWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Orange Deep asterisk on White is 3.82:1, below 4.5:1 (computed).
Target size
44px high CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify label, helper text, invalid state, and error text are announced in VoiceOver and NVDA.
- NOT TESTEDErrors announced on submitWCAG 2.2 SC 4.1.3 Status Messages (opens in a new tab)
FieldError is static text. Forms must move focus to, or announce, errors after submission.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
- NOT TESTEDRead-only distinguishableWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Read-only fields currently look identical to editable ones. Verify this is understandable in context.
Textarea
Multi-line text. Grows with content.
StatesClick or Tab into a field to see focus.
Add a few more words — at least 10 characters.
Accessibility checks13 pass · 2 fail · 4 not tested
Semantics
- PASSProgrammatic labelWCAG 2.2 SC 3.3.2 Labels or Instructions (opens in a new tab)
FieldLabel is associated with the control through htmlFor and id (source review).
- PASSHelper and error text associatedWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Helper text and error text are referenced from the control's aria-describedby (source review).
- PASSInvalid stateWCAG 2.2 SC 3.3.1 Error Identification (opens in a new tab)
aria-invalid is set and the error is described in text, not by color alone (source review).
- PASSDisabled stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Uses the native disabled attribute (source review).
- PASSRead-only stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Uses the native readonly attribute (source review).
Keyboard & focus
- PASSKeyboard operationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Native <textarea> (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
On :focus-visible the border turns Dark Blue and a 1px ring of the same color makes it 2px thick (source review).
Contrast
- PASSLabel and value textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Dark Blue (#000D3A) on White is 18.77:1 (computed).
- PASSPlaceholder and helper textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue (#5A6488) on White is 5.81:1 (computed).
Orange Deep (#E5501A) on White is 3.82:1, below 4.5:1 (computed).
- FAILField boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Hairline (#E1E5EE) on White is 1.26:1. An empty field needs a visible boundary to be identified, so 3:1 applies (computed).
- PASSInvalid boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Orange Deep border on White is 3.82:1, above 3:1 (computed).
Inactive controls are exempt from contrast requirements. Do not use disabled styling for content users need to read.
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Dark Blue (#000D3A) focus border is 18.77:1 against White and 14.88:1 against the Hairline rest border (computed).
Target size
64px minimum height CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify label, helper text, invalid state, and error text are announced in VoiceOver and NVDA.
- NOT TESTEDErrors announced on submitWCAG 2.2 SC 4.1.3 Status Messages (opens in a new tab)
FieldError is static text. Forms must move focus to, or announce, errors after submission.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
Select
Choose one option from a short list.
StatesClick or Tab into a field to see focus.
Choose a path surface to continue.
SizesOpen with Enter, Space, or arrow keys.
Accessibility checks15 pass · 3 fail · 4 not tested
Semantics
- PASSProgrammatic labelWCAG 2.2 SC 3.3.2 Labels or Instructions (opens in a new tab)
FieldLabel is associated with the control through htmlFor and id (source review).
- PASSHelper and error text associatedWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Helper text and error text are referenced from the control's aria-describedby (source review).
- PASSInvalid stateWCAG 2.2 SC 3.3.1 Error Identification (opens in a new tab)
aria-invalid is set and the error is described in text, not by color alone (source review).
- PASSDisabled stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Uses the native disabled attribute (source review).
- PASSRole and valueWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The trigger exposes combobox role and the selected value; options use listbox semantics (Radix, source review).
Keyboard & focus
- PASSKeyboard operationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Radix Select supports Enter/Space/arrows to open, arrows and type-ahead to move, Enter to select, and Escape to close (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
On :focus-visible the border turns Dark Blue and a 1px ring of the same color makes it 2px thick (source review).
- FAILFocused option visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
The highlighted option uses Paper (#F4F6FA) on White, 1.08:1 (computed); the focused option is barely distinguishable.
Contrast
- PASSLabel and value textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Dark Blue (#000D3A) on White is 18.77:1 (computed).
- PASSPlaceholder and helper textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue (#5A6488) on White is 5.81:1 (computed).
Orange Deep (#E5501A) on White is 3.82:1, below 4.5:1 (computed).
- FAILField boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Hairline (#E1E5EE) on White is 1.26:1. An empty field needs a visible boundary to be identified, so 3:1 applies (computed).
- PASSInvalid boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Orange Deep border on White is 3.82:1, above 3:1 (computed).
Inactive controls are exempt from contrast requirements. Do not use disabled styling for content users need to read.
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Dark Blue (#000D3A) focus border is 18.77:1 against White and 14.88:1 against the Hairline rest border (computed).
Target size
- PASSSmall triggerWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
40px high CSS px, above the 24 × 24 CSS px minimum (source review).
- PASSDefault triggerWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
44px high CSS px, above the 24 × 24 CSS px minimum (source review).
About 28px high CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify label, helper text, invalid state, and error text are announced in VoiceOver and NVDA.
- NOT TESTEDErrors announced on submitWCAG 2.2 SC 4.1.3 Status Messages (opens in a new tab)
FieldError is static text. Forms must move focus to, or announce, errors after submission.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
Lets people turn a single option on or off, or choose any number of options from a list.
Default
StatesFocus and toggling are live.
Accept the terms to continue.
Group
Accessibility checks12 pass · 2 fail · 2 not tested
Semantics
- PASSRole and checked stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Radix renders role=checkbox with aria-checked true, false, or mixed for indeterminate (source review).
- PASSProgrammatic labelWCAG 2.2 SC 3.3.2 Labels or Instructions (opens in a new tab)
Each checkbox is labelled through htmlFor and id (source review).
Groups use <fieldset> and <legend> (source review).
- PASSInvalid stateWCAG 2.2 SC 3.3.1 Error Identification (opens in a new tab)
aria-invalid is set and the error text is referenced with aria-describedby (source review).
Keyboard & focus
- PASSKeyboard operationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Radix Checkbox toggles with Space; each checkbox is a separate tab stop (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
A 2px Primary Blue outline with 2px offset is applied on :focus-visible (source review).
Contrast
- FAILUnchecked boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Hairline (#E1E5EE) border on White is 1.26:1, below 3:1 (computed).
- PASSChecked and indeterminateWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue fill on White is 11.96:1; the White mark on Primary Blue is 11.96:1 (computed).
- PASSInvalid boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Orange Deep border on White is 3.82:1 (computed).
Orange Deep on White is 3.82:1, below 4.5:1 (computed).
Dark Blue on White is 18.77:1 (computed).
Inactive controls are exempt from contrast requirements. Do not use disabled styling for content users need to read.
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
Target size
40 × 32 (16px box with an expanded hit area); the label is also clickable CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify checked, unchecked, mixed, and invalid states and the group legend are announced.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
Turns a setting on or off, with the change taking effect immediately.
Default
StatesFocus and toggling are live.
Sizes
Settings row
Get notified when a saved route is closed.
Accessibility checks10 pass · 2 fail · 2 not tested
Semantics
- PASSRole and stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Radix renders role=switch with aria-checked (source review).
- PASSProgrammatic label and descriptionWCAG 2.2 SC 3.3.2 Labels or Instructions (opens in a new tab)
Labelled through htmlFor and id; the settings row description is referenced with aria-describedby (source review).
Keyboard & focus
- PASSKeyboard operationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Radix Switch toggles with Space and Enter (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
A 2px Primary Blue outline with 2px offset is applied on :focus-visible (source review).
Contrast
Hairline (#E1E5EE) track on White is 1.26:1, below 3:1 (computed).
White thumb on the Hairline track is 1.26:1, below 3:1 (computed).
- PASSOn track and thumbWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue track on White, and the White thumb on Primary Blue, are both 11.96:1 (computed).
- PASSState not color aloneWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
Thumb position changes between off and on in addition to color (source review).
Inactive controls are exempt from contrast requirements. Do not use disabled styling for content users need to read.
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
Target size
About 60 × 36 including the expanded hit area CSS px, above the 24 × 24 CSS px minimum (source review).
About 48 × 30 including the expanded hit area CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify on/off state changes are announced with the label and description.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
A short label that highlights the status or category of an item at a glance.
Solid
Strongest status, such as a confirmed designation. Dark Blue fill.
ExamplesNon-interactive; no states.
Accessibility checks3 pass · 0 fail · 2 not tested
Semantics
- PASSMeaning in textWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
Every badge has a visible text label, so meaning does not depend on color or border style (source review).
- PASSStatic contentWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Rendered as a <span> with no interactive role. Use Chip for anything selectable or removable (source review).
Contrast
White on Dark Blue (#000D3A) is 18.77:1 (computed).
Manual verification
- NOT TESTEDDynamic status changesWCAG 2.2 SC 4.1.3 Status Messages (opens in a new tab)
If a badge's text changes without a page load, the consuming feature must announce it through a status region.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Badges have a fixed 20px height with overflow hidden; verify 11px uppercase text is not clipped at 200% text size.
Outline
Neutral metadata. Hairline border.
ExamplesNon-interactive; no states.
Accessibility checks4 pass · 0 fail · 2 not tested
Semantics
- PASSMeaning in textWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
Every badge has a visible text label, so meaning does not depend on color or border style (source review).
- PASSStatic contentWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Rendered as a <span> with no interactive role. Use Chip for anything selectable or removable (source review).
Contrast
Dark Blue on White is 18.77:1 (computed).
Hairline (#E1E5EE) on White is 1.26:1. The border is decorative: the text identifies the badge and it is not a control.
Manual verification
- NOT TESTEDDynamic status changesWCAG 2.2 SC 4.1.3 Status Messages (opens in a new tab)
If a badge's text changes without a page load, the consuming feature must announce it through a status region.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Badges have a fixed 20px height with overflow hidden; verify 11px uppercase text is not clipped at 200% text size.
Dashed
Provisional status, such as under construction. Dashed Dark Blue border.
ExamplesNon-interactive; no states.
Accessibility checks4 pass · 0 fail · 2 not tested
Semantics
- PASSMeaning in textWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
Every badge has a visible text label, so meaning does not depend on color or border style (source review).
- PASSStatic contentWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Rendered as a <span> with no interactive role. Use Chip for anything selectable or removable (source review).
Contrast
Dark Blue on White is 18.77:1 (computed).
Dark Blue on White is 18.77:1. The border is decorative: the text identifies the badge and it is not a control.
Manual verification
- NOT TESTEDDynamic status changesWCAG 2.2 SC 4.1.3 Status Messages (opens in a new tab)
If a badge's text changes without a page load, the consuming feature must announce it through a status region.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Badges have a fixed 20px height with overflow hidden; verify 11px uppercase text is not clipped at 200% text size.
Muted
De-emphasised or unknown status. Muted Blue text and border.
ExamplesNon-interactive; no states.
Accessibility checks4 pass · 0 fail · 2 not tested
Semantics
- PASSMeaning in textWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
Every badge has a visible text label, so meaning does not depend on color or border style (source review).
- PASSStatic contentWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Rendered as a <span> with no interactive role. Use Chip for anything selectable or removable (source review).
Contrast
Muted Blue (#5A6488) on White is 5.81:1 (computed).
Muted Blue on White is 5.81:1. The border is decorative: the text identifies the badge and it is not a control.
Manual verification
- NOT TESTEDDynamic status changesWCAG 2.2 SC 4.1.3 Status Messages (opens in a new tab)
If a badge's text changes without a page load, the consuming feature must announce it through a status region.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Badges have a fixed 20px height with overflow hidden; verify 11px uppercase text is not clipped at 200% text size.
Draws attention to important information, such as updates, warnings, or problems that need attention.
Default
Informational.
Anatomy
Accessibility checks8 pass · 0 fail · 2 not tested
Semantics
- PASSRole matches urgencyWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Alert sets no role by default. Static examples have none; live roles are opt-in (see the usage section) (source review).
- PASSDecorative icon hiddenWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
Icons are aria-hidden; the title carries the meaning (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Title precedes description, and the action follows in source order (source review).
Contrast
The Hairline border is decorative; the alert is not a control (source review).
Dark Blue on White is 18.77:1 (computed).
- PASSDescriptionWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue on White is 5.81:1 (computed).
Dark Blue icon on White is 18.77:1 (computed).
Manual verification
- PASSAction does not overlap textWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
The action sits in its own grid column, so the title and description never sit underneath it. It stacks below the text under 640px (verified at 320px).
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
Destructive
Errors and closures.
Anatomy
Accessibility checks7 pass · 2 fail · 2 not tested
Semantics
- PASSRole matches urgencyWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Alert sets no role by default. Static examples have none; live roles are opt-in (see the usage section) (source review).
- PASSDecorative icon hiddenWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
Icons are aria-hidden; the title carries the meaning (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Title precedes description, and the action follows in source order (source review).
- PASSMeaning not color aloneWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
Severity is stated in the title text and icon, not only by color (source review).
Contrast
The Hairline border is decorative; the alert is not a control (source review).
Orange Deep (#E5501A) on White is 3.82:1, below 4.5:1 (computed).
- FAILDescriptionWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Orange Deep at 90% opacity on White is 3.37:1, below 4.5:1 (computed).
Orange Deep icon on White is 3.82:1, above 3:1 (computed).
Manual verification
- PASSAction does not overlap textWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
The action sits in its own grid column, so the title and description never sit underneath it. It stacks below the text under 640px (verified at 320px).
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
Usage: announcing alerts
- Static — present on page load. No role, or
role="note". - Polite update — wrap in a persistent
role="status"region that exists before the message is inserted. Covers WCAG 2.2 SC 4.1.3 Status Messages. - Urgent — use a persistent
role="alert"region only for time-sensitive problems; it interrupts the screen reader.
Status: NOT TESTED — confirm announcements in VoiceOver and NVDA.
Groups related content about a single subject, such as a place, a story, or a feature, and can link to more detail.
Default
Header (title, description, action) · Content · Footer. Use Small spacing for dense lists.
Spacing
Accessibility checks8 pass · 0 fail · 2 not tested
Semantics
- PASSHeading structureWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
CardTitle renders the consumer's heading element through asChild (h5 here) (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Media, header, content, and footer follow source order (source review).
- PASSIcon action has a nameWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The icon-only action has a specific aria-label (source review).
Contrast
Dark Blue on White is 18.77:1 (computed).
- PASSDescription and body textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue on White is 5.81:1 (computed).
- PASSCard boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Hairline border (1.26:1) is decorative; a card is not a control (source review).
- PASSFooter textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue on the Surface 50% footer is 5.47:1 (computed).
Target size
Footer and header actions are 40px high, above the 24px minimum (source review).
Manual verification
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
Project card
Media with a contrast-safe tag, orange eyebrow, display title, clamped description, and an arrow CTA.
Media statesThe badge treatment stays legible with or without a photo.
Accessibility checks16 pass · 1 fail · 5 not tested
Semantics
- PASSHeading structureWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
CardTitle renders the consumer's heading element through asChild (h5 here) (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Media, header, content, and footer follow source order (source review).
- NOT TESTEDMedia alternative textWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
Placeholders here are aria-hidden. Production images are decorative when the title names the subject (alt=""); give informative images a meaningful alt.
- PASSConcise link nameWCAG 2.2 SC 2.4.4 Link Purpose (In Context) (opens in a new tab)
Only the title is a link, so its name is the title rather than all card text. The arrow CTA is aria-hidden to avoid a redundant "Explore" announcement (source review).
Keyboard & focus
- PASSSingle tab stopWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
One native <a href>; the card itself is not focusable (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
The card shows a 2px Primary Blue outline when its link has keyboard focus (source review).
Contrast
Dark Blue on White is 18.77:1 (computed).
- PASSDescription and body textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue on White is 5.81:1 (computed).
- PASSCard boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Hairline border (1.26:1) is decorative; a card is not a control (source review).
- PASSMedia tag textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
The CardMediaTag uses the Badge muted treatment: Muted Blue (#5A6488) on its opaque White fill is 5.81:1 (computed).
- PASSMedia tag separation on the empty surfaceWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
On the Muted Surface (#EEF1F7) empty-media fallback, the Muted Blue outline is 5.14:1 and the White badge fill is 1.17:1 (computed). The contrasting outline keeps the badge boundary visible.
- PASSMedia tag on photographyWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The opaque White badge and Muted Blue outline remain visible on light photography; the White fill contrasts 18.77:1 against Navy Deep on dark photography (computed).
- FAILEyebrow textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Orange (#FF6224) 12px on White is 2.99:1, below 4.5:1 (computed).
Dark Blue on White is 18.77:1 (computed).
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
- PASSLink identified without colorWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
The title is not inline in a text block; the card's arrow CTA, pointer cursor, hover shadow, and hover underline identify it as a link (source review).
Target size
- PASSTarget sizeWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
The stretched link covers the whole card (source review).
Manual verification
- PASSReduced motionWCAG 2.2 SC 2.3.3 Animation from Interactions (AAA) (opens in a new tab)
Media zoom and arrow nudge only run under motion-safe (source review). AAA criterion, recorded as best practice.
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify the link is announced once, with the title as its name, inside the heading.
- NOT TESTEDText selectionWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
The stretched link prevents selecting card text with a pointer. Confirm this is acceptable for the content.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
The description clamps to 3 lines; verify truncated text is available on the destination page.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
Post card
Media with tag, mono meta line, bold title, and clamped excerpt.
StatesHover and focus are live — Tab to the card.
Accessibility checks17 pass · 0 fail · 5 not tested
Semantics
- PASSHeading structureWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
CardTitle renders the consumer's heading element through asChild (h5 here) (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Media, header, content, and footer follow source order (source review).
- NOT TESTEDMedia alternative textWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
Placeholders here are aria-hidden. Production images are decorative when the title names the subject (alt=""); give informative images a meaningful alt.
- PASSMachine-readable dateWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
The date uses <time dateTime> (source review).
- PASSConcise link nameWCAG 2.2 SC 2.4.4 Link Purpose (In Context) (opens in a new tab)
Only the title is a link, so its name is the title rather than all card text. The arrow CTA is aria-hidden to avoid a redundant "Explore" announcement (source review).
Keyboard & focus
- PASSSingle tab stopWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
One native <a href>; the card itself is not focusable (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
The card shows a 2px Primary Blue outline when its link has keyboard focus (source review).
Contrast
Dark Blue on White is 18.77:1 (computed).
- PASSDescription and body textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue on White is 5.81:1 (computed).
- PASSCard boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Hairline border (1.26:1) is decorative; a card is not a control (source review).
- PASSMedia tag textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
The CardMediaTag uses the Badge muted treatment: Muted Blue (#5A6488) on its opaque White fill is 5.81:1 (computed).
- PASSMedia tag separation on the empty surfaceWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
On the Muted Surface (#EEF1F7) empty-media fallback, the Muted Blue outline is 5.14:1 and the White badge fill is 1.17:1 (computed). The contrasting outline keeps the badge boundary visible.
- PASSMedia tag on photographyWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The opaque White badge and Muted Blue outline remain visible on light photography; the White fill contrasts 18.77:1 against Navy Deep on dark photography (computed).
Muted Blue 12px on White is 5.81:1 (computed).
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
- PASSLink identified without colorWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
The title is not inline in a text block; the card's arrow CTA, pointer cursor, hover shadow, and hover underline identify it as a link (source review).
Target size
- PASSTarget sizeWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
The stretched link covers the whole card (source review).
Manual verification
- PASSReduced motionWCAG 2.2 SC 2.3.3 Animation from Interactions (AAA) (opens in a new tab)
Media zoom and arrow nudge only run under motion-safe (source review). AAA criterion, recorded as best practice.
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify the link is announced once, with the title as its name, inside the heading.
- NOT TESTEDText selectionWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
The stretched link prevents selecting card text with a pointer. Confirm this is acceptable for the content.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
The excerpt clamps to 3 lines; verify truncated text is available on the destination page.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
Featured post
Side-by-side media and body in wide containers, 24px radius, fluid title, orange CTA.
StatesHover and focus are live. Stacks below a 672px container.
Accessibility checks15 pass · 1 fail · 5 not tested
Semantics
- PASSHeading structureWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
CardTitle renders the consumer's heading element through asChild (h5 here) (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Media, header, content, and footer follow source order (source review).
- NOT TESTEDMedia alternative textWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
Placeholders here are aria-hidden. Production images are decorative when the title names the subject (alt=""); give informative images a meaningful alt.
- PASSConcise link nameWCAG 2.2 SC 2.4.4 Link Purpose (In Context) (opens in a new tab)
Only the title is a link, so its name is the title rather than all card text. The arrow CTA is aria-hidden to avoid a redundant "Explore" announcement (source review).
Keyboard & focus
- PASSSingle tab stopWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
One native <a href>; the card itself is not focusable (source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
The card shows a 2px Primary Blue outline when its link has keyboard focus (source review).
Contrast
Dark Blue on White is 18.77:1 (computed).
- PASSDescription and body textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue on White is 5.81:1 (computed).
- PASSCard boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Hairline border (1.26:1) is decorative; a card is not a control (source review).
- PASSMedia tag textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
The CardMediaTag uses the Badge muted treatment: Muted Blue (#5A6488) on its opaque White fill is 5.81:1 (computed).
- PASSMedia tag separation on the empty surfaceWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
On the Muted Surface (#EEF1F7) empty-media fallback, the Muted Blue outline is 5.14:1 and the White badge fill is 1.17:1 (computed). The contrasting outline keeps the badge boundary visible.
- PASSMedia tag on photographyWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The opaque White badge and Muted Blue outline remain visible on light photography; the White fill contrasts 18.77:1 against Navy Deep on dark photography (computed).
Orange (#FF6224) 13px on White is 2.99:1, below 4.5:1 (computed).
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
- PASSLink identified without colorWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
The title is not inline in a text block; the card's arrow CTA, pointer cursor, hover shadow, and hover underline identify it as a link (source review).
Target size
- PASSTarget sizeWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
The stretched link covers the whole card (source review).
Manual verification
- PASSReduced motionWCAG 2.2 SC 2.3.3 Animation from Interactions (AAA) (opens in a new tab)
Media zoom and arrow nudge only run under motion-safe (source review). AAA criterion, recorded as best practice.
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify the link is announced once, with the title as its name, inside the heading.
- NOT TESTEDText selectionWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
The stretched link prevents selecting card text with a pointer. Confirm this is acceptable for the content.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
The title scales with container width (26–42px); verify it still doubles at 200% text size.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
Coming soon
Placeholder for content that isn't available yet. Dashed border, transparent, not clickable.
ExampleStatic; no states.
Accessibility checks6 pass · 1 fail · 2 not tested
Semantics
- PASSHeading structureWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
CardTitle renders the consumer's heading element through asChild (h5 here) (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Media, header, content, and footer follow source order (source review).
- PASSStatus conveyed in textWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
"Coming 2026" states the status; the dashed border is supplementary (source review).
Contrast
Dark Blue on White is 18.77:1 (computed).
- PASSDescription and body textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue on White is 5.81:1 (computed).
- PASSCard boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Hairline border (1.26:1) is decorative; a card is not a control (source review).
- FAILEyebrow textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Orange (#FF6224) 12px on White is 2.99:1, below 4.5:1 (computed).
Manual verification
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
A shared page introduction with a headline and optional description, or custom content, over a decorative image or solid navy background.
Solid background
Used when image is null or the media is not an image. An omitted or empty subheadline renders no description.
Explore the waterfront
Stories and projects connecting Boston's neighborhoods to the harbor.
Climate
Accessibility checks6 pass · 0 fail · 3 not tested
Semantics
- PASSHeading structureWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
The standard headline defaults to h1. Embedded examples use headingAs="h5" under the variant heading; custom content supplies its own heading (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Meaningful content stays in source order. The image is behind the text and does not change reading order (source review).
- PASSNo missing-image placeholderWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
Null and non-image media render only the navy background; there is no image, tint, or placeholder to announce (source review).
Keyboard & focus
- PASSNo added tab stopsWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Hero adds no controls, tabindex, or keyboard handlers. Consumers must provide accessible links when using custom content (source review).
Contrast
- PASSHeadline and descriptionWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
White on Navy Deep (#000D3A) is 18.77:1 (computed).
Manual verification
- PASSResponsive layoutWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Browser checks at 320, 390, 768, 844 (landscape), 1024, and 1440px found no horizontal scrolling or clipped hero text, including the 173px-wide embedded examples.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
A 200% font-size simulation at the narrowest demo width did not clip text. Verify native browser text resizing to 200% separately.
- NOT TESTEDNative browser zoomWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify the page at native 400% browser zoom. Responsive viewport checks are not a substitute for this page-context check.
- NOT TESTEDScreen reader headings and backdropWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Verify the page headline is announced at the intended level, followed by its description, without an image announcement. Check custom breadcrumbs and labels in their page context.
Image background
The image fills the band behind the text. This deliberately white test image demonstrates the tint over the brightest possible photography without depending on the CMS.
Explore the waterfront
Stories and projects connecting Boston's neighborhoods to the harbor.
Accessibility checks7 pass · 0 fail · 3 not tested
Semantics
- PASSHeading structureWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
The standard headline defaults to h1. Embedded examples use headingAs="h5" under the variant heading; custom content supplies its own heading (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Meaningful content stays in source order. The image is behind the text and does not change reading order (source review).
- PASSDecorative backdropWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
The image always has alt="" and the tint is aria-hidden. Hero imagery must not be the only source of meaningful information (source review).
- PASSContainer-aware tintWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
The gradient starts at 64rem of hero width, not viewport width. Narrow embedded examples retain the uniform tint on desktop screens (source review).
Keyboard & focus
- PASSNo added tab stopsWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Hero adds no controls, tabindex, or keyboard handlers. Consumers must provide accessible links when using custom content (source review).
Contrast
- PASSHeadline and description over an imageWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Over pure white, the white large headline is at least 4.31:1 (3:1 required) and the 18px description is at least 5.41:1 (4.5:1 required) within their max-widths. A uniform 75% tint below 64rem hero width gives 8.76:1 (computed).
Manual verification
- PASSResponsive layoutWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Browser checks at 320, 390, 768, 844 (landscape), 1024, and 1440px found no horizontal scrolling or clipped hero text, including the 173px-wide embedded examples.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
A 200% font-size simulation at the narrowest demo width did not clip text. Verify native browser text resizing to 200% separately.
- NOT TESTEDNative browser zoomWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify the page at native 400% browser zoom. Responsive viewport checks are not a substitute for this page-context check.
- NOT TESTEDScreen reader headings and backdropWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Verify the page headline is announced at the intended level, followed by its description, without an image announcement. Check custom breadcrumbs and labels in their page context.
Custom content
Project metadata and a badge remain distinct over either a bright photograph or the solid navy fallback.
East Boston
A resilient waterfront
ResilienceEast Boston
A resilient waterfront
ResilienceAccessibility checks10 pass · 0 fail · 3 not tested
Semantics
- PASSHeading structureWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
The standard headline defaults to h1. Embedded examples use headingAs="h5" under the variant heading; custom content supplies its own heading (source review).
- PASSReading orderWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
Meaningful content stays in source order. The image is behind the text and does not change reading order (source review).
- PASSDecorative backdropWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
The image always has alt="" and the tint is aria-hidden. Hero imagery must not be the only source of meaningful information (source review).
Keyboard & focus
- PASSNo added tab stopsWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Hero adds no controls, tabindex, or keyboard handlers. Consumers must provide accessible links when using custom content (source review).
Contrast
- PASSHeadline and description over an imageWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Over pure white, the white large headline is at least 4.31:1 (3:1 required) and the 18px description is at least 5.41:1 (4.5:1 required) within their max-widths. A uniform 75% tint below 64rem hero width gives 8.76:1 (computed).
- PASSNeighborhood labelWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Turquoise (#85E5E5) in the max-w-xl column is at least 4.68:1 over a pure-white image, above 4.5:1. Keep custom content within this darker left column (computed).
- PASSBadge text on its surfaceWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Muted Blue (#5A6488) on the opaque White badge surface is 5.81:1 (computed).
- PASSBadge on the bright imageWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The Muted Blue outline on the pure-White image is 5.81:1, and the badge text has the same 5.81:1 contrast against its opaque White fill (computed).
- PASSBadge separation from the navy fallbackWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The opaque White badge fill against Navy Deep (#000D3A) is 18.77:1; its Muted Blue outline against the fallback is 3.23:1 (computed).
Manual verification
- PASSResponsive layoutWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Browser checks at 320, 390, 768, 844 (landscape), 1024, and 1440px found no horizontal scrolling or clipped hero text, including the 173px-wide embedded examples.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
A 200% font-size simulation at the narrowest demo width did not clip text. Verify native browser text resizing to 200% separately.
- NOT TESTEDNative browser zoomWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify the page at native 400% browser zoom. Responsive viewport checks are not a substitute for this page-context check.
- NOT TESTEDScreen reader headings and backdropWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Verify the page headline is announced at the intended level, followed by its description, without an image announcement. Check custom breadcrumbs and labels in their page context.
Usage and content constraints
Import Hero from @/components/hero. Blog and Climate landing pages use the same component directly; do not introduce a page-specific wrapper just to forward its props.
- Supply
headline, optionalsubHeadline, andimagefor a standard introduction. The headline renders ash1by default. UseheadingAsonly when embedding an example under another heading; a page should retain its single main heading. - Alternatively, supply
childrenandimagefor custom content. These modes are mutually exclusive. Hero still supplies the header, content container, spacing, white text, image, and tint. Use the existing muted Badge treatment for short metadata such as project type; its opaque White fill remains visible against either the Navy Deep fallback or a bright image. The consumer supplies appropriate headings, breadcrumb semantics, link names, and focus styles. - Keep standard text within its built-in measures:
max-w-3xlfor the large headline andmax-w-2xlfor the description. Keep custom content in a left-alignedmax-w-xlcolumn, especially small Turquoise labels. Text across the lighter right side of the gradient is not covered by these contrast results. Hero grows with its content and wraps long words rather than clipping them in narrow containers. - Images use the client-safe
CmsMediashape and are decorative, cropped withobject-cover, and loaded eagerly for above-the-fold use. Put meaningful visual information in the page body with an appropriate alternative. Null or non-image media use the solid background. - The pure-white image is an intentional contrast stress test, not a missing image placeholder. The same image and tint implementation is used in production. Assistive-technology and page-context checks remain necessary.
Visually divides content into distinct groups.
Default
Orientation
Harbor views
Nearby parks
Semantics
First group
Second group
Saved routes
Suggested routes
Accessibility checks3 pass · 0 fail · 1 not tested
Semantics
- PASSDecorative hiddenWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Decorative separators render role=none and are ignored by assistive technology (Radix, source review).
- PASSSemantic role and orientationWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
decorative={false} renders role=separator with aria-orientation for vertical (Radix, source review).
Contrast
- PASSDecorative lineWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Hairline on White is 1.26:1; decorative lines are exempt (computed).
- NOT TESTEDSemantic lineWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Hairline on White is 1.26:1 (computed). This fails 3:1 if the line is the only visual cue for the boundary; verify spacing or headings also convey it.
Switches between related views of content without leaving the page.
Default
Pill indicator on a Surface track.
OrientationStates: Overview is active, Hours inactive, Events disabled. Use arrow keys to move between tabs.
Accessibility checks9 pass · 1 fail · 2 not tested
Semantics
- PASSRoles and relationshipsWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Radix renders tablist, tab, and tabpanel with aria-selected and aria-controls; the tablist has an aria-label (source review).
- PASSDisabled tabWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The disabled tab uses the disabled attribute and is skipped by arrow keys (Radix, source review).
Keyboard & focus
- PASSArrow-key navigationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Left/Right (horizontal) or Up/Down (vertical) move between tabs; Tab moves into the panel (Radix, source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
A 2px Primary Blue outline with 2px offset is applied on :focus-visible (source review).
Contrast
- PASSActive textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Dark Blue on White is 18.77:1 (computed).
Inactive controls are exempt from contrast requirements. Do not use disabled styling for content users need to read.
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
- PASSInactive textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Dark Blue at 80% on Surface is 9.67:1 (computed).
- FAILSelected indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The White active pill on the Surface track is 1.13:1, below 3:1, and only a faint shadow adds distinction (computed).
Target size
44px high CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify tab position (e.g. 1 of 3), selected state, and panel association are announced.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
Line
Underline indicator, no track.
OrientationStates: Overview is active, Hours inactive, Events disabled. Use arrow keys to move between tabs.
Accessibility checks10 pass · 0 fail · 2 not tested
Semantics
- PASSRoles and relationshipsWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Radix renders tablist, tab, and tabpanel with aria-selected and aria-controls; the tablist has an aria-label (source review).
- PASSDisabled tabWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The disabled tab uses the disabled attribute and is skipped by arrow keys (Radix, source review).
Keyboard & focus
- PASSArrow-key navigationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Left/Right (horizontal) or Up/Down (vertical) move between tabs; Tab moves into the panel (Radix, source review).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
A 2px Primary Blue outline with 2px offset is applied on :focus-visible (source review).
Contrast
- PASSActive textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Dark Blue on White is 18.77:1 (computed).
Inactive controls are exempt from contrast requirements. Do not use disabled styling for content users need to read.
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
- PASSInactive textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Dark Blue at 80% on White is 10.60:1 (computed).
- PASSSelected indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The 2px Dark Blue indicator on White is 18.77:1 (computed).
Target size
44px high CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify tab position (e.g. 1 of 3), selected state, and panel association are announced.
- NOT TESTEDText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
Verify text and controls remain usable at 200% text size.
Displays content on top of the page, such as confirmations, supporting detail, or brief hints, without losing the current context.
Dialog · Default
Short confirmation or message with a single action.
StatesOpen the dialog, then press Tab and Escape.
Accessibility checks7 pass · 0 fail · 2 not tested
Semantics
- PASSName, role, and descriptionWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Radix renders role=dialog with aria-modal, labelled by the DialogTitle and described by its Description (source review).
- PASSClose button nameWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The icon close button has visually hidden text “Close” (source review).
Keyboard & focus
- PASSFocus moves in and returnsWCAG 2.2 SC 2.4.3 Focus Order (opens in a new tab)
Radix moves focus into the panel on open and back to the trigger on close (source review).
- PASSFocus contained, Escape closesWCAG 2.2 SC 2.1.2 No Keyboard Trap (opens in a new tab)
Focus is trapped while open and Escape always closes, so it is not a keyboard trap (Radix, source review).
Contrast
Dark Blue on White is 18.77:1; Muted Blue description is 5.81:1 (computed).
- PASSPanel boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The panel edge is decorative; the dim overlay and focus containment identify the modal (source review).
Target size
- PASSClose buttonWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
40 × 40 CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify title and description are announced on open and background content is not reachable.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
Dialog · With footer actions
Decision with a primary and a cancel action.
States
Accessibility checks8 pass · 0 fail · 3 not tested
Semantics
- PASSName, role, and descriptionWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Radix renders role=dialog with aria-modal, labelled by the DialogTitle and described by its Description (source review).
- PASSClose button nameWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The icon close button has visually hidden text “Close” (source review).
Keyboard & focus
- PASSFocus moves in and returnsWCAG 2.2 SC 2.4.3 Focus Order (opens in a new tab)
Radix moves focus into the panel on open and back to the trigger on close (source review).
- PASSFocus contained, Escape closesWCAG 2.2 SC 2.1.2 No Keyboard Trap (opens in a new tab)
Focus is trapped while open and Escape always closes, so it is not a keyboard trap (Radix, source review).
Contrast
Dark Blue on White is 18.77:1; Muted Blue description is 5.81:1 (computed).
- PASSPanel boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The panel edge is decorative; the dim overlay and focus containment identify the modal (source review).
Target size
- PASSClose buttonWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
40 × 40 CSS px, above the 24 × 24 CSS px minimum (source review).
- PASSFooter actionsWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
44px high CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify title and description are announced on open and background content is not reachable.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
- NOT TESTEDInitial focusWCAG 2.2 SC 2.4.3 Focus Order (opens in a new tab)
Radix focuses the first focusable element. For destructive confirmations, consider focusing Cancel first.
Dialog · Scrollable content
Long content scrolls inside the dialog while the header stays in view.
States
Accessibility checks8 pass · 0 fail · 3 not tested
Semantics
- PASSName, role, and descriptionWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Radix renders role=dialog with aria-modal, labelled by the DialogTitle and described by its Description (source review).
- PASSClose button nameWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The icon close button has visually hidden text “Close” (source review).
Keyboard & focus
- PASSFocus moves in and returnsWCAG 2.2 SC 2.4.3 Focus Order (opens in a new tab)
Radix moves focus into the panel on open and back to the trigger on close (source review).
- PASSFocus contained, Escape closesWCAG 2.2 SC 2.1.2 No Keyboard Trap (opens in a new tab)
Focus is trapped while open and Escape always closes, so it is not a keyboard trap (Radix, source review).
- PASSScrollable region reachableWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
The scroll container is focusable (tabIndex=0) with an aria-label, so keyboard users can scroll it (source review).
Contrast
Dark Blue on White is 18.77:1; Muted Blue description is 5.81:1 (computed).
- PASSPanel boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The panel edge is decorative; the dim overlay and focus containment identify the modal (source review).
Target size
- PASSClose buttonWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
40 × 40 CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify title and description are announced on open and background content is not reachable.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
- NOT TESTEDFocus not obscuredWCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum) (opens in a new tab)
Verify focused content inside the scroll area is not hidden behind the header.
Sheet
A side panel for supporting detail. Bottom placement suits mobile.
PlacementOpen each sheet, then press Escape.
Accessibility checks8 pass · 0 fail · 3 not tested
Semantics
- PASSName, role, and descriptionWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Radix renders role=dialog with aria-modal, labelled by the SheetTitle and described by its Description (source review).
- PASSClose button nameWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The icon close button has visually hidden text “Close” (source review).
Keyboard & focus
- PASSFocus moves in and returnsWCAG 2.2 SC 2.4.3 Focus Order (opens in a new tab)
Radix moves focus into the panel on open and back to the trigger on close (source review).
- PASSFocus contained, Escape closesWCAG 2.2 SC 2.1.2 No Keyboard Trap (opens in a new tab)
Focus is trapped while open and Escape always closes, so it is not a keyboard trap (Radix, source review).
Contrast
Dark Blue on White is 18.77:1; Muted Blue description is 5.81:1 (computed).
- PASSPanel boundaryWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
The panel edge is decorative; the dim overlay and focus containment identify the modal (source review).
Target size
- PASSClose buttonWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
40 × 40 CSS px, above the 24 × 24 CSS px minimum (source review).
- PASSFooter actionWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
44px high CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify title and description are announced on open and background content is not reachable.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
- NOT TESTEDReduced motionWCAG 2.2 SC 2.3.3 Animation from Interactions (AAA) (opens in a new tab)
The slide-in animation does not yet respond to prefers-reduced-motion. AAA criterion, recorded as best practice.
Tooltip
Short supplemental text on hover or focus. Never put essential information or interactive content in a tooltip.
PlacementHover or Tab to each trigger; press Escape to dismiss.
Accessibility checks6 pass · 0 fail · 2 not tested
Semantics
- PASSRole and associationWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Radix renders role=tooltip and links it to the trigger with aria-describedby while open (source review).
- PASSSupplemental onlyWCAG 2.2 SC 3.3.2 Labels or Instructions (opens in a new tab)
The trigger has its own visible label; the tooltip adds detail only (source review).
Keyboard & focus
- PASSOpens on focusWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
The tooltip opens when the trigger receives keyboard focus (Radix, source review).
- PASSDismissible, hoverable, persistentWCAG 2.2 SC 1.4.13 Content on Hover or Focus (opens in a new tab)
Escape dismisses without moving focus; the pointer can move onto the tooltip; it stays until dismissed or focus/hover leaves (Radix defaults, source review).
Contrast
White on Dark Blue is 18.77:1 (computed).
Target size
44px high CSS px, above the 24 × 24 CSS px minimum (source review).
Manual verification
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify the tooltip text is announced as the trigger's description.
- NOT TESTEDTouch accessWCAG 2.2 SC 1.4.13 Content on Hover or Focus (opens in a new tab)
Tooltips are not available on touch without a keyboard. Make sure the information is not needed or is available elsewhere.
An inline reference to a Harborwalk parcel that opens a small preview with a photo and the amenities found there.
Default
A parcel with recorded amenities.
In contextClick, tap, or press Enter on the parcel name; hover with a mouse; press Escape to close.
From the station, follow the river to and the locks beyond.
Closed (trigger in running text)Accessibility checks13 pass · 0 fail · 2 not tested
Semantics
- PASSTrigger name, role, and stateWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
A native button named by its visible text, with aria-haspopup="dialog" and aria-expanded reflecting the open state (verified in browser).
- PASSPreview name and roleWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
The preview is role="dialog" named by the parcel name via aria-label (verified in browser).
- PASSAmenities listWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Amenities are a ul labelled by the visible “Amenities” label (verified in browser).
- PASSPlaceholder photo hiddenWCAG 2.2 SC 1.1.1 Non-text Content (opens in a new tab)
The placeholder conveys no information and is aria-hidden (verified in browser).
- PASSNot distinguished by color aloneWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
The trigger differs from body text by a dotted underline, a map-pin icon, and semibold weight (source review).
Keyboard & focus
- PASSKeyboard operationWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Enter and Space open the preview and move focus into it; Escape closes it and returns focus to the trigger (verified in browser).
- PASSFocus visibleWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
A 2px solid Primary Blue outline with 2px offset renders on :focus-visible (verified in browser).
- PASSHover preview is dismissible, hoverable, persistentWCAG 2.2 SC 1.4.13 Content on Hover or Focus (opens in a new tab)
Mouse hover opens after 300 ms; the pointer can move onto the preview without it closing; Escape dismisses it; it closes 200 ms after the pointer leaves both (verified in browser).
Contrast
- PASSTrigger textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Primary Blue (#0F2B8E) on White is 11.96:1 (computed).
- PASSPreview textWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Dark Blue badge text on White is 18.77:1; the Muted Blue label is 5.81:1 (computed).
- PASSFocus indicatorWCAG 2.2 SC 1.4.11 Non-text Contrast (opens in a new tab)
Primary Blue (#0F2B8E) outline on White is 11.96:1, above 3:1 (computed).
Target size
The trigger sits in a sentence, so the inline exception applies; its line height is still about 26 CSS px (source review).
Manual verification
- PASSTouch accessWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
A tap opens the preview; tapping outside closes it. Hover behavior is limited to mouse pointers (verified in browser with touch emulation).
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify the trigger is announced as a collapsed button and the preview’s name and amenities are read after it opens.
- NOT TESTEDReflow at 320 CSS pxWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Verify no two-dimensional scrolling or loss of content at 320 CSS px width (400% zoom).
No amenities
A parcel with no amenities recorded yet.
In context
The path continues past .
Closed (trigger in running text)Accessibility checks1 pass · 0 fail · 0 not tested
Semantics
A “No amenities recorded yet.” message replaces the empty list (verified in browser).
Usage
- Use inside running text, such as articles, where a parcel is mentioned by name. The trigger keeps the surrounding words, so the sentence reads the same with or without the preview.
- The preview is a non-modal popover, not a tooltip, so it can later hold buttons such as directions or “View on map.” It opens on click, tap, Enter, or Space, and also on mouse hover as a shortcut.
- The photo is always a placeholder for now; the CMS has no parcel photo source yet.
An inline reference to selected Amenities, with a non-modal popover showing the authored type, neighborhood, and an ordered list.
Default
Names omit the leading Amenity type. Padded rows and decorative separators preserve editor order; each item has a map placeholder link.
In contextHover, click, tap, or press Enter/Space; press Escape to dismiss.
Rest at the .
Formatted triggerAccessibility checks13 pass · 0 fail · 2 not tested
Semantics
- PASSTrigger and preview semanticsWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Native button retains its visible words; Radix supplies expanded state and dialog role. The dialog is labelled by the visible type/neighborhood (source review).
- PASSOrder and relationshipsWCAG 2.2 SC 1.3.2 Meaningful Sequence (opens in a new tab)
A labelled ol renders the supplied items without sorting or filtering; the decorative map pin is hidden from assistive technology (source review).
- PASSRow separatorsWCAG 2.2 SC 1.3.1 Info and Relationships (opens in a new tab)
Existing Separator defaults to decorative. Three rows have two dividers and no exposed separator roles; row padding is 12px above the label and below the map placeholder (source review and Chromium checks on the live blog).
- PASSMap placeholdersWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Each item has a placeholder link whose accessible name includes the item and says the map is coming soon. The arrow is decorative (source review).
- PASSNot distinguished by color aloneWCAG 2.2 SC 1.4.1 Use of Color (opens in a new tab)
Dotted underline, map pin, and semibold weight distinguish the trigger (source review).
Keyboard & focus
- PASSKeyboard activation and focus returnWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
Enter and Space open the dialog; Tab reaches each map link; Escape dismisses it and returns focus to the trigger (Chromium keyboard automation on the catalog example).
- PASSHover persistence and dismissalWCAG 2.2 SC 1.4.13 Content on Hover or Focus (opens in a new tab)
Mouse hover opens the preview; moving onto its content keeps it open; leaving closes it. Clicking pins it open after leaving, and Escape dismisses it (Chromium pointer automation).
- PASSVisible focusWCAG 2.2 SC 2.4.7 Focus Visible (opens in a new tab)
Uses the Parcel trigger’s 2px solid ring outline with 2px offset; :focus-visible and solid outline confirmed after keyboard dismissal (source review and Chromium automation).
Contrast
- PASSText and focus contrastWCAG 2.2 SC 1.4.3 Contrast (Minimum) (opens in a new tab)
Trigger, heading, item text, and map links use existing palette pairs: Primary Blue on White is 11.96:1; Dark Blue is 18.77:1; Muted Blue is 5.81:1 (source review).
Target size
- PASSInline triggerWCAG 2.2 SC 2.5.8 Target Size (Minimum) (opens in a new tab)
Intended for running text, where the inline target exception applies (source review).
Manual verification
- PASSTouch activation and dismissalWCAG 2.2 SC 2.1.1 Keyboard (opens in a new tab)
A tap opens and an outside tap dismisses the preview at 390 × 844 with Chromium touch emulation. Hover is mouse-only (source review).
- NOT TESTEDScreen reader announcementWCAG 2.2 SC 4.1.2 Name, Role, Value (opens in a new tab)
Verify the formatted trigger, dialog title, numbered Amenities, and map placeholder links are announced with their item names and upcoming status.
- PASSResponsive reflowWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Live preview stays within viewport bounds with no page horizontal overflow at 320 × 800, 390 × 844, 844 × 390, 768 × 1024, and 1440 × 900 (Chromium geometry checks and screenshots).
- PASSText resize to 200%WCAG 2.2 SC 1.4.4 Resize Text (opens in a new tab)
At 320 CSS px with root font size doubled, preview content stays contained, button words wrap without splitting, and Escape dismisses it. The surrounding catalog page overflows horizontally even with this tooltip closed (Chromium automation).
- NOT TESTEDActual browser zoomWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
320 CSS px reflow and 200% root text scaling were checked; actual browser zoom at 200% and 400% still needs manual verification.
Long content and fallback names
Long names wrap; unnamed Custom Amenities use their custom type.
Content constraints
Accessibility checks1 pass · 0 fail · 0 not tested
Manual verification
- PASSLong content remains reachableWCAG 2.2 SC 1.4.10 Reflow (opens in a new tab)
Long name, Custom fallback, and map placeholders remain within the 844 × 390 viewport without horizontal overflow. Overflowing content can be scrolled with Page Down (Chromium automation and screenshot).
Usage
- Use in running text with meaningful trigger words. Children may include text formatting, but never nested links, buttons, or other interactive content.
- This is a non-modal popover, not a hover-only ARIA tooltip. Click, tap, Enter, and Space provide access; hover is a mouse-only shortcut.
- Supply authored type/neighborhood and normalized CMS Amenities. Do not reorder the items or reapply picker-time visibility filters. Leading “Type - ” prefixes are omitted from names; other text is preserved. Missing names fall back to type, Custom type, then “Amenity”; categories are shown only when provided. Rows have vertical padding and decorative horizontal separators between them.
- Blog rich text looks up the exact URL in tooltipReferences. Missing references and empty item arrays retain formatted plain text without a trigger.
- Width follows the Parcel preview; long content wraps and the preview scrolls within the available viewport height. No photo is included.
- Each “View on map” link points to
#as a placeholder. Replace it with the corresponding parcel destination when the map is available.