WCAG Guidelines

Claromentis' baseline target is the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA standard. At its core, WCAG is built around 4 foundational product design principles (POUR):

• Perceivable: Users must be able to comprehend the digital information using the sensory modalities available to them.
• Operable: The interface cannot require interactions that a user cannot physically perform. Navigation must be simple and non-exclusive.
• Understandable: Information and the operation of the user interface must be clear, predictable, and simple.
• Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive tools and automation scripts.

WCAG Compliance Standard

Level A: Minimum Requirements

Level A criteria establish the absolute baseline of an accessible interface. Gaps here cause immediate critical dead-ends for users.

• 1.1.1 – Non-text Content: Provide text alternatives for non-text content.
• 1.3.2 – Meaningful Sequence: Present content and code containers in a logically programmatically determinable order.
• 1.3.3 – Sensory Characteristics: Layout and tracking instructions do not rely solely on shape, size, visual location, or sound.
• 1.4.1 – Use of Colour: Do not use color as the sole method of conveying content, validation states, or system distinctions.
• 2.1.1 – Keyboard: All core functionality is fully accessible via keyboard mapping without precise timing requirements.
• 2.1.2 – No Keyboard Trap: Users can navigate freely into and out of all focusable elements using only standard keyboard strokes.
• 2.2.1 – Timing Adjustable: Provide direct options to pause, turn off, or extend active operational time limits.
• 2.2.2 – Pause, Stop, Hide: Provide options to completely pause, hide, or disable moving, blinking, auto-updating, or scrolling items (such as news carousels or active chat streams).
• 2.4.1 – Bypass Blocks: Provide a clear mechanism (like skip links) to bypass repetitive navigation headers.
• 2.4.3 – Focus Order: Interactive interface components receive focus in a logical sequential visual path.
• 2.4.4 – Link Purpose (In Context): The destination and purpose of every link must be explicitly clear from its visible text strings or context.
• 2.4.7 – Focus Visible: Active keyboard focus indicators must be clearly visible.
• 3.1.1 – Language of Page: Ensure the default human language of the document is declared programmatically on the root tag.
• 3.2.6 – Consistent Help (New in 2.2): If the application provides help patterns (such as contact links, FAQs, or chat widgets), they must be surfaced in the exact same relative location across all page layout structures.
• 3.3.1 – Error Identification: Text descriptions must clearly identify and describe input errors.
• 3.3.2 – Labels or Instructions: Provide meaningful labels or visible instruction text for form elements.
• 3.3.7 – Redundant Entry (New in 2.2): Information previously entered by a user in a sequential multi-step wizard or form process must be automatically pre-filled or made readily available to select. Do not force repetitive typing tasks within a single workflow.
• 4.1.2 – Name, Role, Value: Build elements natively so accessibility parameters can be cleanly interpreted by assistive and scraping APIs.

Level AA: Target System Conformance

Level AA compliance addresses core UI enhancements and handles complex interface paradigms. All production code must pass these items.

• 1.3.5 – Identify Input Purpose: Input fields collecting personal data must leverage correct autocomplete tokens so the browser can programmatically map field intent.
• 1.4.3 – Contrast (Minimum): The visual contrast ratio between text and its background must be at least 4.5:1 (or 3:1 for text blocks scaling above 24px or bold 19px).
• 1.4.4 – Resize Text: Text scales perfectly up to 200% zoom without clipping elements or breaking core layout utilities.
• 1.4.11 – Non-Text Contrast: User interface components, graphic dividers, system states, and form inputs must maintain a minimum 3:1 contrast ratio against adjacent colors.
• 2.4.6 – Headings and Labels: Headings and labels must accurately describe the structural topic, hierarchy, or purpose of the section.
• 2.4.11 – Focus Not Obscured - Minimum (New in 2.2): Elements receiving keyboard focus must never be completely hidden or hidden beneath fixed/sticky layout banners, headers, or floating menus.
• 2.5.7 – Dragging Movements (New in 2.2): Any application feature that utilizes a dragging gesture (e.g., list reordering, kanban card movement) must offer a single-pointer tap or click-based alternative pattern (such as up/down directional control arrows).
• 2.5.8 – Target Size - Minimum (New in 2.2): All interactive target areas (buttons, icons, checkboxes) must meet a minimum footprint size of 24x24 CSS pixels, excluding inline sentences.
• 3.3.8 – Accessible Authentication - Minimum (New in 2.2): Logins and identity checks must not rely on memory or puzzle-solving cognitive tasks (e.g., blocking password pasting or requiring complex mathematical equations). Copy-paste actions, password managers, and biometric logins must be natively supported.

Core System Gaps & Refactoring Guidelines

Heading Architectures

• Maintain Strict Hierarchy: Always nest tags sequentially (<h1> → <h2> → <h3>). Never skip levels for aesthetic preference.
• Decouple Semantics from Layout: If a section requires the structural hierarchy of an <h2> but needs the smaller footprint of an <h4>, leverage Bootstrap typography utility styles: <h2 class="h4">Section Title</h2>.
• Off-Screen Framework Structural Anchors: On dynamic layout templates where a visual title disrupts aesthetic goals, a logical anchor is still required. Use the sr-only class to preserve screen reader mapping without visual regressions: <h1 class="sr-only">Main Workspace</h1>.

Media and Dynamic Token Architectures

• Asset Classification: Visual components that convey contextual data require descriptive alt text choices. Decorative elements, icons that mimic nearby text labels, or layout spacers must be hidden using empty alternative assignments (alt="").
• AI Layout & Streaming Constraints: When integrating live chat widgets or tools allowing users to create bespoke workflows and reporting schemas, model parameters must enforce sequential syntax. Prompt templates must prevent generative mechanisms from throwing unvetted <h1> blocks into downstream product containers.