Aegix Global, LLC
One Web — VPAT 2.5
Last reviewed 2026-04-03VPAT 2.5 - Aegix One (Personal Safety Web App)
Product Information
| Field | Value |
|---|---|
| Product Name | Aegix One |
| Product Version | Current (as of 2026-04-07) |
| Product Description | Personal safety web application for event reporting, student monitoring, and safety notifications |
| Report Date | 2026-04-07 |
| Contact | Aegix Global |
| Evaluation Methods | Code review, static analysis against WCAG 2.1 AA criteria, eslint-plugin-jsx-a11y |
| Applicable Standards | WCAG 2.1 Level AA, Section 508 (Revised) |
Conformance Level Key
| Term | Description |
|---|---|
| Supports | The functionality of the product has at least one method that meets the criterion without known defects or meets with equivalent facilitation |
| Partially Supports | Some functionality of the product does not meet the criterion |
| Does Not Support | The majority of product functionality does not meet the criterion |
| Not Applicable | The criterion is not relevant to the product |
Table 1: WCAG 2.1 Report
Principle 1: Perceivable
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 1.1.1 Non-text Content (Level A) | Partially Supports | Logo images have alt text. Icon-only buttons (password toggles, export menu) now have aria-labels. Status badge color dots marked aria-hidden with adjacent text labels. Some decorative icons in EventCard lack explicit aria-hidden. |
| 1.2.1 Audio-only and Video-only (Level A) | Not Applicable | No audio or video content present in the application. |
| 1.2.2 Captions (Prerecorded) (Level A) | Not Applicable | No prerecorded audio/video content. |
| 1.2.3 Audio Description or Media Alternative (Level A) | Not Applicable | No prerecorded video content. |
| 1.2.4 Captions (Live) (Level AA) | Not Applicable | No live audio/video content. |
| 1.2.5 Audio Description (Level AA) | Not Applicable | No prerecorded video content. |
| 1.3.1 Info and Relationships (Level A) | Supports | Form inputs on Login, Register, ResetPassword, and Report pages now have proper elements with htmlFor associations. Error messages are linked via aria-describedby. Report category selector uses role="radiogroup" with role="radio" children. |
| 1.3.2 Meaningful Sequence (Level A) | Partially Supports | DOM order generally reflects visual order. Some stat card grids in EventDetail may not reflect logical reading order. |
| 1.3.3 Sensory Characteristics (Level A) | Supports | Status indicators now include text labels alongside color dots. Status timeline uses aria-labels describing completed/current/pending state. |
| 1.3.4 Orientation (Level AA) | Supports | Responsive design present; no orientation lock detected. |
| 1.3.5 Identify Input Purpose (Level AA) | Supports | All auth form inputs now include autoComplete attributes: email, current-password, new-password, given-name, family-name. |
| 1.4.1 Use of Color (Level A) | Supports | StudentStatusBadge color dots are marked aria-hidden with adjacent text labels. EventDetail status timeline dots include aria-label with status text (completed/current/pending). EventCard status badges include text labels. |
| 1.4.2 Audio Control (Level A) | Not Applicable | No auto-playing audio. |
| 1.4.3 Contrast (Minimum) (Level AA) | Supports | Theme tokens updated for AA compliance in both light and dark modes. Light mode: text.tertiary darkened to gray.700, text.action to teal.700, text.danger to red.700. Dark mode: text.danger to darkRed.200 (7.17:1), text.action to lightBlue.600 (6.90:1), text.reunification to purple.300 (6.69:1), text.drill to blue.400 (5.61:1). surface.menuSelect opacity increased from 8% to 15%. StatusBadge uses useColorModeValue for dark mode contrast (.300/.400 shades, all 5.6:1+). |
| 1.4.4 Resize Text (Level AA) | Supports | Chakra UI supports text resizing. Login card now uses responsive maxW={{ base: '100%', sm: '400px' }} to accommodate narrow viewports. |
| 1.4.5 Images of Text (Level AA) | Supports | No images of text detected; all text is rendered as HTML. |
| 1.4.10 Reflow (Level AA) | Supports | Login page maxW is now responsive (base: '100%', sm: '400px'). All layouts use responsive Chakra breakpoints. |
| 1.4.11 Non-text Contrast (Level AA) | Supports | Focus indicators now use 2px solid outlines with border-action color token, providing sufficient contrast against backgrounds. Interactive element borders meet 3:1 ratio. |
| 1.4.12 Text Spacing (Level AA) | Partially Supports | No explicit handling for increased line-height, word-spacing, or letter-spacing. Truncated text areas may clip content. |
| 1.4.13 Content on Hover or Focus (Level AA) | Partially Supports | No custom tooltip or hover content that would need to persist. Menu dropdowns follow Chakra’s accessible patterns. |
Principle 2: Operable
| Criteria | Conformance Level | Remarks and Explanations | |
|---|---|---|---|
| 2.1.1 Keyboard (Level A) | Supports | Password visibility toggles converted to elements. Report category buttons implement role="radio" with arrow key navigation. NotificationsDrawer items have role="button", tabIndex={0}, and Enter/Space key handlers. EventDetail student cards support keyboard expand/collapse. Export menu single-item button is now a semantic
. |
|
| 2.1.2 No Keyboard Trap (Level A) | Supports | Drawer and dialog components use Chakra's built-in focus management. Close buttons present on all overlays. Skip link available to bypass sidebar navigation. | |
| 2.1.4 Character Key Shortcuts (Level A) | Supports | No single-character keyboard shortcuts implemented. | |
| 2.2.1 Timing Adjustable (Level A) | Supports | No time limits imposed on user interactions. | |
| 2.2.2 Pause, Stop, Hide (Level A) | Supports | No auto-updating, moving, or blinking content. | |
| 2.3.1 Three Flashes or Below (Level A) | Supports | No flashing content detected. | |
| 2.3.3 Animation from Interactions (Level AAA) | Supports | Global prefers-reduced-motion CSS rule disables all animations and transitions when user preference is set. |
|
| 2.4.1 Bypass Blocks (Level A) | Supports | Skip-to-content link added as first focusable element in AppLayout. Main content area identified with id="main-content". Link becomes visible on focus. |
|
| 2.4.2 Page Titled (Level A) | Supports | Dynamic page titles implemented via useDocumentTitle hook on all 9 pages: Dashboard, Students, Events, Event Detail, Report, Sign In, Create Account, Reset Password, Verify Email. Titles follow "{Page} \ |
Aegix One" pattern. |
| 2.4.3 Focus Order (Level A) | Supports | Tab order follows logical DOM order. Skip link provides bypass. Radio group category selector follows standard arrow-key focus management. | |
| 2.4.4 Link Purpose (In Context) (Level A) | Partially Supports | EventCard links wrap entire cards — purpose clear from context. Some links use asChild pattern which may cause screen reader issues. |
|
| 2.4.5 Multiple Ways (Level AA) | Partially Supports | Navigation sidebar and direct URL access available. No search functionality or sitemap for alternative navigation. | |
| 2.4.6 Headings and Labels (Level AA) | Supports | Pages have descriptive headings. Form labels properly associated with inputs via htmlFor/id. Report category selector has aria-label. |
|
| 2.4.7 Focus Visible (Level AA) | Supports | Visible focus indicators restored across shared theme. Button recipe, checkbox recipe, radio recipe, sidebar links, dialog close button, export menu items, image lightbox, RowActionsMenu, TableOptions, select recipe, and searchInput recipe all display 2px solid focus outlines via _focusVisible styles. Global *:focus-visible CSS rule provides fallback. |
|
| 2.5.1 Pointer Gestures (Level A) | Supports | No complex multi-point or path-based gestures required. | |
| 2.5.2 Pointer Cancellation (Level A) | Supports | Standard click events used; activation on pointer up. | |
| 2.5.3 Label in Name (Level A) | Supports | Interactive controls have visible text matching accessible name. Icon-only buttons have descriptive aria-label attributes. |
|
| 2.5.4 Motion Actuation (Level A) | Not Applicable | No motion-based interactions. |
Principle 3: Understandable
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 3.1.1 Language of Page (Level A) | Supports | is present in index.html. |
| 3.1.2 Language of Parts (Level AA) | Supports | Application is in English throughout; no mixed-language content. |
| 3.2.1 On Focus (Level A) | Supports | No unexpected context changes on focus. |
| 3.2.2 On Input (Level A) | Supports | Input changes do not trigger unexpected context changes. Category selection in Report updates state visually but doesn’t change context. |
| 3.2.3 Consistent Navigation (Level AA) | Supports | Sidebar navigation is consistent across all pages. |
| 3.2.4 Consistent Identification (Level AA) | Supports | UI components are used consistently throughout. |
| 3.3.1 Error Identification (Level A) | Supports | Form error messages are associated with specific fields via aria-describedby. Invalid fields marked with aria-invalid={true}. Error messages wrapped in role="alert" elements for screen reader announcement. |
| 3.3.2 Labels or Instructions (Level A) | Supports | All form fields have proper HTML elements with htmlFor associations. Placeholder text provides additional context. |
| 3.3.3 Error Suggestion (Level AA) | Supports | Validation messages are descriptive and actionable (e.g., “Passwords do not match. Please re-enter your password in both fields.”, “Password must be at least 6 characters”, “Enter a valid email address”). |
| 3.3.4 Error Prevention (Legal, Financial, Data) (Level AA) | Partially Supports | Report submission does not yet include a confirmation dialog. Other forms use standard submit patterns with validation. |
Principle 4: Robust
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 4.1.1 Parsing (Level A) | Supports | React generates valid HTML. Form elements use unique IDs (prefixed by page: login-, register-, reset-, report-). |
| 4.1.2 Name, Role, Value (Level A) | Supports | Interactive elements now use proper semantic elements or ARIA roles. Password toggles use with aria-label. Report categories use role="radio" within role="radiogroup". Notification items use role="button". Student cards use role="button" with aria-expanded. Export menu single-item uses semantic
. |
| 4.1.3 Status Messages (Level AA) | Supports | Loading states use aria-live="polite" with role="status" containers and visually-hidden text ("Loading dashboard...", "Loading event details..."). Form errors use role="alert" with aria-live="assertive". General error banners use aria-live="assertive". |
Section 508 Functional Performance Criteria
| Criteria | Conformance Level | Remarks |
|---|---|---|
| 302.1 Without Vision | Supports | Form labels properly associated, error messages linked via aria-describedby, status announcements via ARIA live regions, text alternatives for all color-coded indicators. Dynamic page titles announce route changes. |
| 302.2 With Limited Vision | Supports | Text resizing works with responsive layouts. Color contrast improved across theme tokens in both light and dark modes. Focus indicators visible with 2px solid outlines on all interactive elements. Reduced-motion support available. |
| 302.3 Without Perception of Color | Supports | All status indicators include text labels alongside color. Timeline steps labeled as completed/current/pending. Event status badges include text. |
| 302.4 Without Hearing | Supports | No audio-dependent functionality. |
| 302.5 With Limited Hearing | Supports | No audio-dependent functionality. |
| 302.6 Without Speech | Supports | No speech input required. |
| 302.7 With Limited Manipulation | Supports | All interactive elements operable via keyboard. Focus indicators visible. Skip navigation available. Radio group supports arrow key navigation. |
| 302.8 With Limited Reach and Strength | Supports | Standard input methods supported. Full keyboard-only operation available. |
| 302.9 With Limited Language, Cognitive, and Learning Abilities | Supports | Interface is simple and consistent. Error messages are descriptive with suggestions for correction. Reduced-motion support available. |
Summary
Overall Conformance Level: Partially Supports WCAG 2.1 AA
The Aegix One application now substantially conforms to WCAG 2.1 AA. Built on Chakra UI with comprehensive accessibility remediation, the application supports keyboard navigation, screen readers, and assistive technologies across all core workflows.
Resolved Issues (2026-04-07)
- Keyboard accessibility — All interactive elements now operable via keyboard with proper roles and handlers
- Focus indicators — Visible 2px solid focus rings restored across shared theme (button, checkbox, radio, select, searchInput, sidebar, RowActionsMenu, TableOptions, dialog, export menu, image lightbox)
- Form accessibility — Proper label associations, error linkage via aria-describedby, and autocomplete attributes
- Color independence — All status information conveyed through text in addition to color
- Screen reader support — ARIA live regions for loading/error states, dynamic page titles, proper roles and names
- Color contrast — Theme tokens updated for AA compliance in both light and dark modes
- Reduced motion — Global prefers-reduced-motion support
- Accessibility linting — eslint-plugin-jsx-a11y added for ongoing compliance
Remaining Items
- Report confirmation dialog (3.3.4) — Submit action lacks confirmation step
- Text spacing (1.4.12) — No explicit handling for forced text spacing overrides
- Manual testing — Screen reader testing (NVDA/VoiceOver), browser zoom 200%, Windows High Contrast mode verification still needed
See the accompanying implementation plan (implementation-plan-aegix-one.md) for the full remediation roadmap.