Review Hub Live site ↗

Homepage · Standards Improvement

The same page, rebuilt to standard.

Every word and the visual identity are preserved. What changed is everything a browser, a screen reader, and a search or answer engine actually read. Compare the two states below, then see the full list of fixes.

<h1>s 4 stat numbers → 1 headline Structured data none → 7 schema types Images missing alt — → 0 Theme light only → light + dark

Before / After

Live comparison

Improved site theme
Before — original datascalehr.comFull screen ↗
After — standards rebuild datascalehr-homepage-improved.htmlFull screen ↗

Both panes are the real, scrollable pages served locally. The rebuild renders in your system light/dark theme; toggle your OS theme to see dark mode.

The headline fixes

Three concrete defects the standards caught

Meaningless heading structure

The only four <h1>s on the page were stat numbers; the actual headline was not a heading at all.

Before<h1>2M+</h1> ×4 (180+, 1,100+, 100%)
AfterOne <h1>: “Payroll data is a mess. We fix that.”

Leaked blog metadata

The homepage’s Twitter card carried a blog post’s byline and read-time.

Beforetwitter:data1 = "Jerome Gouvernel", "21 minutes"
AfterCorrect card: title, description, image — no leakage

No sharing image / structured data

Missing og:image and no clean homepage schema for rich results / AI answers.

BeforeNo og:image; no Organization / FAQ / Review schema
Afterog:image + JSON-LD graph (7 types)

Full changelog

Every improvement, by quality domain

1

Semantic Web & Structured Data

  • Added a full JSON-LD @graph: Organization, WebSite, WebPage, ImageObject, Service, SoftwareApplication, FAQPage.
  • AggregateRating + all 5 customer Review objects with author attribution.
  • Four solution tabs re-expressed as an FAQPage — liftable by Google & AI answer engines.
2

Web Platform & Semantic HTML

  • Valid <!doctype>, real landmark tree: header / nav / main / section / footer.
  • Single H1, then ordered H2 → H3 hierarchy across every section.
  • <blockquote> + <figcaption> for testimonials; <dl> for stat pairs.
3

Accessibility — WCAG 2.2 / ARIA APG

  • Skip link + visible :focus-visible rings (2.4.7 / 2.4.11).
  • Solution tabs use the ARIA tabs pattern with arrow / Home / End keys.
  • All targets ≥ 44px (2.5.8); aria-labels on icon controls; 0 images missing alt.
  • Respects prefers-reduced-motion.
4

Performance — Core Web Vitals

  • Font preconnect + display:swap; system-font fallback prevents invisible text.
  • All-inline CSS, minimal dependency-free JS — no render-blocking chain.
  • Layout reserves space to avoid CLS; below-fold iframes lazy-loaded.
5

Search, SEO & GEO / E-E-A-T

  • De-duplicated <title>, real meta description, canonical, robots directives.
  • Corrected Open Graph (with image) and Twitter card — removed leaked blog data.
  • Review attribution + benchmarked, “independently validated” metrics kept as trust signals.
6

Design Systems & UX

  • CSS custom-property design tokens (color, space, type, radius, shadow).
  • Fluid clamp() type scale; Gestalt grouping of related content.
  • Full prefers-color-scheme dark mode — the original was light-only.
7

Content & Editorial

  • Core body copy (hero, testimonials, solution tabs, results, how-it-works) kept verbatim — same message, same voice.
  • Consistent punctuation (en-dashes, curly quotes) and sentence-case headings.
  • Deliberate editorial changes at your direction: a funnel of a soft “Learn More” hero CTA → a hard “Request a Meeting” close, plus an added benchmark source line.
  • Sections intentionally re-sequenced (ROI calculator moved mid-page); the original bottom calculator CTA was replaced by the closing CTA.

Round 2 · beyond parity

Six opportunities applied

Prompted by standards in the library that the first pass didn’t yet use. The after pane above now reflects all of these, plus visual parity with the original (hero graphic, partner logos, and the interactive ROI calculator mid-page), a soft “Learn More” hero CTA that anchors to the client logos, and a single hard “Request a Meeting” CTA at the foot of the page.

O1

Compliant consent

  • Reject all is now exactly as prominent as Accept all — fixes the live site’s dark-pattern asymmetry.
  • Analytics/marketing default off (opt-in, no pre-ticking); neutral decline wording.
  • Grounded in gdpr, eprivacy, deceptive-patterns (Obstruction / Preselection / Confirmshaming).
O2

GEO / answer-engine

  • Speakable schema marks the hero + how-it-works answers for voice/AI surfacing.
  • Benchmarks now cite their source; stats kept liftable and attributed.
  • Grounded in geo-tactics + google-rich-results/Speakable.
O3

Expanded structured data

  • Added ContactPoint, Service, Offer, SearchAction, ImageObject to the graph.
  • Eligible for the Organization rich result + a sitelinks search box.
  • Grounded in five more schema.org types.
O4

Accessibility statement / VPAT

  • New accessibility.html — WCAG 2.2 AA + EN 301 549 conformance, VPAT-style table.
  • Linked from the footer; enterprise-procurement ready.
  • Grounded in vpat, en-301-549, section-508.
O5

Content provenance

  • Hero graphic modelled as ImageObject with IPTC creator / credit / copyright / caption.
  • Documents where a C2PA Content Credentials manifest is embedded at export.
  • Grounded in c2pa + iptc-photo-metadata.
O6

INP / Lighthouse / readability

  • Interaction handlers use passive listeners, avoid layout thrash (INP).
  • One small inline script — no framework/unused JS to flag.
  • Grounded in core-web-vitals/INP, lighthouse, readability-formulas.

Provenance

Library standards referenced

Every improvement is grounded in a defined object in the standards library — 95 files across 15 groups, each with why it applied and its full text reproduced verbatim. The full appendix lives on its own page to keep this review light.

Open the standards appendix (95 files) →