All work

AksaraNetra

An automated web accessibility audit engine and real-time reader mode for Indonesian public websites, built with Next.js, Node.js, and headless Playwright.

RoleFull-stack engineer
Year2025
StackNext.js · Node.js · TypeScript · Playwright
StatusLive demo
AksaraNetra accessibility audit dashboard

01Context

Digital public services in Indonesia frequently fail basic accessibility benchmarks. Government portals, university sites, and public news outlets often contain unlabelled icon buttons, low-contrast text, missing image descriptions, and broken keyboard focus rings. For visually impaired citizens relying on screen readers like NVDA or TalkBack, critical information becomes unreadable.

Existing enterprise audit tools produce dense PDF reports with hundreds of compliance codes, but offer no immediate relief to users trying to read the page today.

02The problem

Evaluating modern websites accurately cannot be done with static HTML parsers alone. Modern portals load heavy client-side JavaScript, render dynamic widgets, and hydrate asynchronously.

The platform needed to solve two challenges simultaneously: evaluate live rendered DOM nodes against WCAG 2.1 Level A & AA standards without false positives, and safely reconstruct the content into an accessible reader view without altering the original website or introducing inaccurate AI guesses.

03Approach

  • Headless Chromium pipeline with Playwright. Rather than scraping raw HTML strings, AksaraNetra launches a headless browser instance to execute scripts, resolve web fonts, and measure exact computed color contrast ratios against background elements.
  • Non-destructive remediation engine. Applies targeted, verified fixes only: injecting descriptive aria-labels where surrounding context is clear, adding tabIndex="0" to interactive scroll containers, and restructuring messy nested tags into clean semantic headings.
  • Strict validation before output. Every automated fix is re-scored. If an attempted adjustment reduces readability or fails contrast verification, the change is reverted immediately and flagged for human review.
  • Zero hallucination policy. Missing image alt text is deliberately left blank rather than filled with AI-generated guesses that could mislead blind users about official notices or data charts.
  • Privacy and public-only scope. Authentication barriers, payment gateways, and personal data forms are explicitly excluded from automated crawling to protect user privacy.

04Interface

The diagnostic interface breaks down complex accessibility data into five transparent stages: address validation, DOM inspection, rule execution, re-assessment, and reader rendering. Users can see every automated decision and inspect before-and-after issue reduction metrics side by side.

Auditor landing
Auditor landing: public URL input and quick launch
Diagnostic input
Diagnostic setup: target URL submission with government presets
Audit session state
Audit session: assessment retrieval and re-evaluation trigger
Pipeline specification
Pipeline overview: transparent 5-stage automated DOM remediation

05Outcome

AksaraNetra is deployed to production on Vercel and available open-source. On audited regional government pages, the engine demonstrated average accessibility barrier reductions of over 80% while restoring screen reader navigability.

The project was tested against real screen reader environments including NVDA and desktop keyboard navigation, proving that automated accessibility tooling can bridge the gap between compliance auditing and everyday reading.

Next
UKM Coding