---
title: "Accessibility | Eye Health Guide"
description: "How Eye Health Guide is built for accessibility: measured contrast, keyboard support, reduced motion, and how to report a barrier."
url: https://eyehealthguide.org/accessibility/
source: Eye Health Guide
licence: "General information only. Cite the URL and the named medical reviewer."
---

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

Quick answer

Eye Health Guide supports keyboard navigation, screen readers, browser zoom and reduced-motion preferences. The body text colour has a calculated contrast ratio of 11.60:1 against the main cream background. This page describes the implemented features and known limitations; it is not an independent accessibility certification.

## 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.

11.60:1 (#183b36 on #faf9f5)

6.10:1 (#53625b on #faf9f5)

7.38:1 (#205c4e on #faf9f5)

4 px outline with 4 px offset; #ab471d on #faf9f5 measures 5.46:1

Body base: 18 px, line height 1.7; individual elements use other sizes

Header controls: minimum height 44 px; homepage search button: 46 px

present on every page, translated into the page language

honoured through the prefers-reduced-motion media query

lang and text direction set on every page (en, es, id — all left-to-right)

pinch zoom and browser text scaling are never disabled

## 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.

[Contact us about accessibility](https://eyehealthguide.org/contact/)
