Guidelines
Accessibility
Every screen meets WCAG 2.2 AA. Recruiters live in Ascern all day, often on the keyboard, so these are working rules, not a final audit. Each section names what to check before a PR merges.
Guidelines
Accessibility
Every screen meets WCAG 2.2 AA. Recruiters live in Ascern all day, often on the keyboard, so these are working rules, not a final audit. Each section names what to check before a PR merges.
Contrast
Text needs 4.5:1 against its background. Edges a person must see to use a control (inputs, checkboxes, focus) need 3:1. Hairlines that only group content are decorative and have no minimum.
Maya Chen
color.text on surface
18.9:1
Senior Data Engineer
text.subtle on surface
6.3:1
Search candidates
text.subtlest on surface
4.9:1
Save changes
white on brand.bold
9.5:1
Selected row
brand on selected fill
8.3:1
Northwind is
a client
link vs ink: 2.0:1, so underline
rule
border.input (an edge you use)
3.2:1
border (decorative hairline)
1.2:1
Status pills, text on fill:
Overdue 5.5:1
Placed 6.0:1
Needs review 6.4:1
CV sent 5.4:1
Offer 6.2:1
Client meeting 5.9:1
Focus
Keyboard focus is always visible and always the same: a solid 2px brand ring with a 2px gap. It shows on keyboard use only (:focus-visible). Inputs show it as the edge turning 2px brand.
Save changes
Cancel
Northbridge Talent
Keyboard
Everything a mouse can do, the keyboard can do. Tab order follows reading order. Overlays trap focus and return it to the trigger when they close. A shortcut is shown in its tooltip.
Tab · Shift Tab
Next and previous control
Enter · Space
Activate; Space toggles checkboxes and switches
Escape
Close the open menu, popover, dialog or panel; cancel an edit
Arrow keys
Move inside menus, lists, tabs, radio groups and table cells
Enter in a cell
Start editing; Enter commits, Escape cancels, Tab moves on
⌘K · /
Command palette · search on the current list
?
Keyboard shortcuts sheet
Targets and text size
No target under 24 × 24px (WCAG 2.5.8). Controls are 28px; a 16px icon sits in a 28px button. Body text is 14px; 12px is for labels and meta only, never for sentences someone must read to act. Pages work at 200% zoom.
28 · control
24 · minimum
16 · only with 24px spacing around it
Screen readers
Use the native element first; add ARIA only where none exists. The ui components already carry their roles.
· One h1 per page, the page or record title. Headings in order.
· Every icon-only button has an aria-label that matches its tooltip.
· Every field has a visible label tied to it. Placeholders are never the label.
· Status is never colour alone: a pill always has its word, an error its text.
· Toasts and saved states announce politely (aria-live="polite"); a failed save announces assertively.
· Landmarks: nav for the sidebar, main for the page, a skip link to main as the first tab stop.
· Tables are real tables with column headers; sortable headers say their sort order.
· Images and logos have alt text; decorative art has empty alt.
· Every icon-only button has an aria-label that matches its tooltip.
· Every field has a visible label tied to it. Placeholders are never the label.
· Status is never colour alone: a pill always has its word, an error its text.
· Toasts and saved states announce politely (aria-live="polite"); a failed save announces assertively.
· Landmarks: nav for the sidebar, main for the page, a skip link to main as the first tab stop.
· Tables are real tables with column headers; sortable headers say their sort order.
· Images and logos have alt text; decorative art has empty alt.
Motion
Timings are on Motion.
· prefers-reduced-motion: movement and scale go; fades stay.
· Nothing flashes more than three times a second. Nothing auto-plays with sound.
· Text never moves while someone is reading it; new rows insert above the fold only on user action.
· Nothing flashes more than three times a second. Nothing auto-plays with sound.
· Text never moves while someone is reading it; new rows insert above the fold only on user action.
Before a PR merges
Design floor check 9 and 10 point here.
1. Do the change with the keyboard only, start to finish.
2. Check focus is visible on every stop and returns after overlays close.
3. Check new colour pairs against the contrast rules above.
4. Zoom to 200% and check nothing overlaps or hides.
5. Turn on reduced motion and check the change still reads.
6. Run the automated check in Playwright. axe-core is not installed yet; adding it is on the build list.
2. Check focus is visible on every stop and returns after overlays close.
3. Check new colour pairs against the contrast rules above.
4. Zoom to 200% and check nothing overlaps or hides.
5. Turn on reduced motion and check the change still reads.
6. Run the automated check in Playwright. axe-core is not installed yet; adding it is on the build list.