Scheduler - Accessibility
Keyboard, focus, screen reader, and overlay accessibility reference.
#Import
import { Scheduler } from '@primeui/vue-scheduler';#Keyboard
| Key | Surface | Behavior |
|---|---|---|
Tab | Page, toolbar, events, overlays | Moves to the next focusable control |
Shift + Tab | Page, toolbar, events, overlays | Moves to the previous focusable control |
| Arrow keys | Scheduler root and supported menus | Moves through supported scheduler or menu actions |
Enter | Events, dates, resources, menu items | Activates the focused item |
Space | Selectable events or controls | Toggles selection or activates a button |
Escape | Popovers, quick info, context menus, transient selection | Closes the active overlay or clears transient state |
Home / End | Grid-like surfaces | Moves to the first or last item where supported |
PageUp / PageDown | Scheduler root date navigation | Moves by the larger range where supported |
Nested controls keep their own keyboard behavior. A select, input, button group, or menu inside a custom toolbar should handle its keys without also moving Scheduler cell focus.
#Labels
Set ariaLabel on Scheduler.Root when the page contains more than one scheduler or when surrounding headings do not clearly identify the schedule.
<Scheduler.Root aria-label="Project planning calendar" />Use event titles that are meaningful on their own. If an event card uses color for status, also include status text or an icon with an accessible name.
#Focus
Do not remove focus rings from custom parts. When a custom event, resource row, or date surface changes the visible UI, keep focus styling at the same level as the default surface.
| Surface | Focus responsibility |
|---|---|
| Custom event UI | Preserve focus, selected, dragging, and resize state cues |
| Custom resource UI | Keep row toggle controls keyboard reachable |
| Custom toolbar | Use buttons or form controls with names |
| Month and year cells | Preserve date labels, today state, and selected state |
#Overlays
Scheduler provides dialog, menu, label, and Escape dismissal behavior for built-in overlays. Recurrence dialogs and adaptive resource selectors own focus placement and return. Quick info, event popovers, more popovers, and context menus should keep a visible close or dismissal path. Custom overlay bodies should avoid trapping focus unless they implement a complete modal interaction.
Overlays close on outside scroll so they do not remain visually detached from the Scheduler surface.
| Overlay | Notes |
|---|---|
| Quick info | Include event title, formatted time, and named edit or delete actions when actions are enabled |
| Event popover | Keep detail text readable without relying on hover |
| More popover | Make each overflow event reachable by keyboard |
| Context menu | Use menu item labels that describe the action |
#ARIA Ownership
Scheduler owns the ARIA relationships for its root, grid surfaces, and built-in overlays. Custom child parts own the labels and roles inside the markup they render.
| Custom part | Keep or provide |
|---|---|
| Event card | Event title, time text, selected state, and disabled state when present |
| Resource row | Resource name, expanded state, and toggle button label |
| Agenda date header | Date label and event count text |
| Toolbar action | Button name and pressed or selected state when relevant |
When a custom child outlet renders a native button, link, input, or menu item, keep the semantic element. When it renders a non-interactive wrapper, do not add tabindex unless keyboard activation is also implemented.
#Custom UI Checklist
- Keep event title and time text visible or available to assistive technology.
- Do not use color as the only indicator for priority, category, selected state, or invalid drop state.
- Keep keyboard access to edit, delete, menu, and booking actions.
- Return focus after closing custom dialogs opened from the schedule.
- Test custom parts in both light and dark themes. Focus and contrast can fail independently.