Parley Image Playground — Accessibility Conformance Report
Report Date: April 2026
Product Description: A web application for generating images using OpenAI GPT image models via the Portkey AI gateway.
Contact: Dylan Goldblatt, ngoldbla@kennesaw.edu
Notes: Evaluation covers the single-page application including image generation form, output display, history panel, and API key dialog. Third-party Parley navigation bar script was not audited.
Evaluation Methods: Manual code review of all components, automated static analysis of color contrast ratios from CSS custom properties, keyboard-only navigation testing, and semantic HTML/ARIA attribute inspection.
VPAT Version: 2.4 | Applicable Standards: WCAG 2.1 Level A & AA, Revised Section 508
WCAG 2.1 Level A — Conformance Results
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 1.1.1 Non-text Content | Supports | All generated images have alt text (e.g. "Generated image 1"). History thumbnails include timestamp context. Icon-only buttons have aria-labels. Decorative icons use Lucide React inline SVGs with adjacent text labels. |
| 1.2.1 Audio-only and Video-only (Prerecorded) | Not Applicable | The application does not include audio or video content. |
| 1.2.2 Captions (Prerecorded) | Not Applicable | No prerecorded multimedia content is present. |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | Not Applicable | No prerecorded multimedia content is present. |
| 1.3.1 Info and Relationships | Partially Supports | Semantic landmarks are used (<main>, <form>, <footer>). Form inputs have associated <label> elements via htmlFor. However, heading hierarchy is not strictly sequential — the page uses card-based layout without a clear h1→h2→h3 progression. |
| 1.3.2 Meaningful Sequence | Supports | DOM order matches visual reading order. CSS layout (grid/flex) does not reorder content in a way that breaks reading flow. |
| 1.3.3 Sensory Characteristics | Supports | Instructions do not rely solely on shape, size, visual location, or sound. Form labels use text descriptions. |
| 1.4.1 Use of Color | Supports | Error states use both red color and text descriptions via Alert component with role="alert". Status indicators combine color with text labels. Required fields use the HTML required attribute. |
| 1.4.2 Audio Control | Not Applicable | The application does not play audio. |
| 2.1.1 Keyboard | Supports | All interactive elements (buttons, form inputs, selects, sliders, dialogs) are operable via keyboard. Radix UI primitives provide built-in keyboard support including Enter/Space activation and arrow-key navigation within radio groups and selects. |
| 2.1.2 No Keyboard Trap | Supports | Focus can move freely through all components. Modal dialogs (API key, delete confirmation) use Radix UI Dialog which correctly traps focus within the dialog and releases it on close via Escape key. |
| 2.1.4 Character Key Shortcuts | Not Applicable | The application does not implement single-character keyboard shortcuts. |
| 2.2.1 Timing Adjustable | Not Applicable | No time limits are imposed on user actions. Image generation runs asynchronously without user-facing timeouts. |
| 2.2.2 Pause, Stop, Hide | Partially Supports | The loading spinner (animate-spin) during image generation cannot be paused. No prefers-reduced-motion media query is implemented to suppress animations for motion-sensitive users. |
| 2.3.1 Three Flashes or Below Threshold | Supports | No content flashes more than three times per second. Animations are limited to subtle transitions and a loading spinner. |
| 2.4.1 Bypass Blocks | Does Not Support | No skip-to-main-content link is provided. Users must tab through all header and navigation elements to reach the main content area. |
| 2.4.2 Page Titled | Supports | Page has a descriptive <title> ("Parley Image Playground") set via Next.js metadata in layout.tsx. |
| 2.4.3 Focus Order | Supports | Tab order follows logical visual reading order. No positive tabindex values are used. Dialog focus management is handled by Radix UI primitives. |
| 2.4.4 Link Purpose (In Context) | Supports | Links and buttons have descriptive text or aria-labels. No generic "click here" link text is used. |
| 2.5.1 Pointer Gestures | Not Applicable | No multipoint or path-based gestures are required. All interactions use simple clicks/taps. |
| 2.5.2 Pointer Cancellation | Supports | Click actions fire on standard click events (mouseup/pointerup), not on mousedown. No irreversible actions on pointer down. |
| 2.5.3 Label in Name | Supports | Visible text labels match accessible names. aria-labels on icon-only buttons accurately describe their function (e.g., "Configure API Key", "Show grid view"). |
| 2.5.4 Motion Actuation | Not Applicable | No device motion or user motion is used to trigger functionality. |
| 3.1.1 Language of Page | Supports | The <html> element includes lang="en" attribute, set in layout.tsx. |
| 3.2.1 On Focus | Supports | Focusing any element does not trigger a context change. No auto-submit or navigation occurs on focus. |
| 3.2.2 On Input | Supports | Changing form controls (model, size, quality selectors) does not auto-submit. Form submission requires explicit button activation. |
| 3.3.1 Error Identification | Supports | Errors are displayed in a destructive Alert component with role="alert" and descriptive text messages. API key validation shows "API key cannot be empty" on empty submission. |
| 3.3.2 Labels or Instructions | Partially Supports | All form fields have visible labels via <Label> components with htmlFor associations. The prompt textarea has a required attribute but lacks a visual required indicator (asterisk). |
| 4.1.2 Name, Role, Value | Supports | Custom components use Radix UI primitives with proper ARIA roles. Buttons have accessible names. Dialog components include DialogTitle and DialogDescription. State changes (expanded, selected) use appropriate ARIA attributes managed by Radix. |
WCAG 2.1 Level AA — Conformance Results
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 1.2.4 Captions (Live) | Not Applicable | No live audio or video content is present. |
| 1.2.5 Audio Description (Prerecorded) | Not Applicable | No prerecorded video content is present. |
| 1.3.4 Orientation | Supports | No CSS or JavaScript locks the viewport to a specific orientation. Responsive layout supports both portrait and landscape. |
| 1.3.5 Identify Input Purpose | Partially Supports | Form inputs have clear labels. However, the API key input does not use an autocomplete attribute, and general form fields do not specify input purpose via autocomplete where applicable. |
| 1.4.3 Contrast (Minimum) | Supports | Light mode: foreground hsl(30 10% 15%) on background hsl(40 25% 92%) yields ~13.2:1. Dark mode: foreground hsl(40 25% 92%) on background hsl(30 10% 12%) yields ~13.8:1. Primary text on primary background yields ~6.8:1. All exceed the 4.5:1 AA minimum. |
| 1.4.4 Resize Text | Supports | Text uses Tailwind rem-based utilities (text-sm, text-base, text-lg) which scale with browser font size settings. Layout remains usable at 200% zoom. |
| 1.4.5 Images of Text | Supports | No images of text are used. All text is rendered as real text. The application logo uses an SVG favicon. |
| 1.4.10 Reflow | Supports | Responsive grid layout adapts from single column on mobile to two columns on desktop. Content reflows without horizontal scrolling at 320px viewport width. |
| 1.4.11 Non-text Contrast | Supports | UI components (buttons, inputs, sliders) use border and background colors that meet the 3:1 minimum contrast ratio against adjacent colors. Focus rings use the primary golden color (hsl(38 70% 45%)) which is clearly visible. |
| 1.4.12 Text Spacing | Supports | No !important overrides on line-height, letter-spacing, word-spacing, or paragraph spacing. Content does not break when text spacing is adjusted per WCAG requirements. |
| 1.4.13 Content on Hover or Focus | Supports | Tooltips on form elements (streaming, compression) use Radix UI Tooltip which is dismissible via Escape, hoverable (pointer can move to tooltip content), and persistent while hovering. |
| 2.4.7 Focus Visible | Supports | All interactive elements have visible focus-visible styles using a golden ring (--ring token). Button, Input, Select, and Dialog components all include focus-visible:ring styling. Custom components inherit these styles from the shared UI primitives. |
| 2.5.8 Target Size (Minimum) | Supports | Buttons and interactive controls meet the 24×24px minimum target size. Form controls use standard sizing via Tailwind utility classes (h-9, h-10). History grid thumbnails are large click targets. |
| 3.3.4 Error Prevention (Legal, Financial, Data) | Supports | Destructive actions (history deletion) require confirmation via a dialog. The confirmation dialog includes a "Don't ask again" checkbox defaulting to unchecked (safe default). |
| 4.1.3 Status Messages | Does Not Support | Generation progress ("Generating image...", "Streaming...") and completion status are not wrapped in aria-live regions. Screen reader users are not notified of loading state changes. Error alerts do use role="alert" (implicit aria-live="assertive"), which correctly announces errors. |
Section 508 — Chapter 3: Functional Performance Criteria
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 302.1 Without Vision | Partially Supports | Semantic HTML and ARIA attributes provide screen reader compatibility. All interactive elements have accessible names. However, missing skip link (2.4.1) and missing aria-live regions for status updates (4.1.3) reduce the experience for screen reader users. |
| 302.2 With Limited Vision | Supports | Text uses relative units (rem) and scales with browser zoom to 200%. High contrast ratios in both light and dark modes (13:1+). Responsive layout reflows content at all viewport widths. |
| 302.3 Without Perception of Color | Supports | Information is not conveyed by color alone. Error states use text descriptions alongside color. Status indicators combine text labels with color. |
| 302.4 Without Hearing | Not Applicable | The application does not produce audio output. |
| 302.5 With Limited Hearing | Not Applicable | The application does not produce audio output. |
| 302.6 Without Speech | Not Applicable | The application does not require speech input. |
| 302.7 With Limited Manipulation | Supports | All functionality is operable via keyboard alone. No complex gestures are required. Sliders support arrow-key operation via Radix UI primitives. |
| 302.8 With Limited Reach and Strength | Not Applicable | This is a web application with no physical hardware interaction requirements. |
| 302.9 With Limited Language, Cognitive, and Learning Abilities | Supports | Interface uses clear labels, consistent navigation patterns, and descriptive button text. Form inputs include helper tooltips. Error messages are descriptive and actionable. |
Section 508 — Chapter 4: Hardware
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 402–415 All Chapter 4 Criteria | Not Applicable | This product is a web application and does not include hardware components. |
Section 508 — Chapter 5: Software
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 501–504 All Chapter 5 Criteria | Not Applicable | This product is a web application accessed through standard web browsers. It is not native platform software. |
Section 508 — Chapter 6: Support Documentation and Services
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 602.2 Accessibility and Compatibility Features | Partially Supports | The application includes this ACR as in-app documentation. However, no separate accessibility statement or documentation page describes accessibility features and known limitations in detail. |
| 602.3 Electronic Support Documentation | Supports | This ACR is rendered as accessible HTML within the application, using semantic tables and proper heading structure. |
| 602.4 Alternate Formats for Non-Electronic Support Documentation | Not Applicable | No non-electronic documentation is provided. |
| 603.2 Information on Accessibility and Compatibility Features | Partially Supports | Contact information for accessibility inquiries is provided in this ACR. No dedicated accessibility support channel exists. |
| 603.3 Accommodation of Communication Needs | Partially Supports | Support is available via email. No alternative communication channels (relay services, text-based support) are documented. |
This report covers the accessibility conformance of the product as evaluated on the report date. Conformance may change as the product is updated. This document is informational and does not constitute a legal guarantee. VPAT is a registered trademark of the Information Technology Industry Council (ITI).