Accessibility

The admissions system is designed with accessibility in mind, supporting keyboard navigation, screen readers, and focus management. This article covers the accessibility features available and how to use them.

Keyboard Navigation

General Navigation

Key	Action
Tab	Move focus to the next interactive element
Shift + Tab	Move focus to the previous interactive element
Enter	Activate the focused button, link, or control
Escape	Close the currently open modal, dropdown, or popup
Space	Toggle checkboxes, switches, and expand/collapse elements

Table Navigation

Data tables support keyboard interaction:

Key	Action
Tab	Move between table cells and controls
Enter	Open a row's detail page (for clickable rows)
Space	Toggle row selection (in multi-select mode)

Modal Navigation

When a modal is open:

• Focus is trapped within the modal -- Tab cycles through modal controls only.
• Escape closes the modal.
• Focus returns to the element that opened the modal when it closes.

Sidebar Navigation

• Tab moves through sidebar menu items.
• Enter activates the focused menu item.
• The current page is indicated with a visual highlight and aria-current attribute.

Focus Management

Page Navigation

When navigating between pages, focus is moved to the main content area so keyboard users do not need to tab through the entire sidebar again.

Form Validation

When a form validation error occurs:

• Focus moves to the first field with an error.
• Error messages are announced to screen readers.
• The error field receives a visible focus ring.

Notifications

Toast notifications (success, error, warning) are announced to screen readers via ARIA live regions. They do not interrupt keyboard navigation.

Loading States

When content is loading:

• Loading spinners include ARIA labels describing what is loading.
• Focus is managed appropriately when content finishes loading.

Screen Reader Support

ARIA Labels

Interactive elements include descriptive ARIA labels:

• Buttons -- Action descriptions (e.g., "Create new lead", "Delete template").
• Icons -- Decorative icons are hidden from screen readers; functional icons have labels.
• Tables -- Tables include role="grid" and column headers with scope="col".
• Regions -- Scrollable regions include role="region" and aria-label attributes.

Landmarks

The page structure uses semantic HTML landmarks:

• <header> -- Page header with navigation.
• <nav> -- Sidebar navigation and form steppers.
• <main> -- Primary content area.
• <aside> -- Sidebar panels.

Status Messages

Dynamic content changes are communicated via:

• ARIA live regions for toast notifications.
• Status text updates in table toolbars (e.g., "5 of 42 contracts selected").
• Loading state announcements.

Visual Accessibility

Focus Indicators

All interactive elements display a visible focus ring when focused via keyboard:

• Buttons, links, and inputs show a colored focus ring.
• The focus ring color matches the brand theme (green or pink depending on context).

Color Contrast

• Text meets WCAG AA contrast ratios against its background.
• Status badges use both color and text labels to convey meaning (not color alone).
• Interactive elements have distinguishable hover and active states.

Text Sizing

• The interface uses relative font sizes that scale with browser text size settings.
• Increasing browser zoom to 200% maintains a usable layout.

Drag-and-Drop Alternatives

Several features use drag-and-drop (template reordering, calendar rescheduling, kanban board):

TIP

Drag-and-drop interactions are convenience features. Core actions (reordering, rescheduling) can also be performed through standard controls -- edit dialogs, dropdowns, and explicit save actions.

Tips for Keyboard Users

1. Use Escape frequently -- It closes modals, dropdowns, and popovers without losing your place.
2. Tab to interactive elements -- Non-interactive text is skipped during tab navigation.
3. Use Enter for row clicks -- In clickable data tables, Enter opens the selected row.
4. Check focus position -- If focus seems lost after an action, press Tab once to find the next interactive element.

Reporting Accessibility Issues

If you encounter accessibility barriers:

• Note the specific page, component, and action that was difficult.
• Describe your assistive technology (screen reader, keyboard-only, etc.).
• Contact your system administrator to report the issue.

Was this helpful?