A student-led mental health initiative offering peer support, psychoeducation and academic mentorship to Sri Lankan O/L and A/L students, free. I designed and built the site and still maintain it, for an audience of teenagers on mid-range Android phones and metered mobile data.

Accessibility is usually a pass at the end of a project, which is why it usually fails. The people most likely to need a keyboard, a screen reader or reduced motion are the least likely to return and try again if the site does not work. Building to WCAG 2.1 AA from the first commit meant arguing for every interactive pattern before writing it, and giving up conveniences a retrofit would have kept.

The audience is on the worst hardware

Crisis information cannot be one click away

A non-clinical service that reads as clinical

Accessibility decays without a gate

Static export with a measured critical path

Two coordinated focus traps, focus restore that checks containment first, and inert rather than per-child tabindex. Each choice sits beside the failure that forced it.

Contrast measured, then fixed at the point of use

Reduced motion that keeps the meaning

The Soul Care is run by students, for students: peer listening, psychoeducation, academic mentorship and referrals, all free. The brief was a site that could carry that credibly to Sri Lankan O/L and A/L students, and to the parents and teachers deciding whether to trust it.

One constraint decided most of the rest. The readers are teenagers on mid-range Android phones and metered mobile data, often looking for something they would rather not be seen looking for. That rules out a heavy first load, and anything that only works with a mouse. It also rules out treating accessibility as a final pass, because a retrofit fixes what a tool can detect and leaves the rest.

So the site was built to WCAG 2.1 AA from the first commit.

The research that changed the most decisions was not about visual preference. It was about reading conditions.

A student under exam pressure scans rather than reads, on a small screen, in one sitting. So the article measure is capped near 71 characters, expressed in em rather than ch, because a ch is the width of a zero and lands far looser than the character count implies.

I also scored every article on Flesch-Kincaid. Eleven of the twelve read at grade 5 to 7. One reads at 11.9. To be straight about it, that score has not changed anything yet: the measure was set by the line-length reasoning above, not by the readability numbers, and the article at 11.9 is still on the list unedited. It is a check I run and have not yet acted on.

The second finding was about placement. Someone in real distress will not go looking for a helpline, so the National Mental Health Helpline number sits in the footer of every page, in a single component that exists so the wording cannot drift. It appears again inline wherever the surrounding content could reach someone who needs it: under the testimonial wall, inside the two heaviest options on the mood check-in, and ahead of the body copy on nine of the twelve articles.

Contrast was measured rather than eyeballed, and two brand accents failed: the cyan and green tokens sat at 3.5:1 under small bold labels needing 4.5:1. Changing the tokens outright would have broken uses already correct at larger sizes, so both are mixed 15% toward black at the point of use, with the before and after ratios written into the stylesheet beside the fix.

Most of the work went into focus management, because that is where sites fail quietly. The drawer returns focus to the hamburger on close, but only after checking focus is still inside the drawer, so closing by tapping a link does not yank the reader backwards after they have navigated. The drawer and the search dialog each install a tab trap and each stands down while the other is open, because two traps fighting over focus is worse than none. The closed drawer leaves the tab order via inert, after a per-child tabindex attempt silently missed the shared logo.

Reduced motion runs in three layers, and one distinction matters more than the rest. The scroll reveal keeps its fade and drops only the rise, because the fade is what tells a reader new content has arrived. Removing it takes away information, not movement.

Static export came first and cascaded. With no server there is no image optimisation at request time, so every image is hand-converted to WebP and served at one size with no srcset. That is a real loss, traded for a site that is a folder of files on a CDN with nothing to fall over.

The decision I would defend least comfortably is that the animation and search libraries all mount from the root layout. That is roughly 190KB of uncompressed JavaScript on every route, including pages using none of it. Smooth scroll is not even instantiated under reduced motion, but the bytes still ship, because the import is static. I shipped it knowing that, on the grounds that the motion carries the calm the product needs. On a low-end Android it is the wrong trade, and the first thing I would undo.

The site is English only. The webinars are delivered in Sinhala and students search in Sinhala and Tamil, so this is a real gap rather than an oversight. I chose not to start, on the reasoning that a half-translated tree going stale is worse than an honest English-only site.

I would put an automated accessibility check in the pipeline, because there is none. No axe, no lint rule, no tests; the build is the only gate. Every decision here rests on hand-written implementation and reasoning left in comments, which decays as soon as someone else touches it.

Running axe while writing this made the point better than I could. Measured on 2026-09-09 with Lighthouse 12.8.2 and axe-core 4.13.0 across six pages: SEO 100 and a layout shift of 0 on every run, and accessibility 100 with no violations on five of the six. The resources index is the sixth. It has six real contrast failures, at 3.48:1 and 3.18:1, in the two places the color-mix fix I had already written was never applied. A check in CI would have caught it in the commit that introduced it.

Several ARIA gaps come next. The desktop dropdowns open on hover and focus with no expanded state, no Escape and no arrow keys, which makes them the weakest widget on the site. Both search fields rebuild results as you type with no live region, so a screen reader user gets silence.

The webinars are the largest gap, and the one that most directly affects the people the site is for: five sessions of Sinhala-language audio with no captions and no transcripts, which fails 1.2.2 and 1.2.3 plainly.

This is the work I do on one. Measure what it actually scores rather than what it feels like. Fix the contrast, the focus order and the keyboard traps. Cut what is slowing the first load, which on most sites is JavaScript that only one page needs. You get the before and after numbers, with the tool and the version that produced them, not an assurance that it is better now.

Two honest caveats. This site was built from scratch, so there is no before and after pair here to show you, only a current state. And as the section above says, I found six live failures on my own site while writing this. That is the standard I am offering: measured, named, and fixed where it is fixed, rather than claimed.

The homepage hero. It leads with what the service offers, not a login screen or a mission statement, so a first-time visitor knows what this is before they scroll.

The "How we show up" section, breaking peer support, webinars, psychoeducation and community engagement into cards a reader can scan in seconds rather than a paragraph.

The about section, stating the mission in plain language and staying non-clinical, which is the line the whole site has to hold.

The volunteer page, splitting the volunteer and academic mentor paths before either form asks a single question.

Testimonials next to the numbers behind them, nine volunteers and an advisory board of eight, so the claim of student-led support has something to point at.

The resources page, with recorded webinars playable in place so a student never has to leave the page to watch one.

The mobile drawer, with nine destinations grouped under section labels and both calls to action pinned at the bottom.

Live at thesoulcare.org and still maintained. A folder of static files with no server to fall over, nothing on the page jumping while it loads, and every page working on a keyboard and a screen reader. So far it has carried 12 published resources and five recorded webinars to 70+ students. One page, the resources index, still fails on contrast.