♿ AksesKita

All-in-One Assistive Web Suite: Blind-Friendly Screen Reader & TTS, Unified Accessibility Panel (A11y Profiles, 6-Level Typography, 7 Contrast Schemes, Visual Aids, Motion Control) & Interactive Visual AAC Communicator Board. Zero Dependencies, Bilingual (ID/EN), < 15KB gzipped.

Pilih Bahasa / Choose Language:
🇮🇩 Bahasa Indonesia • 🇬🇧 English

🇮🇩 Bahasa Indonesia

AksesKita adalah Web Component sumber terbuka (open-source) yang menggabungkan fitur Pembaca Layar Tunanetra Cerdas (Screen Reader & Audio TTS), Toolbar Aksesibilitas Web Terpadu (A11y Unified Scroll-Down), dan Papan Komunikasi Visual (AAC Communicator) interaktif ke dalam satu skrip JavaScript ringan (< 15KB gzipped) tanpa dependensi eksternal.

Misi kami adalah menghadirkan kesetaraan akses informasi web dan kemandirian komunikasi berbantuan bagi penyandang disabilitas penglihatan/tunanetra, epilepsi/fotosensitivitas, ADHD, disleksia, disabilitas motorik, autisme non-verbal, lansia, dan penderita afasia.

✨ Fitur Unggulan Aksesibilitas Lengkap

1. 🔊 Pembaca Layar & Suara TTS Tunanetra (Fokus Utama)

• Mode Pembaca Layar Interaktif (Alt + R): Membaca elemen bersuara otomatis dengan konteks yang jelas ("Tombol: Kirim", "Tautan: Beranda", "Judul: ...") saat kursor hover atau saat bernavigasi menggunakan tombol Tab.
• Pembaca Seluruh Halaman Kontinu (Alt + P): Membaca seluruh artikel/halaman dari atas ke bawah secara berurutan dengan penyorotan visual aktif (auto-scroll highlight).
• Hentikan Suara Seketika (Alt + S): Mematikan suara sintesis seketika kapan saja.
• Pengatur Kecepatan Suara (Speech Rate): 5 pilihan kecepatan suara (0.75x, 1.0x, 1.25x, 1.5x, 2.0x) ramah pengguna tunanetra berpengalaman.
• Quick TTS Seleksi Teks: Blok kalimat apa saja di halaman web, tombol melayang "🔊 Dengarkan" otomatis muncul di atas teks pilihan.

2. 🌟 Profil Aksesibilitas 1-Klik (Preset Profiles)

• Tunanetra Total (Blind Profile): Otomatis mengaktifkan mode pembaca layar interaktif dan orientasi suara.
• Gangguan Penglihatan (Vision Impaired): Mengaktifkan kontras tinggi, memperbesar ukuran teks, serta menyorot tautan dan judul.
• Ramah ADHD (ADHD Friendly): Mengaktifkan Reading Mask (tirai baca), menghentikan animasi, dan Super Focus untuk mengurangi distraksi visual.
• Aman Kejang (Seizure Safe): Menghentikan animasi/kedipan visual dan menurunkan saturasi warna untuk mencegah pemicu kejang epilepsi.
• Kognitif & Belajar (Cognitive & Learning): Mengaktifkan font ramah disleksia, menambah spasi baris & huruf, serta garis pandu baca.
• Gangguan Motorik (Motor Impaired): Menampilkan kursor besar (Big Cursor) dan Super Focus ramah keyboard.

3. 🔤 Penyesuaian Konten & Tipografi (Typography)

• Ukuran Teks Dinamis Responsif: 6 tingkat skala teks (75%, 100%, 125%, 150%, 175%, 200%) yang aman tanpa merusak struktur menu navigasi.
• Ketebalan Teks (Font Weight): Mode cetak tebal (Bolder text) untuk kemudahan membaca.
• Spasi Baris (Line Height): 3 tingkat penyesuaian (Normal, 1.8x Lebar, 2.2x Sangat Lebar).
• Spasi Huruf (Letter Spacing): 3 tingkat kerning (Normal, +1px, +2px).
• Font Khusus Disleksia: Tipografi OpenDyslexic mode untuk mencegah pembalikan karakter.
• Sorot Tautan & Judul: Penanda visual kontras pada tautan (hyperlinks) dan heading halaman (H1-H6).
• Perataan Teks (Text Align): Kontrol perataan teks (Rata Kiri, Tengah, Kanan, Rata Kanan-Kiri).

4. 🎨 Warna & Skema Kontras (Color & Contrast)

• Kontras Tinggi (High Contrast): Latar gelap pekat (#0B0F19) dengan teks kuning terang (#FFFF00) dan tautan cyan (#38BDF8).
• Kontras Gelap (Dark Contrast): Latar hitam pekat (#121212) dengan teks putih jernih (#F8FAFC).
• Kontras Terang (Light Contrast): Latar putih bersih (#FFFFFF) dengan teks hitam pekat (#000000).
• Monokrom (Grayscale 100%): Filter abu-abu non-destruktif.
• Saturasi Rendah (Low Saturation 50%): Meredam intensitas warna bagi pengguna sensitif cahaya.
• Saturasi Tinggi (High Saturation 180%): Meningkatkan kejernihan warna bagi pengguna buta warna parsial.
• Balik Warna Cerdas (Invert): Pembalikan warna yang melindungi media (gambar, video, canvas).

5. 🔍 Alat Bantu Visual & Navigasi (Visual Aids)

• Garis Pandu Baca (Reading Guide): Penggaris baca interaktif horizontal (60 FPS requestAnimationFrame).
• Tirai Baca (Reading Mask): Meredupkan area luar dengan celah fokus horizontal mengikuti kursor.
• Super Fokus (Super Focus Mode): Meredupkan latar belakang dan menyorot elemen DOM yang sedang aktif/diarahkan.
• Kursor Besar (Big Cursor): Kursor navigasi raksasa kontras tinggi.

6. 🛠️ Utilitas & Kontrol Gerak (Usability & Motion)

• Hentikan Animasi (Stop Animations): Mematikan CSS animations, transisi, dan mem-pause video yang berputar otomatis.
• Sembunyikan Gambar (Hide Images): Menyembunyikan gambar/video untuk pengalaman membaca berbasis teks murni.
• Tooltip Gambar (Image Tooltips): Menampilkan atribut teks alternatif (alt/title) sebagai tooltip visual melayang.

7. 🗣️ Papan Komunikasi Visual AAC Dwibahasa (AAC Communicator)

• Pita Kalimat (Sentence Strip): Susun kalimat dengan mengklik kartu simbol dan dengarkan dengan efek visual highlight karaoke.
• 40+ Simbol Bawaan Dwibahasa: Kebutuhan (Needs), Respon (Responses), Perasaan (Feelings), Aktivitas & Orang (Activities & People).
• Editor Kartu Kustom: Tambah kartu foto via upload/kamera (dengan kompresi Canvas otomatis) & rekam suara asli via mic.
• Penyimpanan Lokal Offline: Tersimpan aman di IndexedDB lokal dengan fitur Ekspor/Impor JSON.

🚀 Pemasangan Cepat (Install in Seconds)

Cukup salin dan tempelkan cuplikan kode berikut tepat sebelum tag penutup </body> pada website Anda:

<script src="https://cdn.jsdelivr.net/npm/akseskita@latest/dist/akseskita.min.js" defer></script>
<akseskita-widget></akseskita-widget>

⚡ Mengapa AksesKita?

• Non-Blocking & Performa Tinggi: Mendukung atribut defer/async bawaan, berjalan halus pada 60 FPS tanpa memperlambat skor PageSpeed (Zero TBT impact).
• Nol Dependensi (Zero Dependencies): JavaScript murni (vanilla) berukuran sangat ringan (< 15KB gzipped). Tidak membutuhkan jQuery, React, atau framework berat lainnya.
• Privasi Terjaga (No Tracking): Arsitektur ramah privasi. Tidak menggunakan cookie pelacak, tidak mengumpulkan data pengguna, dan seluruh data kustom disimpan secara lokal di IndexedDB browser.
• 100% Gratis & Open Source: Berlisensi MIT. Bebas digunakan untuk website personal, komersial, instansi pemerintah, yayasan sosial, maupun pendidikan.
• Kompatibilitas Universal: Terisolasi menggunakan Shadow DOM sehingga tidak merusak gaya CSS atau bentrok dengan JavaScript website target.

🛠️ Panduan Integrasi per Platform

1. HTML Statis & Framework Backend (Laravel, CodeIgniter, Django, Flask, PHP Native)

Letakkan cuplikan kode di file template/layout utama (seperti app.blade.php, layout.php, atau base.html) sebelum tag penutup </body>:

<script src="https://cdn.jsdelivr.net/npm/akseskita@latest/dist/akseskita.min.js" defer></script>
<akseskita-widget></akseskita-widget>

2. WordPress

• Metode 1 (Plugin Header/Footer): Pasang plugin seperti WPCode atau Insert Headers and Footers, lalu tempelkan kode di atas pada bagian Footer Snippet.
• Metode 2 (functions.php Tema):

  add_action('wp_footer', function() {
      echo '<script src="https://cdn.jsdelivr.net/npm/akseskita@latest/dist/akseskita.min.js" defer></script><akseskita-widget></akseskita-widget>';
  });

3. CMS & Website Builder Lainnya

• Blogger / Blogspot: Buka menu Tema -> Edit HTML, lalu letakkan kode tepat sebelum </body>.
• Shopify: Buka Online Store -> Themes -> Edit code, buka file theme.liquid, dan tempelkan kode sebelum </body>.
• Webflow / Framer / Wix / Squarespace: Buka pengaturan Custom Code / Embed, lalu tempelkan kode di kolom Footer Code.

4. React, Next.js, Vue, Nuxt, Svelte & Vite (via npm)

npm install akseskita

• React / Vite / Single Page App:

  import 'akseskita';
  
  function App() {
    return (
      <div>
        <akseskita-widget></akseskita-widget>
        {/* Konten website */}
      </div>
    );
  }

• Next.js (App Router):

  'use client';
  import { useEffect } from 'react';
  
  export default function RootLayout({ children }) {
    useEffect(() => {
      import('akseskita');
    }, []);
  
    return (
      <html lang="id">
        <body>
          {children}
          <akseskita-widget></akseskita-widget>
        </body>
      </html>
    );
  }

📋 Template Delegasi ke Pengembang (Webmaster Handoff)

Jika Anda ingin tim IT / web developer Anda yang memasangnya, silakan salin pesan berikut:

Subjek: Integrasi Toolbar Aksesibilitas Web AksesKita

Halo [Nama 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 akan 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!

⌨️ Pintasan Keyboard Lengkap

| Pintasan | Fungsi | |---|---| | Alt + R | Aktif / Nonaktifkan Mode Pembaca Layar (Screen Reader Navigation) | | Alt + P | Mulai / Jeda Baca Seluruh Halaman (Continuous Page Reader) | | Alt + S | Hentikan Suara Seketika (Instant Stop Speech) | | Alt + A | Buka / Tutup Panel Aksesibilitas (Toolbar A11y) | | Alt + C | Buka / Tutup Papan Komunikasi Visual (AAC Modal) | | Escape | Menutup panel atau modal yang sedang aktif | | Tab / Enter | Navigasi dan pemilihan elemen / kartu tanpa mouse |

🇬🇧 English

AksesKita is an open-source, zero-dependency Web Component that combines a Blind-Friendly Screen Reader & TTS Engine, a Unified All-in-One Accessibility Toolbar, and an interactive Visual AAC Communicator Board into a single lightweight script (< 15KB gzipped).

✨ Complete Accessibility Features

1. 🔊 Screen Reader & Audio TTS (Primary Focus)

• Screen Reader Mode (Alt + R): Speaks elements aloud with clear contextual roles ("Button: Submit", "Link: Home", "Heading 2: ...") on cursor hover or Tab navigation.
• Continuous Page Reader (Alt + P): Reads entire page/article from top to bottom with auto-scrolling sentence highlighting.
• Instant Speech Stop (Alt + S): Immediately stops active speech synthesis.
• Configurable Speech Rate: 5 speed presets (0.75x, 1.0x, 1.25x, 1.5x, 2.0x).
• Selection Quick TTS: Highlight text on any page to show the floating "🔊 Listen" action button.

2. 🌟 1-Click Accessibility Profiles

• Blind Profile: Automatically turns on interactive screen reader navigation and speech orientation.
• Vision Impaired Profile: Enhances contrast, enlarges font size, and highlights hyperlinks & headings.
• ADHD Friendly Profile: Activates Reading Mask curtain, stops background motion, and enables Super Focus.
• Seizure Safe Profile: Eliminates flashing triggers, stops CSS animations, and reduces color saturation.
• Cognitive & Learning Profile: Applies OpenDyslexic typography, expands line & letter spacing, and enables Reading Guide.
• Motor Impaired Profile: Enables the Big Cursor and keyboard-friendly Super Focus navigation.

3. 🔤 Content & Typography Adjustments

• Responsive Dynamic Font Scaling: 6 scale presets (75%, 100%, 125%, 150%, 175%, 200%) designed to preserve menu layout integrity.
• Font Weight: Bold text toggle for enhanced contrast.
• Line Height: 3 spacing presets (Normal, 1.8x, 2.2x).
• Letter Spacing: 3 kerning presets (Normal, +1px, +2px).
• Dyslexia Font: OpenDyslexic typeface mode.
• Highlight Links & Headings: Distinct visual badges for links and H1-H6 headers.
• Text Alignment: Left, Center, Right, and Justified alignment.

4. 🎨 Color & Contrast Schemes

• High Contrast: Dark background (#0B0F19) with bright yellow text (#FFFF00) and cyan links (#38BDF8).
• Dark Contrast: Pitch-black background (#121212) with clear white text (#F8FAFC).
• Light Contrast: Crisp white background (#FFFFFF) with deep black text (#000000).
• Monochrome: 100% grayscale filter.
• Low Saturation (50%): Mutes vivid colors for photosensitive users.
• High Saturation (180%): Boosts color saturation for partial color deficiency.
• Smart Invert: Media-safe color inversion.

5. 🔍 Visual & Navigation Aids

• Reading Guide: Horizontal interactive ruler running at smooth 60 FPS (requestAnimationFrame).
• Reading Mask: Dimmed screen mask with a clear horizontal focus slit.
• Super Focus: Spotlights the active/hovered DOM element.
• Big Cursor: Large high-contrast custom mouse pointer.

6. 🛠️ Usability & Motion Utilities

• Stop Animations: Disables all CSS animations, transitions, and pauses autoplaying videos.
• Hide Images: Hides media elements for distraction-free text-only browsing.
• Image Tooltips: Displays alt/title text as a floating visual tooltip.

7. 🗣️ Visual AAC Communicator Board

• Sentence Strip Builder: Build phrases by clicking symbol cards with sequential spoken audio playback.
• 40+ Bilingual Default Cards: Needs, Responses, Feelings, Activities & People.
• Custom Card Creator: Device photo upload with automatic Canvas compression + microphone voice recorder.
• Local Offline Storage: Saved securely in client-side IndexedDB with JSON backup/restore.

🚀 Install in Seconds

Copy and paste this single snippet before the closing </body> tag of your website:

<script src="https://cdn.jsdelivr.net/npm/akseskita@latest/dist/akseskita.min.js" defer></script>
<akseskita-widget></akseskita-widget>

⚡ Why AksesKita?

• Non-Blocking & High Performance: Native defer/async support, running at smooth 60 FPS without impacting PageSpeed or Total Blocking Time (Zero TBT).
• Zero Dependencies: Pure vanilla Javascript (< 15KB gzipped). No jQuery, React, or heavy third-party runtimes required.
• Privacy-First (No Tracking): No cookies, no trackers, and all custom data is stored locally in client-side IndexedDB.
• 100% Free & Open Source: MIT Licensed. Free forever for personal, commercial, government, and educational websites.
• Universal Compatibility: Isolated with Shadow DOM to prevent any CSS/JS conflicts with your website template.

🛠️ Platform Integration Guides

1. Static HTML & Backend Frameworks (Laravel, Django, PHP, CodeIgniter, Flask)

Add the snippet in your main layout file (app.blade.php, layout.php, base.html) before </body>:

<script src="https://cdn.jsdelivr.net/npm/akseskita@latest/dist/akseskita.min.js" defer></script>
<akseskita-widget></akseskita-widget>

2. WordPress

• Plugin Option: Install WPCode or Insert Headers and Footers, then paste the snippet in the Footer Snippet box.
• functions.php Option:

  add_action('wp_footer', function() {
      echo '<script src="https://cdn.jsdelivr.net/npm/akseskita@latest/dist/akseskita.min.js" defer></script><akseskita-widget></akseskita-widget>';
  });

3. CMS & Website Builders

• Blogger: Go to Theme -> Edit HTML and paste before </body>.
• Shopify: Paste before </body> in theme.liquid.
• Webflow / Framer / Wix / Squarespace: Paste into the Custom Code / Footer Embed settings.

4. React, Next.js, Vue, Nuxt, Svelte & Vite (via npm)

npm install akseskita

• React / Vite / SPA:

  import 'akseskita';
  
  function App() {
    return (
      <div>
        <akseskita-widget></akseskita-widget>
        {/* Your content */}
      </div>
    );
  }

• Next.js (App Router):

  'use client';
  import { useEffect } from 'react';
  
  export default function RootLayout({ children }) {
    useEffect(() => {
      import('akseskita');
    }, []);
  
    return (
      <html>
        <body>
          {children}
          <akseskita-widget></akseskita-widget>
        </body>
      </html>
    );
  }

📋 Developer Handoff Message Template

Copy and forward this message to your developer:

Subject: Technical Update: Adding AksesKita Accessibility Toolbar

Hi [Developer Name],

I'd like to integrate AksesKita (https://github.com/anasysuf/akseskita) on our website to enhance WCAG & ADA compliance and assist users with disabilities.

Installation is a simple snippet before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/akseskita@latest/dist/akseskita.min.js" defer></script>
<akseskita-widget></akseskita-widget>

Technical specifications:
- Performance: Ultra-lightweight (< 15KB gzipped), non-blocking, zero TBT impact.
- Zero Dependencies: Pure vanilla Javascript, isolated with Shadow DOM (won't conflict with existing styles).
- Privacy: No tracking, zero cookies, offline local storage.
- License: MIT (100% Free forever).

Live Demo & Docs: https://anasysuf.github.io/akseskita/

Please let me know once it is live!

⌨️ Keyboard Shortcuts

| Shortcut | Action | |---|---| | Alt + R | Toggle Screen Reader Mode (Hover & Tab Navigation) | | Alt + P | Start / Pause Continuous Page Reader | | Alt + S | Instant Stop Speech | | Alt + A | Open / Close Accessibility Toolbar (A11y Panel) | | Alt + C | Open / Close AAC Communicator Board | | Escape | Dismiss active panel or modal | | Tab / Enter | Navigate and activate elements/cards via keyboard |

📄 License

Distributed under the MIT License. Free for commercial, educational, NGO, and personal websites.