<header id="vpat">
  <h1>Voluntary Product Accessibility Template (VPAT)</h1>
  <p>OneUptime Accessibility Conformance Report - WCAG 2.1 Edition</p>
</header>

<section>
  <h2>About This Document</h2>

  <p><strong>Name of Product/Version:</strong> OneUptime - Web Application</p>
  <p><strong>Report Date:</strong> January 2026</p>
  <p><strong>Product Description:</strong> OneUptime is a comprehensive observability platform that provides uptime monitoring, incident management, status pages, and on-call scheduling capabilities.</p>
  <p><strong>Contact Information:</strong> accessibility@oneuptime.com</p>

  <h3>Applicable Standards/Guidelines</h3>
  <p>This report covers the degree of conformance for the following accessibility standard/guidelines:</p>

  <table>
    <thead>
      <tr>
        <th>Standard/Guideline</th>
        <th>Included In Report</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines 2.1</a></td>
        <td>Level A (Yes), Level AA (Yes), Level AAA (No)</td>
      </tr>
      <tr>
        <td><a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/">EN 301 549 Accessibility requirements for ICT products and services</a></td>
        <td>Yes</td>
      </tr>
      <tr>
        <td><a href="https://www.access-board.gov/ict/">Revised Section 508 standards</a></td>
        <td>Yes</td>
      </tr>
      <tr>
        <td>BITV 2.0 (German Accessibility Standard)</td>
        <td>Yes (based on EN 301 549 alignment)</td>
      </tr>
    </tbody>
  </table>

  <h3>Terms</h3>
  <p>The terms used in this document are based on ISO/IEC/IEEE 26514:2022:</p>
  <ul>
    <li><strong>Supports:</strong> The functionality of the product has at least one method that meets the criterion without known defects or meets with equivalent facilitation.</li>
    <li><strong>Partially Supports:</strong> Some functionality of the product does not meet the criterion.</li>
    <li><strong>Does Not Support:</strong> The majority of product functionality does not meet the criterion.</li>
    <li><strong>Not Applicable:</strong> The criterion is not relevant to the product.</li>
  </ul>
</section>

<section>
  <h2>WCAG 2.1 Level A Conformance</h2>

  <table>
    <thead>
      <tr>
        <th>Criteria</th>
        <th>Conformance Level</th>
        <th>Remarks and Explanations</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>1.1.1 Non-text Content</strong></td>
        <td>Supports</td>
        <td>Images include descriptive alt text attributes. Icons use aria-hidden="true" for decorative elements. File upload previews include contextual alt text.</td>
      </tr>
      <tr>
        <td><strong>1.2.1 Audio-only and Video-only (Prerecorded)</strong></td>
        <td>Not Applicable</td>
        <td>The application does not contain prerecorded audio-only or video-only content.</td>
      </tr>
      <tr>
        <td><strong>1.2.2 Captions (Prerecorded)</strong></td>
        <td>Not Applicable</td>
        <td>The application does not contain prerecorded synchronized media.</td>
      </tr>
      <tr>
        <td><strong>1.2.3 Audio Description or Media Alternative (Prerecorded)</strong></td>
        <td>Not Applicable</td>
        <td>The application does not contain prerecorded synchronized media.</td>
      </tr>
      <tr>
        <td><strong>1.3.1 Info and Relationships</strong></td>
        <td>Supports</td>
        <td>Semantic HTML is used throughout. Forms include proper labels and fieldsets. Data tables include headers with scope="col" attributes. Screen reader-only text provides context for visual elements.</td>
      </tr>
      <tr>
        <td><strong>1.3.2 Meaningful Sequence</strong></td>
        <td>Supports</td>
        <td>Content is presented in a logical reading order. DOM structure follows visual presentation.</td>
      </tr>
      <tr>
        <td><strong>1.3.3 Sensory Characteristics</strong></td>
        <td>Supports</td>
        <td>Instructions do not rely solely on sensory characteristics. Error states use both color and text indicators.</td>
      </tr>
      <tr>
        <td><strong>1.4.1 Use of Color</strong></td>
        <td>Supports</td>
        <td>Color is not used as the only means of conveying information. Status indicators use icons in addition to color.</td>
      </tr>
      <tr>
        <td><strong>1.4.2 Audio Control</strong></td>
        <td>Not Applicable</td>
        <td>The application does not automatically play audio for more than 3 seconds.</td>
      </tr>
      <tr>
        <td><strong>2.1.1 Keyboard</strong></td>
        <td>Supports</td>
        <td>All functionality is accessible via keyboard. Interactive elements support tabIndex. Modal close buttons support keyboard activation via Enter, Space, and Escape keys.</td>
      </tr>
      <tr>
        <td><strong>2.1.2 No Keyboard Trap</strong></td>
        <td>Supports</td>
        <td>Users can navigate away from all components using standard keyboard navigation.</td>
      </tr>
      <tr>
        <td><strong>2.1.4 Character Key Shortcuts</strong></td>
        <td>Not Applicable</td>
        <td>The application does not implement character key shortcuts.</td>
      </tr>
      <tr>
        <td><strong>2.2.1 Timing Adjustable</strong></td>
        <td>Supports</td>
        <td>Session timeouts can be extended or disabled. No content-based time limits exist.</td>
      </tr>
      <tr>
        <td><strong>2.2.2 Pause, Stop, Hide</strong></td>
        <td>Supports</td>
        <td>Auto-updating content (such as real-time dashboards) can be paused or configured.</td>
      </tr>
      <tr>
        <td><strong>2.3.1 Three Flashes or Below Threshold</strong></td>
        <td>Supports</td>
        <td>The application does not contain content that flashes more than three times per second.</td>
      </tr>
      <tr>
        <td><strong>2.4.1 Bypass Blocks</strong></td>
        <td>Supports</td>
        <td>Skip to main content link is provided for keyboard users. Navigation landmarks are implemented using role="navigation" and aria-label. Main content area is properly identified.</td>
      </tr>
      <tr>
        <td><strong>2.4.2 Page Titled</strong></td>
        <td>Supports</td>
        <td>All pages have descriptive titles that describe the page topic or purpose.</td>
      </tr>
      <tr>
        <td><strong>2.4.3 Focus Order</strong></td>
        <td>Supports</td>
        <td>Focus order follows logical reading sequence. TabIndex is properly managed across components.</td>
      </tr>
      <tr>
        <td><strong>2.4.4 Link Purpose (In Context)</strong></td>
        <td>Supports</td>
        <td>Link text clearly describes the destination or purpose of the link.</td>
      </tr>
      <tr>
        <td><strong>2.5.1 Pointer Gestures</strong></td>
        <td>Supports</td>
        <td>All functionality that uses multipoint or path-based gestures can be operated with a single pointer.</td>
      </tr>
      <tr>
        <td><strong>2.5.2 Pointer Cancellation</strong></td>
        <td>Supports</td>
        <td>Actions are triggered on the up-event rather than down-event.</td>
      </tr>
      <tr>
        <td><strong>2.5.3 Label in Name</strong></td>
        <td>Supports</td>
        <td>Visible labels match accessible names. Screen reader-only text uses sr-only class appropriately.</td>
      </tr>
      <tr>
        <td><strong>2.5.4 Motion Actuation</strong></td>
        <td>Not Applicable</td>
        <td>The application does not require device motion for functionality.</td>
      </tr>
      <tr>
        <td><strong>3.1.1 Language of Page</strong></td>
        <td>Supports</td>
        <td>All pages include lang="en" attribute on the HTML element.</td>
      </tr>
      <tr>
        <td><strong>3.2.1 On Focus</strong></td>
        <td>Supports</td>
        <td>No context changes occur when components receive focus.</td>
      </tr>
      <tr>
        <td><strong>3.2.2 On Input</strong></td>
        <td>Supports</td>
        <td>Form controls do not trigger unexpected context changes when changed.</td>
      </tr>
      <tr>
        <td><strong>3.3.1 Error Identification</strong></td>
        <td>Supports</td>
        <td>Form errors are identified and described in text. Error states include visual and programmatic indicators.</td>
      </tr>
      <tr>
        <td><strong>3.3.2 Labels or Instructions</strong></td>
        <td>Supports</td>
        <td>Form fields include visible labels and instructions. FieldLabel component provides consistent labeling.</td>
      </tr>
      <tr>
        <td><strong>4.1.1 Parsing</strong></td>
        <td>Supports</td>
        <td>HTML is well-formed with unique IDs. React components ensure valid markup generation.</td>
      </tr>
      <tr>
        <td><strong>4.1.2 Name, Role, Value</strong></td>
        <td>Supports</td>
        <td>Semantic roles are used extensively (role="menu", role="dialog", role="switch", role="status", role="alert", etc.). ARIA attributes are implemented across components. Status indicators include aria-label for screen reader announcements.</td>
      </tr>
    </tbody>
  </table>
</section>

<section>
  <h2>WCAG 2.1 Level AA Conformance</h2>

  <table>
    <thead>
      <tr>
        <th>Criteria</th>
        <th>Conformance Level</th>
        <th>Remarks and Explanations</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>1.2.4 Captions (Live)</strong></td>
        <td>Not Applicable</td>
        <td>The application does not contain live synchronized media.</td>
      </tr>
      <tr>
        <td><strong>1.2.5 Audio Description (Prerecorded)</strong></td>
        <td>Not Applicable</td>
        <td>The application does not contain prerecorded video content.</td>
      </tr>
      <tr>
        <td><strong>1.3.4 Orientation</strong></td>
        <td>Supports</td>
        <td>Content is not restricted to a single display orientation.</td>
      </tr>
      <tr>
        <td><strong>1.3.5 Identify Input Purpose</strong></td>
        <td>Supports</td>
        <td>Common input fields support autocomplete attributes including email, password, phone, name, and URL fields for improved autofill support.</td>
      </tr>
      <tr>
        <td><strong>1.4.3 Contrast (Minimum)</strong></td>
        <td>Supports</td>
        <td>Tailwind CSS color classes provide good contrast. Color indicators include aria-labels for screen reader users. Progress bars include descriptive labels.</td>
      </tr>
      <tr>
        <td><strong>1.4.4 Resize Text</strong></td>
        <td>Supports</td>
        <td>Text can be resized up to 200% without loss of content or functionality.</td>
      </tr>
      <tr>
        <td><strong>1.4.5 Images of Text</strong></td>
        <td>Supports</td>
        <td>Text is rendered as text rather than images. Logos are the exception as permitted.</td>
      </tr>
      <tr>
        <td><strong>1.4.10 Reflow</strong></td>
        <td>Supports</td>
        <td>Responsive design ensures content reflows at different viewport widths without horizontal scrolling.</td>
      </tr>
      <tr>
        <td><strong>1.4.11 Non-text Contrast</strong></td>
        <td>Supports</td>
        <td>Focus indicators use ring-indigo-500 with good contrast.</td>
      </tr>
      <tr>
        <td><strong>1.4.12 Text Spacing</strong></td>
        <td>Supports</td>
        <td>Content remains accessible when text spacing is adjusted within WCAG requirements.</td>
      </tr>
      <tr>
        <td><strong>1.4.13 Content on Hover or Focus</strong></td>
        <td>Supports</td>
        <td>Tooltips are accessible via both hover and keyboard focus. Tooltip content is interactive and persistent, allowing users to hover over the tooltip content. Tooltips include proper ARIA attributes for screen readers.</td>
      </tr>
      <tr>
        <td><strong>2.4.5 Multiple Ways</strong></td>
        <td>Supports</td>
        <td>Multiple navigation methods are provided including menus, search, and direct links.</td>
      </tr>
      <tr>
        <td><strong>2.4.6 Headings and Labels</strong></td>
        <td>Supports</td>
        <td>Headings and labels describe topic or purpose. Semantic heading hierarchy is maintained.</td>
      </tr>
      <tr>
        <td><strong>2.4.7 Focus Visible</strong></td>
        <td>Supports</td>
        <td>Focus indicators are visible using focus:ring-2 and focus-visible:outline CSS patterns.</td>
      </tr>
      <tr>
        <td><strong>3.1.2 Language of Parts</strong></td>
        <td>Supports</td>
        <td>The application is primarily in English. Multi-language content sections are appropriately marked.</td>
      </tr>
      <tr>
        <td><strong>3.2.3 Consistent Navigation</strong></td>
        <td>Supports</td>
        <td>Navigation components appear consistently across pages. SideMenu component maintains consistent structure.</td>
      </tr>
      <tr>
        <td><strong>3.2.4 Consistent Identification</strong></td>
        <td>Supports</td>
        <td>Components with the same functionality are identified consistently throughout the application.</td>
      </tr>
      <tr>
        <td><strong>3.3.3 Error Suggestion</strong></td>
        <td>Supports</td>
        <td>Error messages provide guidance on correction. Input fields are linked to error messages via aria-describedby and marked with aria-invalid for screen readers.</td>
      </tr>
      <tr>
        <td><strong>3.3.4 Error Prevention (Legal, Financial, Data)</strong></td>
        <td>Supports</td>
        <td>Confirmation dialogs are used for destructive actions. Data submissions can be reviewed before final confirmation.</td>
      </tr>
      <tr>
        <td><strong>4.1.3 Status Messages</strong></td>
        <td>Supports</td>
        <td>Toast notifications use aria-live="assertive". Alert components use role="alert" with aria-live="polite" for screen reader announcements. Status bubbles include role="status" for accessibility.</td>
      </tr>
    </tbody>
  </table>
</section>

<section>
  <h2>EN 301 549 / BITV 2.0 Relevant Criteria</h2>

  <p>EN 301 549 is the European standard for digital accessibility, and BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) is the German implementation based on EN 301 549. The following criteria are particularly relevant for web applications:</p>

  <table>
    <thead>
      <tr>
        <th>Section</th>
        <th>Criteria</th>
        <th>Conformance Level</th>
        <th>Remarks</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>9.1</td>
        <td>Perceivable (WCAG 2.1 Level A and AA)</td>
        <td>Supports</td>
        <td>See WCAG criteria above for detailed conformance. All Level A criteria are fully supported; most Level AA criteria are supported with minor exceptions noted.</td>
      </tr>
      <tr>
        <td>9.2</td>
        <td>Operable (WCAG 2.1 Level A and AA)</td>
        <td>Supports</td>
        <td>See WCAG criteria above for detailed conformance. Full keyboard navigation, focus management, and navigation landmarks implemented.</td>
      </tr>
      <tr>
        <td>9.3</td>
        <td>Understandable (WCAG 2.1 Level A and AA)</td>
        <td>Supports</td>
        <td>See WCAG criteria above for detailed conformance.</td>
      </tr>
      <tr>
        <td>9.4</td>
        <td>Robust (WCAG 2.1 Level A and AA)</td>
        <td>Supports</td>
        <td>See WCAG criteria above for detailed conformance. ARIA roles, states, and properties are properly implemented across all components.</td>
      </tr>
      <tr>
        <td>11.7</td>
        <td>User Preferences</td>
        <td>Supports</td>
        <td>The application respects system-level accessibility preferences such as reduced motion where applicable. Font sizes can be adjusted via browser settings.</td>
      </tr>
      <tr>
        <td>12.1.1</td>
        <td>Accessibility and Compatibility Features</td>
        <td>Supports</td>
        <td>Documentation of accessibility features is provided in this VPAT.</td>
      </tr>
      <tr>
        <td>12.2.4</td>
        <td>Accessible Documentation</td>
        <td>Supports</td>
        <td>Product documentation follows accessibility best practices with proper semantic structure, headings, and navigation.</td>
      </tr>
    </tbody>
  </table>
</section>

<section>
  <h2>Revised Section 508 Standards</h2>

  <p>OneUptime's conformance to the Revised Section 508 Standards (as referenced in the 2017 update) aligns with our WCAG 2.1 Level A and AA conformance as detailed above. The Revised Section 508 Standards incorporate WCAG 2.0 Level A and AA success criteria for web content.</p>

  <h3>Chapter 5: Software</h3>
  <table>
    <thead>
      <tr>
        <th>Criteria</th>
        <th>Conformance Level</th>
        <th>Remarks</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>501.1 Scope</strong></td>
        <td>Supports</td>
        <td>OneUptime is a web-based application accessed through standard web browsers.</td>
      </tr>
      <tr>
        <td><strong>502 Interoperability with Assistive Technology</strong></td>
        <td>Supports</td>
        <td>The application uses standard web technologies and comprehensive ARIA implementations to support assistive technology including screen readers and keyboard-only navigation.</td>
      </tr>
      <tr>
        <td><strong>503 Applications</strong></td>
        <td>Supports</td>
        <td>User interface components provide accessible names and roles through ARIA attributes. All interactive elements support keyboard operation.</td>
      </tr>
      <tr>
        <td><strong>504 Authoring Tools</strong></td>
        <td>Supports</td>
        <td>Where the application allows content creation, accessibility guidance is provided and form controls are fully accessible.</td>
      </tr>
    </tbody>
  </table>
</section>

<section>
  <h2>Accessibility Features Implemented</h2>

  <p>OneUptime has implemented the following accessibility features throughout the application:</p>

  <h3>ARIA Support</h3>
  <ul>
    <li><strong>ARIA Labels:</strong> aria-labelledby, aria-label used across interactive components including icon-only buttons</li>
    <li><strong>ARIA States:</strong> aria-expanded, aria-checked, aria-pressed, aria-disabled, aria-invalid, aria-sort for sortable tables</li>
    <li><strong>ARIA Live Regions:</strong> aria-live="polite" and aria-live="assertive" for dynamic content, loading indicators, and status updates</li>
    <li><strong>ARIA Roles:</strong> role="dialog", role="menu", role="switch", role="navigation", role="alert", role="button", role="status"</li>
  </ul>

  <h3>Keyboard Navigation</h3>
  <ul>
    <li>Full keyboard navigation support for interactive elements</li>
    <li>Visible focus indicators using focus ring styles</li>
    <li>TabIndex management for logical focus order</li>
    <li>Arrow key navigation in dropdown menus with Home/End support</li>
    <li>Accordion components support Enter/Space keys for expand/collapse</li>
    <li>Copy buttons support keyboard activation</li>
    <li>Escape key closes modals and dropdown menus</li>
    <li>Modal dialogs trap focus and support initial focus management</li>
    <li>Pagination controls are fully keyboard accessible with aria-labels</li>
    <li>Toggle switches support keyboard operation with proper aria-checked</li>
    <li>Radio groups support keyboard navigation with proper labels</li>
  </ul>

  <h3>Screen Reader Support</h3>
  <ul>
    <li>Screen reader-only text using sr-only class pattern</li>
    <li>Descriptive button and link text</li>
    <li>Form labels associated with inputs</li>
    <li>Status messages announced via live regions</li>
    <li>Loading states announced with role="status" and aria-live</li>
    <li>Table headers include scope attributes and aria-sort for sortable columns</li>
  </ul>

  <h3>Visual Accessibility</h3>
  <ul>
    <li>Error states indicated by both color and icons with aria-invalid and aria-describedby</li>
    <li>Consistent focus styles across the application</li>
    <li>Responsive design that maintains accessibility at all viewport sizes</li>
    <li>Semantic heading hierarchy</li>
    <li>Color indicators include text alternatives via aria-label</li>
    <li>Progress bars include role="progressbar" with aria-valuenow/min/max</li>
  </ul>

  <h3>Component-Specific Accessibility</h3>
  <ul>
    <li><strong>Tabs:</strong> Proper tablist/tab/tabpanel roles with aria-selected and aria-controls</li>
    <li><strong>Card Select:</strong> Uses radiogroup role with radio role options and aria-checked</li>
    <li><strong>Checkboxes:</strong> Properly linked descriptions via aria-describedby</li>
    <li><strong>Progress Bars:</strong> Full progressbar role implementation with value attributes</li>
    <li><strong>Color Pickers:</strong> Keyboard accessible with button role and aria-labels</li>
    <li><strong>Tooltips:</strong> Interactive tooltips accessible via hover and focus with ARIA support</li>
    <li><strong>Toggle Switches:</strong> Uses role="switch" with unique aria-labelledby and aria-describedby for errors</li>
    <li><strong>Radio Groups:</strong> Proper radiogroup role with aria-label, individual options have unique IDs and labels</li>
    <li><strong>More Menu:</strong> Full menu role with keyboard navigation (Arrow keys, Home, End, Escape)</li>
    <li><strong>Dropdowns:</strong> Includes aria-label, aria-invalid, and aria-describedby for error states</li>
    <li><strong>Modals:</strong> Escape key support, focus trapping, aria-describedby for descriptions</li>
    <li><strong>Pagination:</strong> Navigation landmark with keyboard-accessible Previous/Next controls and aria-current for current page</li>
  </ul>
</section>

<section>
  <h2>Known Limitations and Roadmap</h2>

  <p>We are continuously working to improve accessibility. The following areas have been identified for future enhancement:</p>

  <ul>
    <li>Enhancing color contrast in some secondary UI elements for 1.4.11 compliance</li>
    <li>Adding automated accessibility testing to our CI/CD pipeline</li>
    <li>Expanding support for high contrast mode and reduced motion preferences</li>
    <li>Improving screen reader announcements for complex data visualizations</li>
  </ul>

  <h3>Evaluation Methodology</h3>
  <p>This VPAT was prepared based on:</p>
  <ul>
    <li>Manual code review of React components and their ARIA implementations</li>
    <li>Analysis of Tailwind CSS accessibility classes used throughout the application</li>
    <li>Review of form components, navigation patterns, and interactive elements</li>
  </ul>

  <p>We recommend conducting a full accessibility audit with assistive technology testing for comprehensive conformance verification.</p>
</section>

<section>
  <h2>Contact Information</h2>

  <p>For questions regarding this VPAT or to report accessibility issues, please contact:</p>

  <ul>
    <li><strong>Email:</strong> accessibility@oneuptime.com</li>
    <li><strong>Support:</strong> <a href="https://oneuptime.com/support">https://oneuptime.com/support</a></li>
  </ul>

  <p>We welcome feedback from users of assistive technologies and are committed to addressing accessibility barriers promptly.</p>
</section>
