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 8 September 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.
Reading settings
Use the Aa button to choose larger text, black text on white with high contrast links, or a simple reading layout. Preferences stay in this browser and apply across languages. You can reset them at any time. Browser zoom remains available.
Contrast and colour
These calculations use the September 2026 palette: body text #183b36, secondary text #53625b and links #205c4e against the main background #faf9f5. The measured ratios are 11.60:1, 6.10:1 and 7.38:1 respectively. They exceed the 4.5:1 minimum for normal text under WCAG AA. These selected colour pairs do not establish conformance for every component or interaction.
Text size, spacing and zoom
The body base is 18 px with a line height of 1.7. Article paragraphs and interface elements use their own sizes, including relative units. Browser zoom and pinch zoom remain available. A range of devices and assistive technologies still needs independent testing.
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
The site responds to reduced-motion preferences by disabling smooth scrolling, transitions and animations. Header controls have a minimum height of 44 CSS pixels; the homepage search button has a minimum height of 46 pixels. These measurements describe those controls, not every link on the site.
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
- A high contrast light theme is available; dark mode is not currently offered. The printable PDFs have an equivalent HTML version, which is preferable for screen readers.
- 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.