Maria's story
Living with low vision on the web, and the barriers most teams never notice.
Barriers encountered
Text overlaps at 200% zoom
The barrier
Maria is booking a hotel room online. She zooms to 200%, her usual setting, and the page breaks. The booking form text overlaps with the sidebar, the "Submit" button disappears off-screen, and she can't tell which field she's filling in. She tries scrolling, resizing the window. Nothing helps. She gives up and calls the hotel instead.
Jeikin catches it
Jeikin flags that content is not reflow-safe: at 200% zoom, the layout breaks and information is lost. Users shouldn't need to scroll in two directions to access content.
The fix
Replace fixed-width layouts with responsive CSS that reflows content into a single column at high zoom levels. Use relative units instead of fixed pixels.
max-width: 100%; overflow-wrap: break-word;After the fix
Maria zooms to 200% and the form reflows into a single column. Every field is visible, the labels are clear, and the Submit button is right where she expects it. She books her hotel room in two minutes.
Low contrast makes text invisible
The barrier
On the same site, Maria notices the room descriptions are in light gray text on a white background. She can make out the headings, but the body text (amenities, cancellation policy, check-in time) is practically invisible to her. She has to copy-paste text into a notes app with a dark background just to read it.
Jeikin catches it
Jeikin detects that body text has a contrast ratio of only **3.2:1** against the background. The enhanced contrast requirement is 7:1 for normal text.
The fix
Darken the text color to meet 7:1 contrast ratio. For body text on white backgrounds, use colors no lighter than #595959.
color: #404040; /* 10.4:1 on white */After the fix
The room descriptions are now in dark text that Maria can read without straining. She compares rooms, reads the cancellation policy, and picks the one with free parking.
Product images without alt text
The barrier
Maria is comparing two rooms. One has a photo of a balcony with a sea view, the other shows a city-facing room. But when she zooms in, the images become blurry and she can't tell which is which. She looks for a text description. There is none. The images are purely decorative as far as the page is concerned, even though they carry essential information.
Jeikin catches it
Jeikin flags images that convey information but lack alternative text. These aren't decorative: they help users make decisions.
The fix
Add descriptive alt text that conveys the same information the image provides visually. For product images, describe what matters for the user's decision.
alt="Room with private balcony overlooking the sea"After the fix
Maria reads the alt text descriptions and immediately knows which room has the sea view. She picks it, books it, and looks forward to her trip.
What changed for Maria
- Booking form reflows properly at 200% zoom. No overlapping or hidden content.
- Room descriptions now have **7:1 contrast ratio**, readable without workarounds.
- Product images have descriptive alt text. Maria can compare rooms by reading.
WCAG criteria addressed
Catch barriers like these automatically
Jeikin finds accessibility issues and explains them in plain language, so your team can fix what matters.
npx jeikin initStart for freeBy signing up, you agree to our Terms of Service and Privacy Policy.