Optometrist and eye care website accessibility: low-vision readers, booking, frame shops and patient forms

An eye care practice's website is used by more people with low vision than almost any other small-business site: patients with cataracts, glaucoma or macular degeneration, people who just had their pupils dilated, and people who can't find their glasses. Many zoom the page to 200% or more, use a screen magnifier, turn on high-contrast mode or have the page read aloud. Here's what to check on the pages they use most.

1. Text that still works at high zoom

Zoom your homepage to 200%, then to 400% on a narrow window. All text should still be there, nothing should overlap, the menu should still open, and the page should become one column you scroll down, not sideways. Use real text, not images of text, for offers, hours and insurance lists. (WCAG 1.4.4, WCAG 1.4.10, WCAG 1.4.5) Our readable text guide has a 5-minute test.

2. Contrast, focus and spacing

Optical brands love pale grey text and thin fonts over lifestyle photos. Body text needs at least 4.5:1 contrast, and icons, input borders and the keyboard focus outline need at least 3:1 so people can see where they are. Make sure the page still works when people add extra line and letter spacing. (WCAG 1.4.3, WCAG 1.4.11, WCAG 2.4.7, WCAG 1.4.12) See our contrast checker guide.

/* A visible focus outline that works on light and dark backgrounds */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #1a4fa0;
  outline-offset: 2px;
}

3. Booking an eye exam

Most practices use a third-party scheduler. Check you can choose the exam type ("comprehensive eye exam", "contact lens fitting"), a doctor and a time with only the keyboard, that open and booked slots aren't shown by colour alone, and that time buttons are big enough to tap. (WCAG 2.1.1, WCAG 1.4.1, WCAG 2.5.8) Put your phone number next to the booking button as named, tap-to-call text. See booking widgets.

4. Intake and history forms

Every field needs a visible label (not just placeholder text, which is often pale and vanishes as people type), related choices need a fieldset and legend, and errors must say what to fix in words. (WCAG 3.3.2, WCAG 1.3.1, WCAG 3.3.1) See accessible contact forms and form error messages.

<fieldset>
  <legend>Do you currently wear glasses or contact lenses?</legend>
  <input type="radio" id="wear-glasses" name="wear" value="glasses">
  <label for="wear-glasses">Glasses</label>
  <input type="radio" id="wear-contacts" name="wear" value="contacts">
  <label for="wear-contacts">Contact lenses</label>
  <input type="radio" id="wear-neither" name="wear" value="neither">
  <label for="wear-neither">Neither</label>
</fieldset>

5. Frame galleries, eyewear shops and virtual try-on

Give each frame photo alt text that names what a buyer needs ("Round tortoiseshell acetate frames, medium width" (example)), and put price, size and colour options in text, not only in swatches. Colour swatches need names ("Matte black", not just a black dot). Virtual try-on tools usually need a camera and a mouse; keep the same product details and a "book a fitting" or phone option on the page for people who can't use them. Test add-to-cart and checkout with the keyboard. (WCAG 1.1.1, WCAG 1.4.1, WCAG 2.1.1) See online store checkout and alt text examples.

6. Patient portals, contact lens reorders and logins

If patients log in to reorder contacts, see prescriptions or pay bills, test that the login works with a password manager, lets people paste, and doesn't depend on a puzzle CAPTCHA that's hard to see. (WCAG 3.3.8) If the portal is a vendor's, report problems to them. See CAPTCHA and login accessibility.

7. Videos, PDFs and links

Explainer videos (LASIK, dry eye, kids' vision) need captions. Offer new-patient forms and insurance lists as a web page or tagged PDF, not a scan. Name links by where they go ("Book an eye exam", not "Learn more"). (WCAG 1.2.2, WCAG 2.4.4) See accessible PDFs and video captions. Put the address, parking and entrance details on the page as plain, factual text (describe what's there; avoid a blanket "fully accessible" claim). See location pages and map embeds.

Common mistakes

• Pale grey body text over a lifestyle photo.
• The "Book now" button and menu break or overlap at 200% zoom.
• Frame colours shown only as unlabelled swatches.
• Intake forms with placeholder-only fields.
• An "overlay" widget added instead of fixing the page. See overlays vs real fixes.

A 15-minute check you can do today

1. Zoom your homepage and booking page to 200% and check nothing is cut off or overlapping.
2. Book an exam using only Tab, Shift+Tab, Space and Enter, and check you can always see where the focus is. Our keyboard test explains what to look for.
3. Submit your intake form with a required field empty and read the error out loud: does it say what to fix?
4. Pick a frame and choose a colour without looking at the swatch colours: are the options named?
5. Run a free homepage snapshot to catch low-contrast text, missing alt text, unnamed buttons and missing labels.

Platform steps: WordPress, Squarespace, Wix, Shopify. Our scan is automated, so it finds only part of the barriers on this page and doesn't test third-party booking tools, patient portals, virtual try-on or videos for you. Related: medical clinic websites, chiropractic, physical therapy and massage websites, HHS Section 504 web rule, accessibility statement template.

This is general technical guidance, not legal or medical advice, and it doesn't certify compliance with the ADA or any law.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Property management and apartment website accessibility: listings, rental applications, maintenance requests and resident portals
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.