πŸ” Debug Test - Screen Reader

πŸ“Š Status Plugin

Checking...
Checking speech synthesis...
Animasi: βœ… Aktif
Gambar: βœ… Terlihat

Test 1: Hover Text Sederhana

Hover teks ini untuk mendengar screen reader!

Paragraf dengan aria-label (hover saya!)

Test 2: Element dengan Title

Hover saya untuk dengar title attribute

Test 3: Link dan Interaktif

Klik link ini (hover untuk dengar)

Link Tambahan untuk Struktur Halaman

πŸ§ͺ Manual Test

πŸ“ Console Output

πŸ“‹ Instruksi Testing

  1. Pastikan dev server running (npm run dev)
  2. Cek "Status Plugin" di atas - harus βœ…
  3. Klik button aksesibilitas di pojok kanan bawah
  4. Aktifkan "Screen Reader" dari menu
  5. Hover teks-teks di atas untuk dengar suara
  6. Cek console output di bawah untuk debug info

🎬 Test Animasi & Gambar:

  1. "Animasi dijeda" β†’ Semua animasi berhenti (bounce, rotate, fade, dll)
  2. "Sembunyikan Gambar" β†’ Gambar jadi transparan & grayscale
  3. Widget plugin tetap berfungsi normal (tidak terpengaruh)

⚠️ Testing Fitur Animasi & Gambar

Scroll ke bawah untuk melihat berbagai jenis animasi dan gambar. Gunakan menu aksesibilitas untuk menguji fitur "Animasi dijeda" dan "Sembunyikan Gambar".

🎬 Test Animasi - Bounce

⚽ Ini kotak bounce!

Expected: Kotak bergerak naik-turun. Saat "Animasi dijeda" aktif β†’ kotak berhenti.

🎨 Test Animasi - Rotating Icon

βš™οΈ
πŸ”„
⭐

Expected: Icon berputar 360Β°. Saat "Animasi dijeda" aktif β†’ icon berhenti berputar.

✨ Test Animasi - Fade & Pulse

🌟 Teks Fade In/Out
πŸ’“ Pulse Box

Expected: Teks fade & box pulse. Saat "Animasi dijeda" aktif β†’ semua berhenti.

🌈 Test Animasi - Rainbow Text

🎨 Rainbow Animated Text! 🎨

Expected: Warna berubah merah→orange→kuning→hijau→biru. Saat "Animasi dijeda" aktif → warna freeze.

🌊 Gradient Animation Box

Expected: Background gradien bergerak. Saat "Animasi dijeda" aktif β†’ gradien berhenti bergerak.

πŸ–ΌοΈ Test Gambar - Image Gallery

Test: Aktifkan "Sembunyikan Gambar" dari menu aksesibilitas.

Expected: Gambar hilang sepenuhnya (display: none).

πŸŽͺ Test Kombinasi - Gambar + Animasi

Test kombinasi kedua fitur:

Spinning Image Bouncing Image
Fitur Expected Behavior
"Animasi dijeda" Gambar berhenti berputar/bounce (tapi tetap terlihat jelas)
"Sembunyikan Gambar" Gambar hilang sepenuhnya (tidak terlihat sama sekali)
Keduanya aktif Gambar hilang + animasi berhenti

πŸ”” Test Animasi - Shake

Expected: Kotak goyang kiri-kanan terus-menerus. Saat "Animasi dijeda" aktif β†’ kotak berhenti goyang.

πŸ“ Testing Paragraf Teks

Gunakan paragraf di bawah untuk menguji fitur "Teks Lebih Besar", "Spasi Teks", "Tinggi garis", dan "Perataan Teks".

πŸ“– Paragraf Demo - Bahasa Indonesia

Indonesia adalah negara kepulauan terbesar di dunia yang memiliki lebih dari 17.000 pulau. Terletak di antara dua benua dan dua samudra, Indonesia memiliki posisi strategis yang sangat penting dalam perdagangan internasional. Keberagaman budaya, bahasa, dan tradisi menjadi kekayaan yang luar biasa bagi bangsa Indonesia.

Dengan populasi lebih dari 270 juta jiwa, Indonesia merupakan negara dengan populasi terbesar keempat di dunia. Keberagaman ini tercermin dalam semboyan "Bhinneka Tunggal Ika" yang berarti berbeda-beda tetapi tetap satu. Masyarakat Indonesia terdiri dari berbagai suku bangsa, agama, dan bahasa daerah yang hidup berdampingan secara harmonis.

Kekayaan alam Indonesia sangat melimpah, mulai dari hasil tambang, perkebunan, hingga kelautan. Indonesia juga dikenal sebagai negara dengan keanekaragaman hayati tertinggi kedua di dunia setelah Brasil. Hutan hujan tropis Indonesia menjadi rumah bagi ribuan spesies flora dan fauna yang unik dan langka.

🌏 Paragraf Demo - Teknologi

Perkembangan teknologi informasi di era digital saat ini mengalami kemajuan yang sangat pesat. Transformasi digital telah mengubah cara manusia berkomunikasi, bekerja, dan menjalani kehidupan sehari-hari. Internet dan smartphone menjadi bagian yang tidak terpisahkan dari kehidupan modern.

Kecerdasan buatan (Artificial Intelligence) dan pembelajaran mesin (Machine Learning) telah membuka peluang baru dalam berbagai bidang. Dari otomasi industri hingga asisten virtual, teknologi AI membantu meningkatkan efisiensi dan produktivitas. Inovasi ini terus berkembang dan memberikan dampak signifikan terhadap berbagai sektor kehidupan.

Aksesibilitas digital menjadi semakin penting untuk memastikan bahwa semua orang, termasuk penyandang disabilitas, dapat mengakses dan menggunakan teknologi dengan mudah. Fitur aksesibilitas seperti screen reader, kontras tinggi, dan navigasi keyboard membantu menciptakan pengalaman digital yang inklusif bagi semua pengguna.

πŸ“š Paragraf Demo - Pendidikan

Rata Kiri (Default): Pendidikan adalah kunci untuk membuka pintu masa depan yang lebih cerah. Melalui pendidikan, seseorang dapat mengembangkan potensi diri, meningkatkan kualitas hidup, dan berkontribusi positif bagi masyarakat. Sistem pendidikan yang berkualitas akan menghasilkan generasi yang cerdas, kreatif, dan berkarakter.

Rata Tengah: Literasi digital menjadi kompetensi penting di abad 21. Kemampuan untuk menggunakan teknologi, mengakses informasi, dan berpikir kritis sangat diperlukan dalam menghadapi tantangan global. Pendidikan harus mengintegrasikan teknologi untuk mempersiapkan siswa menghadapi masa depan.

Rata Kanan: Guru memiliki peran vital dalam membentuk karakter dan kompetensi peserta didik. Mereka tidak hanya mentransfer ilmu pengetahuan, tetapi juga menjadi inspirator dan motivator bagi siswa. Profesi guru memerlukan dedikasi, kesabaran, dan komitmen yang tinggi.

Rata Kanan-Kiri (Justify): Pembelajaran sepanjang hayat (lifelong learning) menjadi konsep penting di era yang terus berubah ini. Setiap individu perlu terus belajar dan mengembangkan keterampilan baru untuk tetap relevan. Pendidikan tidak berhenti di bangku sekolah atau universitas, tetapi berlanjut sepanjang hidup. Teknologi memfasilitasi pembelajaran mandiri melalui berbagai platform online, kursus digital, dan sumber belajar yang mudah diakses. Dengan demikian, setiap orang memiliki kesempatan untuk terus berkembang dan meningkatkan kompetensinya.

🎨 Paragraf Demo - Seni & Budaya

Seni dan budaya merupakan cerminan dari identitas suatu bangsa. Indonesia memiliki kekayaan seni dan budaya yang sangat beragam, mulai dari tarian tradisional, musik daerah, hingga kerajinan tangan yang unik. Setiap daerah memiliki ciri khas budaya yang berbeda-beda namun tetap menyatu dalam kerangka Negara Kesatuan Republik Indonesia.

Wayang, batik, angklung, dan berbagai warisan budaya Indonesia telah diakui oleh UNESCO sebagai warisan budaya dunia. Pengakuan ini menunjukkan bahwa kebudayaan Indonesia memiliki nilai universal yang tinggi dan perlu dilestarikan. Generasi muda memiliki tanggung jawab untuk menjaga dan mengembangkan warisan budaya ini agar tidak punah.

Festival seni dan budaya yang rutin diselenggarakan di berbagai daerah menjadi sarana untuk mempromosikan dan melestarikan kekayaan budaya lokal. Melalui festival ini, masyarakat dapat mengenal dan mengapresiasi keberagaman budaya Indonesia. Pelestarian budaya harus diimbangi dengan inovasi agar tetap relevan dengan perkembangan zaman.

πŸ’‘ Paragraf Demo - Singkat

Ini adalah paragraf singkat untuk testing.

Paragraf ini sedikit lebih panjang dengan beberapa kata tambahan untuk variasi.

Paragraf medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

πŸ”’ Paragraf Demo - List & Numbering

Manfaat Aksesibilitas Digital:

  1. Memungkinkan penyandang disabilitas untuk mengakses informasi dan layanan digital dengan mudah
  2. Meningkatkan pengalaman pengguna (user experience) untuk semua orang, bukan hanya penyandang disabilitas
  3. Memperluas jangkauan audiens dan meningkatkan inklusivitas produk digital
  4. Memenuhi standar dan regulasi aksesibilitas seperti WCAG (Web Content Accessibility Guidelines)
  5. Meningkatkan SEO (Search Engine Optimization) karena konten yang accessible lebih mudah dipahami oleh mesin pencari

Fitur Aksesibilitas Umum:

βœ… Testing Checklist

Fitur Testing Target Status
Teks Lebih Besar Paragraf membesar 110%, 120%, 130% βšͺ
Spasi Teks Jarak huruf & kata bertambah βšͺ
Tinggi Garis Jarak antar baris 1.5x, 1.75x, 2x βšͺ
Perataan Teks Kiri, Tengah, Kanan, Justify βšͺ
Baca Diperlambat Hover paragraf untuk mendengar suara βšͺ