AksesKita - Suite Aksesibilitas Web & Papan Bicara AAC Indonesia

Solusi Aksesibilitas Web & Komunikasi Inklusif Indonesia

Satu Skrip Ringan untuk Website Ramah Disabilitas & Komunikasi AAC

AksesKita menggabungkan toolbar aksesibilitas situs web (A11y) dan papan bicara visual (AAC) interaktif berbasis suara Bahasa Indonesia ke dalam satu Web Component tanpa dependensi eksternal.

🔊 Tunanetra

Mode Pembaca Layar & TTS Cerdas

6 Skala

Ukuran Teks (75% - 200%)

7 Tema

Kontras Visual & Filter

40+ Simbol

Papan Komunikasi AAC Indonesia

Panduan & Simulasi

Fitur Aksesibilitas Web & Pembaca Layar

Uji coba langsung bagaimana fitur pembaca layar tunanetra, penyesuaian font dinamis, dan alat visual bekerja pada konten situs web ini.

🔊

1. Pembaca Layar Tunanetra & TTS Cerdas

Fokus Utama: Alt + R (Screen Reader), Alt + P (Baca Halaman), Alt + S (Stop)

Membaca elemen bersuara otomatis saat kursor diarahkan atau saat bernavigasi menggunakan tombol Tab, pembacaan halaman kontinu, serta tombol instan saat menyeleksi teks kalimat.

👉 Coba Seleksi Teks Ini: "AksesKita dibangun dengan misi memberikan kemudahan komunikasi dan aksesibilitas tanpa hambatan bagi seluruh masyarakat Indonesia."

🔤

2. Ukuran Teks Dinamis Responsif

6 Tingkat Skala (75%, 100%, 125%, 150%, 175%, 200%)

Teks diatur secara responsif tanpa merusak struktur menu atau layout halaman, memastikan keterbacaan optimal bagi lansia dan pengguna dengan gangguan penglihatan (*low vision*).

Contoh Paragraf: Aksesibilitas digital adalah hak asasi setiap warga negara untuk mengakses layanan informasi publik secara setara.

📖

3. Mode Font Disleksia & Spasi Tipografi

Font khusus, spasi baris, spasi huruf, sorot judul & link

Mengoptimalkan bentuk huruf, jarak kata, dan *line-height* untuk mencegah kebingungan huruf yang berputar (*letter inversion*) pada pembaca disleksia.

Klik tombol "📖 Disleksia" pada panel untuk melihat perubahan bentuk tipografi pada seluruh halaman.

🎨

4. Filter Kontras & Alat Bantu Visual

Kontras Tinggi, Gelap, Terang, Monokrom, Balik Warna & Garis Pandu

Membantu pengguna dengan sensitivitas cahaya (*photophobia*), buta warna (*color blindness*), dengan garis pandu baca (*reading guide*), tirai baca (*reading mask*), dan kursor besar.

Dilengkapi Garis Pandu Baca (Reading Guide) horizontal dan Super Fokus yang mengikuti kursor mouse.

Komunikasi Alternatif

Papan Komunikasi Visual (AAC)

Dirancang khusus untuk sahabat non-verbal, autistik, disabilitas wicara, penderita afasia pasca-stroke, dan lansia.

Koleksi Kategori Simbol Bawaan

Klik kartu di bawah untuk mencoba menyusun dan mendengarkan suaranya:

🍽️ Kebutuhan 💬 Respon 😊 Perasaan 👥 Aktivitas & Orang

🍚 Mau Makan

🥛 Mau Minum

🚻 Ke Toilet

🆘 Tolong

👍 Ya

👎 Tidak

🙏 Terima Kasih

😄 Senang

Kustomisasi Kartu & Rekam Suara Sendiri

Pengguna atau terapis dapat mengunggah foto asli dan merekam suara asli via mic lokal yang tersimpan aman di IndexedDB offline.

Pemasangan Cepat

Pasang AksesKita dalam Hitungan Detik

Salin cuplikan kode di bawah ini dan tempelkan sebelum tag penutup </body> di website Anda. Kompatibel dengan semua platform tanpa konfigurasi rumit.

⚡

Non-Blocking

Dukungan async/defer asli. Berjalan mulus 60 FPS tanpa memperlambat PageSpeed (Zero TBT).

📦

Zero Dependencies

JavaScript murni < 15KB gzipped. Tidak membutuhkan jQuery atau runtime framework tambahan.

🛡️

Privasi Terjaga

Tanpa cookie pelacak, tanpa analitik pihak ketiga. Seluruh kustomisasi tersimpan lokal di browser.

🎁

100% Gratis & Open Source

Berlisensi MIT. Bebas digunakan selamanya untuk web personal, komersial, NGO, dan sekolah/kampus.

HTML, PHP, Laravel, Django

1. Web Statis & Backend Framework

Sisipkan kode di master layout utama Anda (seperti app.blade.php, layout.php, atau base.html):

✓ Shadow DOM: CSS terisolasi penuh sehingga tidak bentrok dengan Bootstrap / Tailwind.

WordPress, Blogger, Shopify & CMS

2. WordPress & Website Builder

Mudah dipasang di berbagai CMS tanpa perlu memahami koding rumit:

WP WordPress: Pasang plugin WPCode, lalu tempel kode CDN di kolom Footer Snippet (atau via functions.php).
BL Blogger: Masuk ke Tema -> Edit HTML, tempelkan sebelum tag </body>.
SH Shopify / Webflow: Tempelkan pada theme.liquid atau menu Custom Code Embed.

React, Next.js, Vue, Vite (npm)

3. Framework Modern (npm)

Pasang paket melalui npm di proyek JavaScript / TypeScript Anda:

npm install akseskita

Import sekali di entry point aplikasi (misal main.js, index.js, atau layout.jsx):

import 'akseskita'; // Di JSX/HTML template: <akseskita-widget></akseskita-widget>

Panduan Pengunjung

4. Navigasi & Fitur Asistif

1 Membuka Toolbar: Klik tombol ♿ AksesKita atau tekan Alt + A.
2 Mode Pembaca Layar: Tekan Alt + R untuk mendengar narasi elemen saat hover atau Tab.
3 Baca Seluruh Halaman: Tekan Alt + P untuk mendengar seluruh teks artikel, dan Alt + S untuk berhenti.
4 Papan Bicara AAC: Tekan Alt + C untuk membuka papan simbol bicara visual.

Delegasi ke Pengembang Website (Webmaster Handoff)

Ingin tim IT atau web developer Anda yang memasangnya? Salin instruksi teknis ini dan kirimkan ke mereka.

Subjek: Integrasi Toolbar Aksesibilitas Web AksesKita Halo Tim Developer, Tolong pasangkan toolbar aksesibilitas gratis dan open-source AksesKita (https://github.com/anasysuf/akseskita) ke website kita untuk meningkatkan standar aksesibilitas ramah disabilitas (WCAG & ADA). Pemasangannya cukup dengan menyisipkan satu skrip di footer sebelum tag penutup </body>: <script src="https://cdn.jsdelivr.net/npm/akseskita@latest/dist/akseskita.min.js" defer></script> <akseskita-widget></akseskita-widget> Spesifikasi teknis: - Performa: Ringan (< 15KB gzipped), non-blocking, zero TBT impact. - Zero Dependencies: Vanilla JS murni, CSS terisolasi dengan Shadow DOM (tidak merusak layout web). - Privasi: Tanpa tracking, tanpa cookies pihak ketiga. - Lisensi: MIT (Gratis selamanya). Dokumentasi & Demo: https://anasysuf.github.io/akseskita/ Beri tahu jika sudah terpasang. Terima kasih!

Tabel Pintasan Keyboard (Shortcuts)

Navigasi cepat dan ramah keyboard untuk pengguna tunanetra, pembaca layar, dan aksesibilitas motorik.

A11y Shortcuts

Kombinasi Tombol	Aksi & Fungsi	Kategori
`Alt` + `R`	Mode Pembaca Layar Membaca bersuara otomatis saat elemen di-hover atau kursor bergerak dengan Tab	Tunanetra
`Alt` + `P`	Mulai / Jeda Baca Seluruh Halaman Membaca berurutan dari atas ke bawah secara otomatis (Continuous Page Reader)	Tunanetra
`Alt` + `S`	Hentikan Suara Seketika Mematikan suara sintesis TTS yang sedang aktif kapan saja	Kontrol Audio
`Alt` + `A`	Buka / Tutup Panel Aksesibilitas Membuka menu kontrol aksesibilitas lengkap (A11y Toolbar Panel)	Toolbar
`Alt` + `C`	Buka / Tutup Papan Bicara AAC Membuka papan simbol bicara visual AAC Communicator	Komunikasi
`Escape`	Tutup Panel / Modal Aktif Menutup toolbar atau modal AAC yang sedang terbuka di layar	Global
`Tab` / `Enter`	Navigasi Tanpa Mouse Berpindah fokus dan memilih tombol/kartu sepenuhnya lewat keyboard	Navigasi

Hubungi Kami

Kontak & Aspirasi Inklusi

Punya ide pengembangan, pertanyaan seputar implementasi aksesibilitas, atau ingin berkolaborasi? Hubungi kami langsung melalui email pengembang.

✉️

Kirimkan Aspirasi & Masukan Anda

Kami selalu terbuka untuk masukan seputar fitur aksesibilitas web dan kebutuhan papan komunikasi AAC untuk sahabat disabilitas.

mail@anasy.is-a.dev

Kirim Email Langsung →