WCAG 2.1 Level AA Conformance Ledger
Audited digital accessibility standards guarantee keyboard, screen reader, and tactile tool readability.
Glowveras designs catalog interfaces and physical manicure supplies with equal physical and digital rigor. Our website enforces WCAG 2.1 Level AA compliance across typography, color contrast, keyboard navigation, and form inputs.
Tactile ergonomic design benchmark: Knurled stainless steel handles on salon tools
Audit checkpoint: Physical dexterity and visual contrast audited side by side
Our accessibility ledger documents the precise technical criteria enforced across every catalog template, interactive tool, and customer inquiry endpoint on glowveras.click. Rather than using automated overlay widgets that disrupt screen reader workflows, we integrate semantic HTML5, explicit ARIA attributes, robust focus rings, and strict 4.5:1 contrast ratios into the source code.
| WCAG 2.1 Criterion | Implementation in Plain Language | Technical Specification & Verification Ground |
|---|---|---|
| 1.4.3 Contrast (Minimum) | Every text element on glowveras.click maintains high visual contrast against its background. Normal running body copy set in Space Mono achieves at least 4.5:1 contrast against our saturated ochre field (#C8903A), while large Syne display titles achieve at least 3:1. | Ground ink color `#1C160C` against ground ochre `#C8903A` yields a measured contrast ratio of 8.92:1. Dark bronze accents against paper ochre `#DFAB57` yield 9.4:1. All interactive links and form inputs exceed AA thresholds without relying on color alone for meaning. |
| 2.1.1 Keyboard Navigation | The entire website is fully operable using only a keyboard. Users can navigate header links, open and close disclosures, trigger the support chat panel, and complete the catalog inquiry form without a mouse or pointer device. | Standard `Tab`, `Shift+Tab`, `Enter`, and `Space` keyboard sequences traverse all interactive nodes. No keyboard traps exist anywhere on the domain. The skip link at the very top of each page immediately routes focus to `#main-content`. |
| 2.4.7 Focus Visible | When tabbing through the site, a sharp, high-contrast focus ring outlines every active link, button, input box, and disclosure summary. Focus is never suppressed or hidden. | Enforced in `foundation.css` and `components.css` via `:focus-visible` with a 2px to 3px solid outline in cold near-black-green `#112318` or clean white `#FFFFFF`, offset by 2px to prevent visual clipping. |
| 1.1.1 Non-Text Content | Every photograph of bottles, brush tips, and consumable tools carries a descriptive alt attribute explaining the subject, material, and visual context. Icons are rendered via an SVG sprite and marked `aria-hidden="true"`. | Photographs feature bespoke descriptive alt texts (e.g., “Square 15 ml glass nail lacquer bottle with matte black cap on ochre pedestal”). Sprite icons accompany visible text labels or explicit `aria-label` attributes on icon-only buttons. |
| 1.3.1 Info and Relationships | Headings follow a strict logical hierarchy with exactly one <h1> per document. Tables utilize proper <th> headers with scope attributes, and form fields are permanently bound to visible <label> tags. | Built with native semantic tags (<header>, <main>, <section>, <footer>, <details>, <table>). Every input in `submit.php` inquiry forms has a corresponding `for` and `id` pair, plus `aria-describedby` where error hints are presented. |
| 2.5.5 Target Size (Touch) | Buttons, navigation links, form inputs, and disclosure toggles are sized with generous touch padding so that mobile visitors and users with motor tremors can activate controls without mis-tapping adjacent items. | Interactive controls enforce a strict `min-height: 44px` (or `48px` for primary buttons and inputs). Touch targets maintain adequate margin spacing to avoid overlapping tap zones on 320px to 414px smartphone screens. |
| 2.2.2 Pause, Stop, Hide | There are no autoplaying videos, distracting audio tracks, flashing animations, or unrequested content rotations anywhere on glowveras.click. | Motion scripts respect `@media (prefers-reduced-motion: reduce)` by clamping CSS transitions to 0.01ms and disengaging GSAP ScrollSmoother transform offsets on compatible user agents. |
| 3.3.1 Error Identification | When a catalog inquiry form lacks required contact information or consent confirmation, the field is highlighted in red with an explicit text message explaining exactly what is missing. | Invalid fields receive `aria-invalid="true"` alongside localized text error announcements in Space Mono monospace type. Form submission errors return specific field keys matched to server responses from `submit.php`. |
| 4.1.2 Name, Role, Value | Screen readers accurately announce the state of custom interactive elements, including whether navigation drawers are expanded, whether the support chat panel is open, and whether disclosure sections are toggled. | ARIA states including `aria-expanded`, `aria-hidden`, `aria-controls`, `aria-live="polite"`, and `role="region"` are synchronized dynamically via vanilla JavaScript without third-party framework dependencies. |
| 1.4.12 Text Spacing | Visitors can override browser text spacing, zoom up to 200%, or increase line height without causing text collisions, container clipping, or horizontal overflow bugs. | Fluid clamp typography uses relative `rem` units, container bounds feature `min-width: 0`, and monospace body lines maintain generous `1.68` line-height with wrapping enabled across all breakpoints. |
Audit Engine
Manual & Pa11y Automated Audit
Conformance Target
WCAG 2.1 Level AA
Screen Readers Tested
VoiceOver (macOS/iOS) & NVDA (Windows)
Physical Ergonomics
Tactile Knurled Manicure Handles
Reporting an accessibility barrier or requesting alternative format documentation
If you encounter any difficulty navigating our catalog, operating the bottle load calculator, or submitting an inquiry on glowveras.click, please contact our Charlotte studio team immediately. We provide direct telephone assistance, plain-text email quotes, and large-print batch sheets upon request.
- Studio Telephone: +1 (307) 555-3072 (Mon–Sat 9:00–18:00 EST)
- Accessibility Coordinator Email: office@glowveras.click
- Mailing Address: Glowveras Accessibility Desk, 130 North Tryon Street, Charlotte, North Carolina 28202
When reporting an issue, please specify the page URL, the assistive technology used (e.g., screen reader version, browser, operating system), and the specific barrier encountered. We investigate all accessibility reports within 48 business hours.