Read Aloud Planner

A schedule you hear, not just see.

Inspiration

Aplikasi kalender konvensional dirancang hampir seluruhnya untuk indra penglihatan: kisi matriks (grid), kode warna (color-coded blocks), dan interaksi drag-and-drop. Bagi pengguna screen reader (seperti Rafi, mahasiswa tunanetra pengguna NVDA dan VoiceOver) serta penyandang disleksia berat, format ini adalah labirin. Konteks waktu terpecah, urutan pembacaan acak, dan informasi esensial (jam, ruang, durasi) tidak disajikan secara terpadu. Rafi sering harus meminta orang lain membacakan jadwal kuliahnya setiap pagi. Dari prinsip curb cut effect—bahwa desain yang mempermudah penyandang disabilitas akan membuat hidup semua orang lebih baik—lahirlah gagasan: mengapa jadwal harian tidak bisa didengar secara wajar dan mandiri?

What it does

Read Aloud Planner adalah perencana harian berbasis web (PWA) yang menyajikan jadwal dalam struktur kalimat linear utuh yang dapat didengar dan dinavigasi 100% tanpa tetikus (mouse):

Format Kalimat Linear Bermakna: Menghilangkan kebingungan sel matriks dengan merangkai data kegiatan menjadi kalimat alami (contoh: "Senin, 08.00, Kuliah Basis Data, 2 jam, ruang 301. Selesai.").
Audio & Takarir Sinkron: Membacakan seluruh jadwal atau kegiatan spesifik via Web Speech API klien secara sekuensial dengan pengaturan kecepatan suara (0.5x–2.0x), dilengkapi takarir visual penuh sebagai fallback.
Mode Fokus (Satu Layar Satu Kegiatan): Menghilangkan cognitive overload bagi penyandang disleksia dan ADHD dengan memusatkan perhatian pada satu tugas aktif beserta kontrol suara langsung.
Navigasi Keyboard Menyeluruh: Kendali instan tanpa mouse (S bacakan/hentikan, D tandai selesai, N tambah kegiatan, Esc tutup/keluar fokus).
Aksesibilitas Tanpa Kompromi: Dilengkapi tombol skip link, daerah siar aria-live untuk setiap pembaruan data, kontras tinggi (rasio ≥ 4.5:1), ukuran font dinamis, dan ukuran target sentuh ≥ 44×44 px.
Sinkronisasi & Kedaulatan Data: Autentikasi sesi aman (dengan opsi magic link ramah aksesibilitas), ekspor/impor dua arah (JSON dan standar iCalendar RFC 5545 .ics), serta hak penghapusan akun penuh sesuai UU PDP/GDPR.

How we built it

Kami membangun sistem secara terintegrasi dengan prinsip lightweight, nol dependensi berlebih, dan evidence-driven testing:

Backend: Node.js + Fastify (TypeScript) dengan @fastify/cookie, @fastify/helmet, @fastify/rate-limit, dan connection pool PostgreSQL. Menangani komputasi kalimat audio, zona waktu, serta pembuat/pengurai RFC 5545 iCalendar.
Frontend & PWA: HTML5 semantik murni + TypeScript modular tanpa framework overhead guna menjamin ketiadaan anomali ARIA pada DOM virtual. Dibundel via Vite, didukung Service Worker dan Web App Manifest untuk kapabilitas luring (offline-first).
Keamanan: Hashing kata sandi menggunakan bcrypt (12 putaran garam) dengan proteksi terhadap daftar kata sandi bocor (breached password filter), sesi HttpOnly/SameSite, serta pencatatan audit log.
Orkestrasi Agen Paralel: Dikembangkan menggunakan multi-agent delegation (Backend Engineer, Frontend A11y Engineer, dan QA Auditor).

Challenges we ran into

Variasi Sintesis Suara Lintas Peramban: Web Speech API memiliki perilaku dan ketersediaan suara berbeda pada setiap sistem operasi (Windows SAPI, macOS/iOS VoiceOver, Android Speech Services, Linux speech-dispatcher). Solusi: membungkus sintesis dalam kelas SpeechCoordinator yang mengisolasi kegagalan dan menyediakan kontainer teks takarir (#speech-caption-text) sebagai cadangan visual instan.
Perangkap Fokus & Modal Aksesibel: Dialog bawaan peramban (alert()) memblokir alur screen reader dan skrip otomatis. Kami menghapus seluruh dialog pemblokir dan menggantikannya dengan penanganan aria-live="polite" dan aria-live="assertive" serta penjebak fokus keyboard logis.
Standar Ketat WCAG 2.5.3 (Label in Name): Pengujian otomatis axe-core mendeteksi ketidaksesuaian antara teks tampak dan aria-label pada tombol dinamis. Kami menyelaraskan nama terakses dengan label visual secara presisi.

Accomplishments that we're proud of

100% Kepatuhan WCAG 2.2 Level AA Otomatis: Lulus audit kepatuhan tanpa pelanggaran kritis maupun serius via @axe-core/playwright pada seluruh halaman publik dan dokumentasi bantuan.
Alur Inti 100% Bebas Mouse: Seluruh operasi (pendaftaran, pengelolaan kegiatan, pembacaan audio, pengalihan fokus) dapat dioperasikan penuh hanya dengan tombol Tab, Enter, dan pintasan huruf tunggal.
Cakupan Pengujian Komprehensif: 21 pengujian unit/integrasi via Vitest (skema DB, pengurai iCal, pemformat kalimat, hashing) dan 5 pengujian E2E Playwright berjalan bersih.
Bukan Sekadar Purwarupa: Memiliki basis data PostgreSQL relasional nyata, penanganan migrasi skrip terisolasi, serta kepatuhan privasi (UU PDP).

What we learned

Aksesibilitas bukanlah fitur tambahan di akhir proyek (afterthought), melainkan arsitektur inti. Membangun dengan HTML semantik sejak awal jauh lebih kokoh daripada menambal atribut aria-* pada elemen generik.
Kalimat terstruktur linear jauh lebih ramah beban kognitif daripada representasi visual grafis, tidak hanya bagi tunanetra namun juga bagi siapa pun yang membutuhkan efisiensi hands-free.
Menggabungkan pengujian aksesibilitas otomatis (axe-core) dalam siklus integrasi berkelanjutan (CI) mendeteksi regresi sebelum kode mencapai produksi.

What's next for Read Aloud Planner

v1.1 (Ekspansi Pengingat & Suara): Penambahan Web Push Notifications terjadwal dan integrasi suara neural berbasis server (high-fidelity neural TTS) sebagai alternatif Web Speech API peramban.
v1.2 (Sinkronisasi Dua Arah): Integrasi kalender pihak ketiga melalui integrasi OAuth langsung (Google Calendar& Microsoft Outlook) via konversi format RFC 5545.
v2.0 (Uji Lapangan Pengguna): Pelaksanaan pengujian kegunaan (usability testing) berbobot klinis bersama komunitas penyandang tunanetra dan disleksia untuk menyempurnakan ritme pembacaan audio serta penambahan perintah kendali suara (Voice Input/Speech-to-Text).