From 0d680b2fa5ad078bf232b0a9c9e7b1ee5f71b80a Mon Sep 17 00:00:00 2001 From: Mas Budi Kusuma Date: Tue, 15 Sep 2026 23:54:54 +0700 Subject: [PATCH] feat(a11y): integrasi variabel teks tombol whatsapp dan web speech synthesizer audio reader --- footer.php | 83 +++++++++++++++++++++++++++++++++++++++++++--- inc/admin-menu.php | 34 ++++++++++++++----- style.css | 13 ++++++++ 3 files changed, 118 insertions(+), 12 deletions(-) diff --git a/footer.php b/footer.php index 6d52dd5..2db20b2 100644 --- a/footer.php +++ b/footer.php @@ -11,6 +11,9 @@ $wa_clean = preg_replace( '/[^0-9]/', '', $raw_telp ); if ( substr( $wa_clean, 0, 1 ) === '0' ) { $wa_clean = '62' . substr( $wa_clean, 1 ); } + +$wa_btn_label = get_option( 'edukarsa_wa_btn_text', 'Tanya PMB' ); +$wa_def_msg = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.' ); ?> @@ -136,7 +139,7 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) { - +
+ +
+ Pembaca Suara (Audio) +
+ + +
+
+
Ukuran Teks
@@ -178,11 +190,11 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
- + - + - Tanya PMB + @@ -302,7 +314,70 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) { localStorage.removeItem('edukarsa_a11y_grayscale'); localStorage.removeItem('edukarsa_a11y_links'); applyA11y(); + if ('speechSynthesis' in window) { + window.speechSynthesis.cancel(); + const pBtn = document.getElementById("a11y-speak-play"); + if (pBtn) { pBtn.classList.remove('speaking'); pBtn.innerText = "🔊 Baca"; } + } }); + + // 4. Fitur Suara Text-to-Speech (Web Speech API Native) + const speakPlayBtn = document.getElementById("a11y-speak-play"); + const speakStopBtn = document.getElementById("a11y-speak-stop"); + + if ('speechSynthesis' in window && speakPlayBtn) { + const synth = window.speechSynthesis; + + speakPlayBtn.addEventListener("click", function() { + if (synth.speaking) { + synth.cancel(); + } + + // Ambil konten teks utama artikel atau bodi halaman + const contentEl = document.querySelector("article .entry-content") || document.getElementById("primary") || document.body; + const textToRead = contentEl.innerText.replace(/\s+/g, ' ').trim(); + if (!textToRead) return; + + const utterance = new SpeechSynthesisUtterance(textToRead); + + // Deteksi bahasa yang sedang aktif + const match = document.cookie.match(/googtrans=\/id\/([a-zA-Z\-]+)/i); + const activeLang = match ? match[1].toLowerCase() : 'id'; + + if (activeLang === 'en') { + utterance.lang = 'en-US'; + } else if (activeLang === 'ar') { + utterance.lang = 'ar-SA'; + } else { + utterance.lang = 'id-ID'; + } + + utterance.rate = 0.95; // Kecepatan baca ideal untuk artikulasi jelas + + utterance.onstart = function() { + speakPlayBtn.classList.add('speaking'); + speakPlayBtn.innerText = "🔊 Membaca..."; + }; + + utterance.onend = utterance.onerror = function() { + speakPlayBtn.classList.remove('speaking'); + speakPlayBtn.innerText = "🔊 Baca"; + }; + + synth.speak(utterance); + }); + + speakStopBtn?.addEventListener("click", function() { + if (synth.speaking) { + synth.cancel(); + speakPlayBtn.classList.remove('speaking'); + speakPlayBtn.innerText = "🔊 Baca"; + } + }); + } else if (speakPlayBtn) { + speakPlayBtn.style.display = 'none'; + if (speakStopBtn) speakStopBtn.style.display = 'none'; + } } }); diff --git a/inc/admin-menu.php b/inc/admin-menu.php index 7bb821f..e6d1774 100644 --- a/inc/admin-menu.php +++ b/inc/admin-menu.php @@ -61,6 +61,7 @@ function edukarsa_register_settings() { 'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color', 'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url', 'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam', + 'edukarsa_wa_btn_text', 'edukarsa_wa_default_msg', 'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok', 'edukarsa_tampil_x', 'edukarsa_footer_x', 'edukarsa_footer_copyright', 'edukarsa_custom_css' ); @@ -192,10 +193,10 @@ function edukarsa_settings_page_html() {
- ♿ Fitur Aksesibilitas Disabilitas (WCAG Toolbar) - ?Menampilkan tombol melayang di pojok kiri bawah untuk pengunjung berkebutuhan khusus (ukuran huruf, kontras, monokrom, garis tautan). + ♿ Fitur Aksesibilitas Disabilitas (WCAG Toolbar & Suara) + ?Menampilkan toolbar ramah disabilitas (pembaca suara/audio, kontras, monokrom, ukuran huruf, sorot tautan).
- Toolbar ramah disabilitas yang dapat dioperasikan langsung oleh pengunjung situs. + Dilengkapi Web Speech Synthesizer bawaan untuk membacakan artikel bagi tunanetra.
-
Tampilkan Seksi FAQ - ?Jika dimatikan, seksi FAQ disembunyikan dari beranda. Seluruh item FAQ yang sudah dibuat tetap tersimpan aman. + ?Jika dinonaktifkan, seksi FAQ disembunyikan dari beranda. Seluruh item FAQ yang sudah dibuat tetap tersimpan aman di database.
Kelola Data FAQ ↗
@@ -381,7 +381,6 @@ function edukarsa_settings_page_html() {
-

Label Tampilan Seksi FAQ (Tanya Jawab)

@@ -394,10 +393,29 @@ function edukarsa_settings_page_html() {
- +
-

📞 6. Pengaturan Footer & Media Sosial Lengkap

+

📞 6. Footer, Kontak & Tombol WhatsApp

+ + +
+

+ 💬 Kustomisasi Tombol WhatsApp Melayang (Floating Button) +

+
+
+ + +
+
+ + +
+
+

Nomor WhatsApp otomatis diambil dari kolom Nomor Telepon di bawah.

+
+
diff --git a/style.css b/style.css index 1628662..03555aa 100644 --- a/style.css +++ b/style.css @@ -437,3 +437,16 @@ body.a11y-high-contrast { filter: contrast(160%) !important; } body.a11y-grayscale { filter: grayscale(100%) !important; } body.a11y-high-contrast.a11y-grayscale { filter: grayscale(100%) contrast(160%) !important; } body.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px !important; } + +/* STATE BUTTON AKSESIBILITAS SUARA AKTIF */ +.a11y-btn.speaking { + background: #10b981 !important; + border-color: #059669 !important; + color: #ffffff !important; + animation: pulse 1.5s infinite; +} +@keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.04); } + 100% { transform: scale(1); } +}