Accessibility.
What the site does today. What it does not. How to report an issue.
MaterialForeman targets WCAG 2.1 Level AA. Target, not conform. No formal third-party audit has been performed, and a conformance claim without an audit is dishonest. When an audit ships, it will be logged on this page with the audit firm, the date, and the remediation items.
The following are verified in the codebase and on every page of the live site:
- Skip-to-content link. Every page ships with a "Skip to content" anchor as the first focusable element. It is visually hidden until keyboard focus, then jumps past the header to the main content region.
- Visible keyboard focus. A 2px red focus ring appears on every interactive element on keyboard focus, via
:focus-visible. Mouse clicks do not trigger the ring, so the visual is specific to keyboard users. - Language declared. Every page sets
lang="en"on the root element so screen readers apply the correct pronunciation dictionary. - Semantic landmarks. Header, main, and footer are marked with proper HTML5 landmark elements. Screen-reader landmark navigation works.
- ARIA radiogroups on segmented controls. Every waste-factor, bag-size, thickness, method, and preset selector across the fourteen calculators is a
role="radiogroup"witharia-labelledby, and each option carriesrole="radio"andaria-checked. - Full keyboard navigation on those groups. Arrow keys (Left / Right / Up / Down) move between options. Home and End jump to the first and last. Selection wraps circularly at either end. Tab moves to the next group.
- Live result announcements. Calculator result regions (the spec-slip block on every calc page) are wrapped in
aria-live="polite", so a screen reader announces updated quantities and cost ranges when inputs change, without forcing the user to tab away and back. - Reduced-motion respected. The
prefers-reduced-motion: reducemedia query collapses transition and animation durations for users who have requested reduced motion in their OS settings. - High-contrast body text. The primary ink color is deep cyanotype blue (#1d3a8a) on cream drafting paper (#f4ead5), a contrast ratio of roughly 8.4:1, well above the WCAG AA minimum for normal text.
- Tabular numerics. Calculator output numbers render in IBM Plex Mono with
font-variant-numeric: tabular-numsso digits align and cannot be misread by width. - No auto-playing media. No audio, no video, no pop-ups, no interstitials, no email gates, no cookie banners.
Listed honestly. Each item is a candidate for a future batch:
- No formal WCAG audit. No independent auditor has certified the site against WCAG 2.1 AA. Self-assessment is the only evidence behind the "target" claim above.
- Limited screen-reader testing. Hands-on testing to date has been spot-checks with VoiceOver on macOS. NVDA on Windows and JAWS have not been exercised systematically. Users reporting real-world issues are the fastest route to closing this gap.
- No print stylesheet. Printing a calculator result page works but is not specifically paginated or optimized. A user who wants a hard copy of a takeoff should use the browser's "Save as PDF" from the default layout.
Email [email protected] with "Accessibility" in the subject line. Include the page URL, the browser and version, the operating system, the assistive technology in use (screen reader, voice control, switch device, keyboard only), and a description of what was expected versus what happened. Responses aim for within one week. Fixes ship with a dated entry in the changelog.
This statement was last reviewed 2026-04-21 against the live site. It is re-audited on any material change to the calculator widgets, site navigation, or global styles.