Accessibility Standard

WCAG 2.2 AA Compliance Requirements for K0NSULT Components

Component Requirements

All components across the K0NSULT platform must meet the following accessibility requirements:

1. Visible Focus Indicators

Every interactive element (links, buttons, form fields) must have a clearly visible focus indicator. The default standard is a 2px solid outline with #00ff88 color and 2px offset. Focus indicators must not be suppressed except via :focus-visible for mouse users.

2. Sufficient Color Contrast

Text must have a minimum contrast ratio of 4.5:1 against its background for normal text and 3:1 for large text (18px+ or 14px+ bold). UI components and graphical objects require a minimum 3:1 contrast ratio. Use tools like WebAIM Contrast Checker to verify.

3. Keyboard Navigability

All functionality must be operable via keyboard alone. Tab order must follow a logical reading order. No keyboard traps are permitted. Custom interactive components must support expected keyboard patterns (Enter/Space for buttons, arrow keys for menus).

4. Screen Reader Support (ARIA Labels)

All interactive elements must have accessible names. Navigation regions must include aria-label attributes. Images must have descriptive alt text. Form inputs must be associated with <label> elements using for/id pairing. Landmark roles (role="main", role="navigation", role="complementary") must be applied to page regions.

5. Responsive Behavior (Mobile-First)

All pages must include <meta name="viewport"> with width=device-width, initial-scale=1.0. Content must reflow without horizontal scrolling at 320px width. Touch targets must be at least 24x24 CSS pixels. Text must remain readable when zoomed to 200%.

HTML Requirements

Document Structure

Every page must declare lang="en" on the <html> element
Every page must have a unique, descriptive <title>
Heading levels must follow a logical hierarchy (h1 → h2 → h3) without skipping
Skip navigation links must be provided on pages with repeated navigation blocks

Forms

Every form input must have an associated <label> with matching for/id
Required fields must be indicated both visually and programmatically (required attribute)
Error messages must be associated with their respective fields
Form submission feedback must be accessible to screen readers

Tables

Data tables must use <th> elements for headers
Tables must be horizontally scrollable on mobile viewports
Complex tables should include scope attributes on header cells

Testing Checklist

Tab through all interactive elements — verify logical order and visible focus
Zoom browser to 200% — verify content reflows without horizontal scroll
Test with a screen reader (NVDA, VoiceOver, or JAWS) — verify all content is announced
Verify mobile layout at 320px, 375px, and 768px breakpoints
Run Lighthouse accessibility audit — target score 90+
Check all images have descriptive alt text
Verify all form fields have associated labels
Confirm color contrast meets 4.5:1 ratio for all text
Test keyboard-only navigation for all interactive flows
Verify skip links work correctly

CSS Standards

Focus Styles (Global)

:focus { outline: 2px solid #00ff88; outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid #00ff88; outline-offset: 2px; }
a:focus-visible, button:focus-visible { box-shadow: 0 0 0 3px rgba(0,255,136,0.4); }

Text Readability

p, li { line-height: 1.6; max-width: 75ch; }

Mobile Tables

@media (max-width: 768px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }