Layout and observable accessibility findings
Observed 2026-09-07 using the Codex in-app browser. This is a sampled discovery review, not an accessibility conformance audit. No production form errors were triggered by submission.
Visual baseline
The homepage uses a dark-to-medium blue header, white practice logo, phone link, desktop horizontal navigation, large dental-photo hero and blue accent CTA styling. Below it are image-led service cards and alternating content/feature sections. At 1440 × 900 the full navigation fits on one line beneath the logo/phone area. At narrower desktop width the open chat obscured right-side navigation and the hero.
At 390 × 844 and 320 × 812 the logo/phone stack above a hamburger icon. The menu expands vertically; expanding Dental Services exposes a lengthy nested list. Content reflows to a narrow layout. At 320 pixels, the fixed header continues to occupy the top portion while scrolling to the footer, whose consent text includes scrollable boxes. Sampled screenshots did not show a broad horizontal page overflow; that does not establish all-template reflow success.
Initial homepage visit opened both a promotion and the chat. The 390-pixel chat occupied nearly the entire viewport. After closing chat, the promotional CTA wrapped into a very narrow stack of words and covered hero content. Both overlays were dismissed without entering data. The hero changed slides during observation. No explicit pause control was identified in the sampled screenshot/accessibility output; keyboard and motion-preference behavior need targeted follow-up.
Representative inner pages share the blue global header and a title/breadcrumb strip above a white content area. The appointment request uses full-width name/patient-status fields, paired email/phone fields and time-preference checkboxes on desktop; these stack on mobile. Service/article body text wraps around imagery on desktop and stacks on mobile. Long article titles and repeated breadcrumb text consume substantial mobile space. The blog uses image/excerpt/read-more rows on desktop and stacked cards on mobile. The dedicated gallery is image-led; the office tour successfully rendered a Google panoramic view. The giveaway includes photo groups and an image-only instruction poster. Exact page/viewport coverage is in evidence/browser-coverage.md.
Prioritized findings
| ID / priority | Observed evidence | Impact / proposed requirement | Verification boundary |
|---|---|---|---|
| A11Y-01 / high | .responsive-menu-icon is an empty div, without button semantics, accessible name, tabindex or expanded state in captured markup; the accessibility tree exposes an icon character |
Implement a named keyboard-operable button with state and controlled-menu relationship; support Enter/Space and clear focus | Click/tap expansion worked. This discovery did not complete an end-to-end keyboard or screen-reader audit |
| A11Y-02 / high | Sample mobile Teeth Whitening link has computed white text on rgb(39,169,224), 14px normal font; calculated contrast 2.679:1 |
Increase contrast for ordinary navigation text; check all interaction states and inherited opacity/background effects | One computed-style sample, not a full palette audit; see evidence/mobile-menu-contrast.json |
| UX-01 / high | Mobile promotion CTA breaks into a narrow vertical stack; open chat covers almost the whole viewport | Use responsive, dismissible promotion/chat behavior that preserves access to key content and navigation | Reproduced in this browser session at 390px; initial behavior may depend on session state/timing |
| A11Y-03 / medium | Gallery image alts include 679-before, 510-after, X19861_2 and similar names |
Require useful, practice-approved before/after descriptions and correct pairings; do not expose identifiers as descriptions | Direct DOM image evidence, not a clinical interpretation of the photos |
| A11Y-04 / medium | Homepage YouTube iframe and one map iframe have empty titles; another map has a descriptive title | Give embeds distinct descriptive names and usable fallback links | Parent iframe attributes inspected; embedded application internals not exhaustively tested |
| A11Y-05 / medium | Social/directions links are announced in the sampled tree as “Opens in a New Window”; some gallery controls have no useful name | Accessible names must identify action/destination, with new-window notice only as supplementary text | Names observed in browser accessibility output; library states can change after loading |
| A11Y-06 / medium | Homepage H1 in captured DOM is the promotional “2026 Special”; main hero headings are H2, and off-screen slide headings appear repeatedly in accessibility output | Establish a meaningful main page heading; make slide state and non-active content appropriate for assistive technology | Not claiming that any particular heading count alone establishes a WCAG failure |
| A11Y-07 / medium | Hero automatically changes imagery/text; no explicit pause mechanism identified during sample | Validate pause/stop behavior, keyboard access and reduced-motion behavior | Formal timing, focus/hover behavior and all controls not exhaustively tested |
| UX-02 / medium | Large persistent mobile header and lengthy consent blocks reduce available reading space | Evaluate compact mobile header and clear form/consent layout without nested scrolling where practical | Captured at 320px; forms were not submitted |
| CONTENT-01 / medium | Both consent checkboxes share the short label “I agree” and group heading “Consent” | Use specific, distinguishable labels and clear required/optional decisions approved by the practice | Consent policy/legal validity not assessed |
| A11Y-08 / medium | Giveaway poster contains entry instructions while the image alt is simply “Giveaway” | Supply equivalent accessible text for campaign instructions and links | Poster visually inspected; no campaign entry performed |
| UX-03 / medium | Dedicated gallery showed arrows but no visible photos after desktop-to-mobile resizing; a fresh 390px load showed four very small thumbnails in one row | Validate carousel resize handling and choose a readable mobile before/after presentation | Resizing issue observed in this session, not a claim that photos never load on mobile; both states saved |
A11Y-02 is below the usual 4.5:1 minimum for ordinary text. The appropriate reference for follow-up is W3C's WCAG 2.2 quick reference. Automatic movement should be assessed against Pause, Stop, Hide, including its conditions and exceptions. These references guide verification, not a legal certification.
Evidence images
evidence/desktop-home-1440.jpg— desktop homepage, overlays dismissed.evidence/mobile-promotion-390.jpg— cramped promotion after chat dismissal.evidence/mobile-menu-390.jpg— expanded main mobile menu.evidence/mobile-services-menu-390.jpg— expanded services submenu.evidence/mobile-home-320.jpg— narrow homepage after overlays dismissed.evidence/mobile-footer-320.jpg— narrow footer and consent controls.evidence/desktop-home-reviews-1440.jpg— rendered review cards.evidence/desktop-home-gallery-1440.jpg— gallery strip and savings highlights.evidence/home-dom-observations.json— navigation, headings, image alt values, embeds and script references.evidence/desktop-request-1440.jpg,evidence/mobile-request-390.jpg,evidence/request-dom.json— form layout and labels.evidence/desktop-service-1440.jpg,evidence/mobile-service-390.jpg— service template.evidence/desktop-article-1440.jpg,evidence/mobile-article-390.jpg— article template.evidence/desktop-blog-1440.jpg,evidence/mobile-blog-390.jpg— archive layout.evidence/mobile-patient-forms-390.jpg,evidence/patient-forms-dom.json— external intake link context.evidence/mobile-whitening-recheck-390.jpg— successful browser recheck.evidence/desktop-giveaway-poster-1440.jpg— campaign text embedded in an image.evidence/desktop-office-tour-1440.jpg— rendered panoramic view.evidence/desktop-gallery-1440.jpg,evidence/mobile-gallery-390.jpg— dedicated gallery layout.evidence/mobile-gallery-fresh-390.jpg— thumbnails present on fresh mobile load, distinguishing it from the resize issue.
Screenshots are point-in-time samples. Carousel slide and widget timing can differ between captures.
Follow-up acceptance checks
Test representative home, service, article/archive, contact/request, gallery, resources and policy templates at 320/390/768/1440 widths, 200–400% zoom and text spacing. Complete keyboard focus order, menu disclosure, dialog focus/escape/return, skip link/landmark, screen-reader name/state, contrast, image alternatives, video captions, touch target and reduced-motion checks. Test validation/error announcements only in an authorized non-production environment using synthetic data. Include third-party widgets and a usable fallback if their content cannot load. No Lighthouse, axe, screen-reader or field Core Web Vitals scores are claimed here.