Accessible catalog browsing for every visitor.

Digital accessibility commitment and architectural posture

Aroma Oil Studio is committed to delivering a digital catalog and inquiry environment that remains barrier-free for individuals with visual, motor, auditory, and cognitive disabilities. As a physical apothecary operating from 720 South Michigan Avenue in Chicago, we extend the same care to our digital infrastructure as we do to our botanical formulations. We adhere strictly to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards published by the World Wide Web Consortium (W3C).

Unlike automated commercial widgets that inject superficial accessibility bars over deficient markup, our catalog is engineered from the ground up using clean semantic HTML5, high-contrast OKLCH color palettes, keyboard-accessible interactive patterns, and explicit ARIA descriptors. Every product size from our 1/2 oz bottles to 9 oz diffuser refills is documented with structured data tables, native form elements, and readable typography.

Semantic markup and screen reader compatibility

Our web pages rely on strict structural hierarchy. Every document carries exactly one primary H1 heading containing the page’s factual thesis, followed by logically ordered H2, H3, and H4 subsections. We never skip heading levels to alter font size. Landmarks including main, header, footer, nav, and section regions are mapped to standard roles so screen reader users navigating via VoiceOver on macOS and iOS, NVDA on Windows, or TalkBack on Android can jump directly to formulation details, reference pricing, or inquiry forms.

Descriptive text alternatives are assigned to every photographic asset across our catalog. Photographs showing botanical distillation beakers, unbleached rattan reeds, precision pipettes, or dark amber apothecary vessels carry descriptive alt attributes explaining liquid clarity, meniscus volume, and closure mechanisms rather than generic brand slogans. Purely decorative elements and glyph icons use explicit aria-hidden attributes to avoid cluttering auditory reading streams.

Keyboard navigation and interactive control mechanics

Every interactive control on this website can be operated entirely through a standard keyboard without pointer or mouse assistance. Navigating with the Tab key exposes a dedicated skip-to-content link positioned at the top of the viewport, enabling visitors to bypass the off-center navigation rail and proceed directly to primary formulation copy or batch specifications.

Our interactive diffuser dosage tool, full-screen drawer menu, and support chat panel incorporate rigid keyboard focus traps and intuitive Escape key exits. When the navigation drawer is opened via the top corner mark, focus shifts immediately inside the drawer and loops through navigation links without escaping into the obscured background. Pressing the Escape key closes the panel and returns focus to the initiating button. Visible, high-contrast focus rings (2px solid slate accent #3A5A8C with 3px offset) outline active inputs, buttons, and anchor tags.

Color contrast, visual clarity, and typography scaling

Our color system is derived from our monochrome ink palette anchored on true neutral white (#FFFFFF). Standard running text (#292929) clears a 14.5:1 contrast ratio against the pure white ground, significantly exceeding the WCAG Level AA minimum of 4.5:1 for normal prose. Secondary technical labels and specification captions (#4D4D4D) achieve an 8.5:1 ratio against the ground and 7.2:1 against light surface bands (#F0F0F0).

Interactive actions, including our primary buttons and self-drawing process lines, utilize botanical slate blue (#3A5A8C), which delivers a contrast ratio of 5.8:1 against the white ground. We do not transmit critical information through color alone. Error states on our inquiry forms, active navigation indicators, and formulation dosage brackets combine color with explicit text labels, stroke borders, or icon glyphs. The page layout supports fluid browser zoom up to 200% without horizontal clipping, text truncation, or loss of catalog functionality.

Form inputs, error handling, and inquiry accessibility

Catalog inquiries submitted to our Chicago studio desk utilize semantic form controls paired with programmatic label associations. Input fields for name, telephone, email address, and formulation notes utilize explicit label for attributes matching input id declarations. Optional fields are explicitly labeled as optional so screen reader users understand requirements before entering data.

Validation errors returned by zogu4dd.php trigger visible inline error messages linked to their parent form groups. Server error notices carry aria-live=“polite” properties, allowing assistive devices to announce validation corrections without interrupting user navigation. Honeypot security fields (department, site) are hidden off-screen using semantic utility classes rather than display:none, ensuring they do not disorient screen reader users while preventing automated spam submissions.

Reduced motion preferences and technical testing matrix

Our self-drawing SVG process line and animated UI transitions strictly respect the user’s system preferences. When prefers-reduced-motion: reduce is signaled in the operating system, all CSS transitions, GSAP scroll triggers, and SVG stroke-dashoffset interpolations are suppressed. The continuous line appears instantly rendered at full length, and navigation panels transition without spatial sliding.

We test aromaoil.click across multiple hardware and software configurations to ensure consistent operational behavior:

• Operating systems: Apple macOS 14+, Microsoft Windows 11, Apple iOS 17+, Android 14.
• Browsers: Apple Safari, Google Chrome, Mozilla Firefox, Microsoft Edge.
• Assistive technologies: VoiceOver screen reader, NVDA reader, Windows High Contrast Mode, native browser text zoom at 200%.
• Input devices: Standard QWERTY desktop keyboards, mobile touchscreens, switch access controllers.

Feedback, physical accommodations, and contact protocol

If you encounter an accessibility barrier while browsing our catalog, using our interactive dosage tool, or inquiring about our 1/2 oz, 1 oz, 10 mL, or 50 mL aroma oils, we want to know immediately. Irina Petrova reviews technical bug reports directly and implements markup updates within forty-eight hours of verification.

For visitors seeking tactile fragrance consultations or alternate document formats (large-print batch certificates, plain-text GC/MS chromatography logs, or telephone formulation advice), please reach out directly:

We answer telephone inquiries and electronic correspondence Monday through Friday between 9:00 AM and 5:00 PM Central Time.