Accessibility Guidelines
PrimeCal is built with accessibility as a core requirement, not an afterthought. This page covers what's built in and how to configure your calendar for the most accessible experience.
Keyboard Navigation
The entire calendar is operable without a mouse:
| Key | Action |
|---|---|
T | Jump to today |
← / → | Previous / next period |
M | Switch to Month view |
W | Switch to Week view |
N | Create a new event |
Escape | Close the open modal or panel |
Tab / Shift+Tab | Move between focusable elements |
Enter / Space | Activate the focused button or event |
See Keyboard Shortcuts for the complete list.
Touch Targets (Mobile)
All interactive elements in the mobile interface — buttons, list items, tab bar icons — meet a minimum 44×44px touch target, in line with WCAG AAA guidance. This benefits anyone with limited fine motor control, not just touchscreen users.
Color Contrast and Color Independence
PrimeCal's 16 theme colors were chosen for strong contrast against both light and dark backgrounds. That said, color should never be the only signal:
- Event titles and times are always shown as text, not implied by color alone.
- RSVP status uses icons (✅ ❌ ❓ ⏳) alongside color, so colorblind users can distinguish accepted/declined/pending without relying on hue.
- If you're colorblind, the Calendar Colors and Visibility guide can help you pick a palette with maximum distinguishability for your calendars.
Screen Reader Support
PrimeCal uses semantic HTML and ARIA labels throughout:
- Calendar grids are marked up as accessible tables with proper row/column headers for dates.
- Buttons and icon-only controls (like the event color picker) include descriptive
aria-labels. - Modals trap focus correctly and announce their title when opened, so screen reader users know what dialog they're in.
If you encounter a control that isn't announced properly, please report it — accessibility issues are treated as bugs, not feature requests.
Text Size and Zoom
PrimeCal's layout is built with relative units, so browser-level zoom (Ctrl/Cmd + +) and OS-level text scaling both work without breaking the calendar grid or causing overlapping text.
Reduced Motion
If your operating system has "reduce motion" enabled, PrimeCal respects that setting and skips non-essential animations (transitions, hover effects) while keeping all functionality intact.
Recommendations For Building an Accessible Workspace
- Use clear, descriptive event titles — screen reader users rely on the title far more than color or icons.
- Avoid cramming critical information only into the description field if it can go in the title or location instead — those fields get more prominent treatment by assistive tech.
- If you share calendars with others, ask whether your color choices work for their needs — a quick check is more reliable than guessing.