Go Back

Railindia - IRCTC redesigned with accessibility

03

An audit and redesign of IRCTC — India's rail booking platform used by tens of millions — focused on the users it routinely fails: people with low vision and colour vision deficiency.

47
Audit findings
across 4 critical flows
~8%
Affected User Share
CVD prevalence in male users
2.1:1
Captcha contrast
needs 4.5:1
2 of 4
Flows redesigned
search, seat selection
01/ Overview

A platform fifty million people use, that fails its users in measurable ways.

IRCTC is the only legal channel to book Indian Railways tickets online. It is, in practical terms, a public utility. It is also one of the least accessible mass-scale platforms in the country.

This is a real-world accessibility audit and redesign. I tested IRCTC's booking experience against the WCAG 2.2 Level AA standard, simulated the experience for users with low vision and colour vision deficiency, and redesigned the two flows where the failures hurt most: train search and results, and seat / coach selection.

The narrative is plain: a thing fifty million people use, broken in specific measurable ways for users with vision impairments, fixed in specific measurable ways. Every claim in this document is cited to a WCAG success criterion. Every contrast ratio is measured. Every redesign is honest about what it changes and what it costs.

IRCTC website screenshot · audited interface
IRCTC website audited interface walkthrough
A thing fifty million people use, broken in specific ways, fixed in specific ways.
02/ The Problem

A national utility, broken in measurable ways.

The audit returned 47 distinct WCAG failures across four core flows. Four of them are structural — one design decision producing dozens of downstream failures.

Failures
WCAG failures Time (months)
73%
of audited components fail at least one WCAG criterion.
Decision fatigue.
47 failures across 4 critical flows. Compounding daily.
Drop-off rate
Search Captcha Booking
2.1:1
captcha contrast — needs 4.5:1 for WCAG AA.
Mid-task dip.
Users abandon at the captcha step more than any other.
Trust score
User trust Failures encountered
8%
of users have CVD — they see two states where there should be three.
Invisible bleed.
Trust drops with every silent failure.

Indian Railways carries roughly 22 million passengers daily. IRCTC handles the lion's share of online ticketing — about 1–1.5 million bookings per day, with peaks at Tatkal hours when traffic spikes 5–10×. An accessibility issue that affects 1% of users translates to 10,000+ failed bookings per day. Failures here are not edge cases. They are the size of a small city.

Why this isn't optional

India's Rights of Persons with Disabilities Act 2016 requires government services to be accessible. GIGW 3.0 — the binding standard for government websites — cites WCAG 2.1 Level AA. The European Accessibility Act (in force June 2025) extends similar requirements to any service used by EU residents, including expat and traveller bookings on IRCTC. The legal risk is real and growing.

None of this is the most important reason. The most important reason is the obvious one: fifty million people deserve to book a train without help.

03/ Research

What worked, what broke, what I changed.

Automated tools catch about 30% of WCAG issues. The other 70% need a human, a keyboard, and a screen reader.

⚙️
01 · AUTOMATED
Scanned every page.
Baseline contrast, ARIA, and structural checks across the booking flow.
axe DevTools WAVE Lighthouse Stark
👁️
02 · SIMULATED
Lived through low vision.
CVD simulation across every screen. 200% and 400% zoom for reflow checks.
Coblis Sim Daltonism DevTools rendering
⌨️
03 · ASSISTIVE TECH
Booked without sight or mouse.
Full booking flow attempted with screen reader and keyboard only. End to end.
NVDA VoiceOver Keyboard-only
04/ Insights

Five patterns across the 47 findings.

Findings on their own are a checklist. Insights are what those findings mean — the design decisions that produced them, the patterns that recur.

DEMOGRAPHIC CONTEXT
Who fails matters as much as what fails.
62M
Indians with vision impairment
2nd-largest globally
1.5%
fully blind
Census of India + WHO
8%
of men have CVD
0.5% of women
5–6%
of IRCTC users affected
skewed-male demographic
STANDARDS APPLIED
PRIMARY
WCAG 2.2 Level AA · GIGW 3.0 · EU Accessibility Act
SECONDARY REFERENCES
ARIA 1.2 authoring practices · BIS IS 17802 (Indian standard)
Disability-org guidance: Score Foundation · Mitra Jyothi · NAB
INSIGHT 01
0
parallel signals to colour
Colour is the primary status channel.
AVL / RAC / WL, errors, alerts, success — all rely on colour alone. No icon, no shape, no text label.
→ One design decision, repeated twenty times.
INSIGHT 02
8+
features competing on home page
Density is treated as a virtue.
Trip search, bookings, ad rotator, news ticker, partner promos, hotel, flight — all on one screen. Small targets. Low contrast.
→ Every feature in front equals no feature in front.
INSIGHT 03
0
ARIA live regions across the site
Dynamic content doesn't talk to AT.
Timers tick silently. Errors appear without focus shift. Confirmation modals arrive without announcement.
→ The page is alive for sighted users, frozen for SR users.
INSIGHT 04
200%
zoom — where reflow fails
Mobile-first thinking is missing.
Targets sized for mouse, not finger. The same broken layout penalises senior users on laptops and anyone on phone-landscape.
→ Built for one screen, fails on every other.
INSIGHT 05 · THE META PATTERN
Accessibility is treated as remediation, not as a design input.
Alt text exists where someone added it. Skip links exist on three pages out of forty. Focus rings vary by browser default. This is a system designed first, then partially patched.
THE DURABLE FIX
Bring accessibility into the design system.
Which is what the redesign does.
FIVE PATTERNS · ONE ROOT CAUSE
Accessibility was a checkbox, not a constraint.
Every WCAG failure traces back to this. Every design decision in the redesign treats it as a constraint instead.
05/ Competitive Analysis

How IRCTC compares to its private alternatives.

IRCTC has the inventory monopoly — only it can issue tickets — but several private apps re-skin the same flow with better UX. They're imperfect, but they establish a baseline of what India's rail booking experience could look like. The accessibility scores below are mine, on a 5-point scale, against four core WCAG criteria.

5
platforms audited
all available in market
0
passing WCAG AA
even the best alternative
25%
IRCTC web score
the audit baseline
55%
best alternative
ConfirmTkt — still failing
Scorecard
Score key: 1/5 fails badly · 2/5 partial · 3/5 acceptable · 4/5 close to pass
PLATFORM CONTRAST1.4.3 / 1.4.11 COLOUR-ONLY1.4.1 TOUCH2.5.8 KEYBD/SR2.1.1 / 4.1.2 OVERALLout of 20 NOTES
IRCTC webBASELINE 1 / 5 1 / 5 2 / 5 1 / 5
25%
5/20
The audit baseline
IRCTC Rail Connect(app) 2 / 5 1 / 5 3 / 5 2 / 5
40%
8/20
Better targets, same colour failures
ConfirmTkt 3 / 5 2 / 5 4 / 5 2 / 5
55%
11/20
Cleaner UI, still colour-leaning
Trainman 3 / 5 2 / 5 3 / 5 1 / 5
45%
9/20
Strong on prediction, weak on a11y
RailYatri 2 / 5 2 / 5 3 / 5 1 / 5
40%
8/20
Ad-heavy interferes with focus
THE TAKEAWAY
Nobody in this market is doing accessibility well.
IRCTC is the worst, but the bar is so low that even the private alternatives don't pass — an under-served space, exactly why the redesign is portfolio-worthy.
06/ Personas

Three users the system fails today.

Personas are grounded in the demographic data above and in disability-organisation interview research (Score Foundation, NAB, Mitra Jyothi published profiles). They represent the three most common ways IRCTC fails: low vision, CVD, and full blindness with a screen reader.

01
LOW VISION
👓
PERSONA 01 · LOW VISION
Asha Sharma, 64
Retired teacher · Lucknow
Books trains 8× a year
"I keep zooming in and the page breaks. My grandson does it for me now. I don't like asking him."
👁
VISION
Cataracts (mild). Uses 175% browser zoom. Prefers dark text on light bg.
💻
TECH
Chrome on a 5-year-old laptop. No assistive software.
🎯
GOAL
Lucknow → Delhi to visit grandchildren, twice a year.
TOP PAIN
Layout breaks at zoom — horizontal scroll, captcha vanishes.
WCAG HIT
1.4.101.4.112.5.8
02
CVD
🎨
PERSONA 02 · CVD
Ravi Krishnan, 32
Software engineer · Bangalore
Books 2× a month
"Half the time I have to ask my partner if a seat is available. Yellow and orange, green and brown — I genuinely cannot tell."
👁
VISION
Deuteranopia (red-green CVD). Diagnosed age 12.
💻
TECH
Power user. Multiple monitors, MacBook + iPhone.
🎯
GOAL
Frequent Bangalore ↔ Chennai trips. Urgent Tatkal slots.
TOP PAIN
AVL / RAC / WL colours indistinguishable. Misreads availability under time pressure.
WCAG HIT
1.4.1
03
BLIND
🦯
PERSONA 03 · BLIND
Meera Pillai, 28
College lecturer · Chennai
Cannot use IRCTC unaided
"I gave up. I call the helpline now — that's the only way. The form doesn't announce errors. I just hear 'please try again' with no context."
👁
VISION
Total blindness since birth (retinopathy of prematurity).
💻
TECH
NVDA on Windows 11. Full-time screen-reader user.
🎯
GOAL
Travel home to Kerala for festivals, three-four times a year.
TOP PAIN
Form errors unannounced. Image-based captcha. No skip-to-content.
WCAG HIT
1.1.12.4.13.3.14.1.3
07/ User Journey Map

Asha books a train, before and after.

Asha — the 64-year-old retired teacher with mild cataracts — tries to book a Lucknow → Delhi ticket. Six steps. Where the system fails her today, and where it doesn't in the redesign.

AS
Asha
Age64
OccupationRetired teacher
VisionCataracts, 175%
TechChrome, laptop
LocationLucknow
GoalLucknow → Delhi
OBJECTIVE
As Asha, I want to book a train ticket without help, so I can visit my grandchildren independently.
TASK ANALYSIS
  • Open IRCTC, zoom to 175%
  • Swap From / To stations
  • Search & read results
  • Enter passenger details
  • Wait for OTP
  • Receive confirmation
Redesigned Flow
6 steps · how the system supports Asha (instead of failing her)
Entry point
STEP 01
Load page Zoom 175% Reflows ✓
Single-column layout below 768px.
STEP 02
Tap swap 44×44 hit Swapped ✓
Visible label, finger-sized.
STEP 03
View results Card list Status read aloud
icon + text + colour. Reads in any state.
STEP 04
Enter PAN ARIA error Fixed in 4 sec ✓
Icon + focus + AT announce.
STEP 05
Wait for OTP 60s left? Extend? → State kept ✓
60s warning toast. Form preserved.
STEP 06
Confirmation Text + image PNR Reads it herself ✓
For the first time.
Success criteria: Asha books unaided
What changed.
The same six steps, before and after — measured by friction count and emotional state.
✕ BEFORE
IRCTC today
Step 01
Layout breaks at 175% zoom. Captcha vanishes.
Confused
Step 02
Swap button is 22×20px. Misses it twice.
Frustrated
Step 03
6-column results table. Status hidden in colour.
Lost
Step 04
Mistypes PAN. Silent error. Submits twice.
Confused
Step 05
Session times out silently. Form data lost.
Defeated
Step 06
PNR is an image. Forwards to grandson to read.
Dependent
✓ AFTER
Redesign
Step 01
Reflows to 175%. All inputs visible. Zero scroll.
Calm
Step 02
44×44 swap button with text label. Works first try.
Confident
Step 03
Card list with icon+text+colour status. Reads in any state.
Clear
Step 04
Error: red ring, icon, focus, AT announces. Fixed in 4 sec.
In control
Step 05
60s warning toast. 1-tap extend. State preserved.
Reassured
Step 06
PNR as text + image. She reads it herself.
Independent
SIX STEPS · SIX FAILURES · SIX FIXES
None require new technology — only the discipline to apply WCAG.
08/ Decisions

Five rules, one design system.

Each decision is derived from one or more findings and informs every screen that follows. They double as the acceptance criteria for the design system.

01 🎨
Never code by colour alone.
Every status — availability, error, success, warning — carries an icon, a text label, AND a colour. Remove the colour and the meaning still reads.
→ If a CVD-simulating screenshot can be understood, it passes.
WCAG
1.4.1
criterion addressed
02 Aa
Generous typography is accessibility.
Body text minimum 16px (this document uses 18px). Line-height 1.5 minimum. Max line length 70 characters. Hierarchy by size and weight, never by colour.
→ Every text combination tested against contrast.
WCAG
1.4.3 / 1.4.12
criterion addressed
03 👆
Touch targets at 44px, with 8px gutters.
Minimum 44×44px on all primary actions. 24×24 the WCAG floor on dense list rows. Never two targets within 8px of each other.
→ Designed for the worst motor control, not the average.
WCAG
2.5.8
criterion addressed
04 📢
State changes are announced, not implied.
Timers, errors, confirmations, loading, success — every state change emits an ARIA live-region announcement and visibly shifts focus.
→ Reads the same on a screen reader as it looks to a sighted user.
WCAG
4.1.3
criterion addressed
05 ⚙️
Honour the user's settings, always.
Respect prefers-reduced-motion, Windows High Contrast, system font size, browser zoom, OS-level inverted colours. Never fight the user's setup.
→ The product's job is to be polite about that.
WCAG
1.4.4 / 2.3.3
criterion addressed
09/ Usability Testing

What was tested, what comes next.

The audit is heuristic-led and assistive-tech-validated. The redesign is right, but it isn't yet proven. Honest framing of what this work has and hasn't yet earned.

✓ TESTING ALREADY DONE
01
TOOLING
Automated scans across 12 pages.
axe DevTools, WAVE, Lighthouse, Stark — catches the ~30% tools detect.
axeWAVELighthouseStark
OUTPUT
47 → 12 patterns
02
SIMULATION
CVD & low-vision simulation, 200% / 400% zoom.
Screen-by-screen for deuteranopia, protanopia, tritanopia. Reflow at 320px.
CoblisSim DaltonismDevTools
OUTPUT
CVD-stress evidence
03
ASSISTIVE-TECH
NVDA & VoiceOver, keyboard only — full booking.
End-to-end on Win 11 + NVDA and macOS + VoiceOver. Failed at form-validation, captcha, confirmation.
NVDAVoiceOverKeyboard
OUTPUT
Non-completable task
04
PROTOTYPE SELF-TEST
The redesigned slice, keyboarded through.
Real semantic <button>s, tab order, focus rings, status as icon+text+colour.
Browser protoNVDAVoiceOver
OUTPUT
Completable task
→ NEXT TESTING STILL TO DO
THE META PRINCIPLE
The hard part isn't fixing it. It's keeping it fixed.
Accessibility is a discipline, not a launch.
10/ Screen

What changes. What doesn't.

Every feature on IRCTC's booking flow is preserved. The change is in how each one is communicated — and in adding the patterns that aren't there at all.

14
Functional changes
across the entire booking flow
18
WCAG criteria addressed
Level AA + selected AAA
0
Features removed
the same product, accessible
Train search redesigned mockup
Search results card list mockup
Six things every screen does mockup
Seat map keyboard navigable mockup
The diff, feature by feature.
✕ BEFORE ✓ AFTER WCAG FIX
Train search form
1.4.33.3.2
Inline labels, 13px text, mixed contrast
Visible labels, 16px text, 4.5:1+ contrast
Station swap
2.5.82.4.4
22×20 unlabeled icon
44×44 button, "Swap stations" label
Captcha
1.1.11.4.11
Visual only, 2.1:1, no audio
reCAPTCHA v3 invisible, audio + visual fallback
Status (AVL/RAC/WL)
1.4.1
Colour only
Icon + text + colour + border
Results listing
1.4.101.3.1
6-col table, breaks at zoom
Card list, reflows below 768px
Seat selection
2.1.14.1.2
Mouse-only, 16px cells, colour status
ARIA grid, arrow-key nav, 36px buttons
Form errors
1.4.13.3.1
Red text, no announcement
Icon + text + ARIA + focus shift
Booking timer
2.2.1
7-min hard, no warning, no extension
60s warning + extend option, ARIA live
Focus indicators
2.4.72.4.11
1px, often invisible
3px ink outline, 1px white inset, 10:1 contrast
Skip-to-content
2.4.1
Absent
Visible on focus, jumps to #main
PNR / e-ticket
1.1.1
Image only, no alt
Structured text first, image second, wallet pass
Heading hierarchy
1.3.12.4.6
Multiple h1s, skipped levels
Single h1 per page, no skips
Hindi rendering
1.4.41.4.8
System fallback, conjunct blur at 13px
Devanagari-tuned font stack, min 16px
Reduced motion
2.3.3
Not honoured
prefers-reduced-motion respected
THE NET RESULT
14 functional changes. 18 WCAG criteria addressed. 0 features removed.
The same product, accessible.