Accessibility statement
Accessibility
A vision-health website must work well for people with vision needs. This page documents the accessibility features built into Eye Health Guide today, with measured figures where we have verified them against the site's code, plus an honest list of what we have not done yet.
Last updated July 2026
Measured specifications
Contrast ratios below were computed with the standard WCAG relative-luminance formula directly from the colour tokens in the site's stylesheet; other figures come from the code itself.
Contrast and colour
We aim for WCAG 2.2 AA contrast as a floor, not a target. Measured with the standard relative-luminance formula against the site's own colour tokens: body text (#102230) reaches 16.2:1 on white and 15.1:1 on the lightest background tint; secondary muted text (#526675) measures 5.97:1 on white; links (#075985) measure 7.56:1; white button text on the primary colour measures 7.56:1. All of these pass the AA threshold of 4.5:1 for normal text, and body text also passes the stricter AAA threshold of 7:1. The coloured urgency badges used on symptom pages (emergency, caution, routine) were checked the same way and each passes AA for normal text.
Text size, spacing and zoom
Body copy starts at 18 px with a line height of 1.65, which eases long-form reading and magnification. Sizes are set in relative units, so the layout follows your browser's font-size preference instead of fighting it. The viewport declaration never disables pinch zoom, and no fixed pixel font is forced on the page root.
Keyboard access
Every interactive control is reachable and usable with a keyboard alone.
- A skip link is the first focusable element on every page and jumps straight to the main content
- Keyboard focus shows a 4 px solid outline with a 4 px offset, applied through :focus-visible
- Site search opens with Ctrl/Cmd + K, uses a native <dialog> (Escape closes it), and moves focus into the search field
- Filters are real buttons with aria-pressed states, and frequently asked questions use native <details> and <summary> elements
Screen-reader support
Pages are built from semantic landmarks — header, labelled navigation, main content and footer — so assistive technology can jump between regions. Each page sets its language (en, es or id) on the html element.
- Navigation regions carry labels such as “Primary navigation”, “Breadcrumb” and “Language”
- Breadcrumbs and the language switcher mark the current page with aria-current
- Search inputs have programmatic labels (visually hidden where a visible label would repeat the design)
- Filter result counts update in an aria-live="polite" region
- Decorative icons, such as the brand monogram, are hidden from assistive technology with aria-hidden
Motion and touch targets
When your operating system requests reduced motion, the site disables smooth scrolling, transitions and animations through a prefers-reduced-motion media query. Primary call-to-action buttons enforce a minimum height of 3.1 rem — roughly 50 CSS pixels at default settings — comfortably above the 44 px target size WCAG recommends.
Known limitations
We would rather be honest than claim a badge we have not earned.
- The figures above come from our own code review and calculations — the site has not yet been formally audited by an independent WCAG auditor, and we do not hold a VPAT or accessibility conformance report
- The search-results interface is provided by the Pagefind library; its internal markup is outside our full control
- The site currently ships a light colour scheme only — there is no dark mode yet
- Our Spanish and Indonesian editions are reviewed for meaning, but phrasing can always be improved — tell us if something reads awkwardly
Report an accessibility problem
If something on Eye Health Guide is hard to read, operate or understand — with or without assistive technology — we want to know. Send us the page address and a short description of what went wrong, and we will prioritise anything that blocks reading or navigation.