Halo, teman-teman! Pada kesempatan kali ini, kita akan kembali membagikan tutorial seputar pengembangan website dan Blogger. Kita akan membahas cara menambahkan sebuah fungsi aksesibilitas yang sangat berguna, khususnya bagi pengunjung website yang memiliki keterbatasan penglihatan.
 |
| Speech Synthesis di Blogger |
Menariknya, kita akan menciptakan fitur ini hanya dengan memanfaatkan teknologi yang memang sudah tersedia di dalam browser pengunjung Anda.
Mengapa Menggunakan Fitur Bawaan Browser?
Sebagian besar browser modern, terutama yang berbasis Chromium (seperti Google Chrome atau Microsoft Edge), sudah mendukung fitur ini. Kita hanya akan memanfaatkan JavaScript untuk memanggil fungsi dari SpeechSynthesis—sebuah fitur pembaca teks (text-to-speech) yang sudah tertanam langsung di dalam browser.
Artinya, Anda tidak perlu mengunduh file audio tambahan, tidak perlu memasang resource dari pihak ketiga, dan yang paling penting, tidak perlu berlangganan API berbayar yang terkadang ilegal memanfaatkan souce yang bocor.
Semuanya 100% gratis dan legal.
Cara kerjanya pun sangat praktis. Nanti, ketika ada pengunjung yang mengarahkan kursor (hover) ke salah satu tautan atau menu, browser akan secara otomatis "berbicara" membacakan teks yang ada pada menu tersebut.
Apakah Fitur Ini Hanya untuk Blogger?
Tentu saja tidak! Skrip ini sangat fleksibel. Meskipun tutorial ini berfokus pada Blogger, Anda tetap bisa menerapkannya di platform lain seperti WordPress atau website custom HTML. Asalkan platform tersebut mengizinkan Anda untuk menyisipkan elemen HTML dan JavaScript, fitur ini akan berjalan dengan lancar.
Cara Pemasangan Skrip
Cara Pemasangan bagi Pengguna Blogger
Pemasangannya untuk blogger sangat mudah:
- Masuk ke dashboard Blogger Anda
- Buka menu Tata Letak (Layout)
- Klik Tambahkan Gadget dan pilih HTML/JavaScript
- Tempel (paste) kode skrip yang sudah kami sediakan di bawah ke dalam kolom yang tersedia
Simpan pengaturan, lalu buka blog Anda untuk langsung mengujinya
Cara Pemasangan untuk Pengguna WordPress atau Website Pribadi
Jika Anda menggunakan WordPress (keknya perlu ke functions.php) atau membangun website sendiri, Anda cukup menempatkan skrip ini di antara tag <body> dan </body> atau lebih amannya sebelum </body> pada struktur HTML website Anda
Setelah website selesai dimuat, pengunjung hanya perlu mengarahkan kursor agar menyentuh menu yang ditargetkan untuk pertama kalinya. Setelah interaksi pertama tersebut, browser akan langsung memuat dan mengaktifkan suaranya.
Apakah Skrip Ini Membuat Website Jadi Berat?
Jawabannya adalah: Tidak terlalu. Memang setiap penambahan skrip pasti memberikan sedikit dampak, tetapi karena metode ini sangat mengandalkan mesin dari browser Chromium pengguna (bukan memuat file suara dari server luar), kinerjanya sangat ringan dan nyaris tidak memengaruhi kecepatan muat website Anda. Walau demikian, saya juga mencobanya di browser lain tetap bisa jalan, hanya suarnya jadi kek suara robot. Paling bagus di Chromium
Dua Pilihan Mode: Otomatis vs Manual plus Tombol Aksesbilitas
Pada tutorial kali ini, kami membagikan dua mode skrip yang bisa Anda pilih sesuai dengan kebutuhan website:
- Mode Otomatis (Tanpa Tombol): Fitur pembaca suara akan langsung aktif dan bersiap membacakan teks begitu pengunjung masuk ke website Anda.
- Mode Manual (Tombol On/Off): Fitur suara hanya akan aktif jika pengunjung menekan tombol saklar (toggle) secara manual.
Rekomendasi Kami:
Sangat disarankan untuk menggunakan Mode Manual (Tombol On/Off). Dengan menggunakan tombol, fitur ini tidak akan mengganggu pengunjung umum yang tidak membutuhkannya. Website Anda akan tetap berfungsi seperti biasa tanpa suara yang tiba-tiba muncul.
Bagi mereka yang memang membutuhkan panduan suara, mereka cukup mengaktifkan tombol tersebut yang biasanya bisa Anda letakkan secara rapi di dalam menu khusus Aksesibilitas
Script Text-to-Speech Otomatis
Ini merupakan skrip Text to Speech yang nantinya bisa otomatis nyala setelah pengguna
<script>
function RcnSuaraAksesibilitas(teks) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
var speech = new SpeechSynthesisUtterance(teks);
speech.lang = 'id-ID';
speech.rate = 1.1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
}
document.addEventListener("DOMContentLoaded", function() {
var elemenMenu = document.querySelectorAll("a, button, input[type='button'], input[type='submit']");
elemenMenu.forEach(function(elemen) {
elemen.addEventListener("mouseenter", function() {
var teksMenu = elemen.innerText || elemen.textContent || elemen.getAttribute("aria-label") || elemen.placeholder;
if (teksMenu && teksMenu.trim() !== "") {
RcnSuaraAksesibilitas(teksMenu.trim());
}
});
elemen.addEventListener("mouseleave", function() {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
}
});
});
});
</script>
Cara Kerja Kode:
- Skrip secara otomatis memindai seluruh link navigasi, tombol, dan kolom pencarian di Blog Anda tanpa Anda harus mengedit kode menunya satu per satu
- Begitu kursor diarahkan ke menu (misalnya menu "Home", "Profil", atau "Kontak"), browser langsung membacakannya dalam Bahasa Indonesia
- Jika kursor digeser ke menu lain dengan cepat, suara menu sebelumnya langsung dipotong (canceled) agar suara tidak menumpuk dan berisik
Catatan Penting Kebijakan Browser:
Sesuai aturan privasi browser modern (Chrome, Safari, Edge), suara tidak akan berbunyi jika pengguna baru pertama kali membuka web dan langsung mengarahkan kursor. Pengunjung harus melakukan minimal 1 kali klik, bebas di area mana saja pada blog Anda sebagai tanda "izin interaksi", setelah itu fitur pembaca menu ini akan aktif sepenuhnya selama mereka menjelajahi blog Anda.
Script Text to Speech dengan Tombol Aktivasi plus Aksesbilitas Lainnya
Ini untuk script yang dilengkapi dengan beberapa pengaturan aksesbilitas, dan ini yang saya juga gunakan di website ini menggantikan fungsi perbesaran teks yang ada di atas postingan yang saya rasa cukup mengganggu :) ini dia
<!-- Post Body Entry Content-->
<span align='center' class='textresize' style='font-weight: bold; background-color: yellow; border:3px solid red'>
Ubah Ukuran Font :<a href='javascript:changeFontSize(1)'> [ Tambahkan + ]</a> atau <a href='javascript:changeFontSize(-1)'> [ Kurangkan - ]</a>
</span>
itu saya hapus dari edit html dan saya ganti script aksesbilitas ini. Sebenarnya jika anda ingin lebih rapi, bisa ke asuk ke dasbor Blogger > Tema > Edit HTML dan letakkan script sebelum </body> tapi untuk mempermudah, kalian juga bisa letakkan di tambah gadget / tata letak blogger sesuai instruksi sebelumnya yang lebih ramah pemula.
Silahkan ini bisa anda gunakan secara gratis. Begini tampilannya nanti kira kira.
 |
| Contoh Penerapan Script dengan Tombol |
<button id="accBtn" onclick="RcntoggleAccMenu()" aria-label="Menu Aksesibilitas" style="position:fixed; bottom:120px; right:20px; z-index:9999; background:#0056b3; color:#fff; border:none; border-radius:50%; width:50px; height:50px; font-size:24px; cursor:pointer; box-shadow:0 4px 6px rgba(0,0,0,0.2);">♿</button>
<div id="accMenu" style="display:none; position:fixed; bottom:80px; right:20px; z-index:9999; background:#fff; color:#333; border:1px solid #ccc; border-radius:8px; padding:15px; width:220px; box-shadow:0 4px 10px rgba(0,0,0,0.3); font-family:sans-serif;">
<h4 style="margin:0 0 10px 0; text-align:center; border-bottom:1px solid #eee; padding-bottom:5px;">Aksesibilitas</h4>
<div style="margin-bottom:12px;">
<p style="margin:0 0 5px 0; font-size:14px;">Ukuran Teks:</p>
<button onclick="changeFontSize('increase')" style="width:45%; padding:5px; margin-right:5px; cursor:pointer;">A+</button>
<button onclick="changeFontSize('reset')" style="width:45%; padding:5px; cursor:pointer;">Reset</button>
</div>
<div style="margin-bottom:12px;">
<p style="margin:0 0 5px 0; font-size:14px;">Tampilan:</p>
<button onclick="toggleContrast()" style="width:93%; padding:5px; cursor:pointer;">Kontras Tinggi</button>
</div>
<div>
<p style="margin:0 0 5px 0; font-size:14px;">Suara Navigasi Menu:</p>
<button id="voiceToggleBtn" onclick="RcntoggleVoiceNavigation()" style="width:93%; padding:5px; cursor:pointer; background:#dc3545; color:#fff; border:1px solid #dc3545; border-radius:4px; font-weight:bold;">Suara Mati ❌</button>
</div>
</div>
<style>
.high-contrast, .high-contrast *, .high-contrast div, .high-contrast article, .high-contrast section {
background: #000 !important;
color: #fff !important;
border-color: #fff !important;
}
.high-contrast a {
color: #ffff00 !important;
text-decoration: underline !important;
}
</style>
<script>
var isVoiceActive = false;
function speakText(message) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
var speech = new SpeechSynthesisUtterance(message);
speech.lang = 'id-ID';
speech.rate = 1.1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
}
function RcntoggleVoiceNavigation() {
var btn = document.getElementById("voiceToggleBtn");
isVoiceActive = !isVoiceActive;
if (isVoiceActive) {
btn.innerText = "Suara Aktif ";
btn.style.background = "#28a745";
btn.style.borderColor = "#28a745";
speakText("Suara navigasi menu diaktifkan. Arahkan kursor Anda ke menu blog.");
} else {
btn.innerText = "Suara Mati ❌";
btn.style.background = "#dc3545";
btn.style.borderColor = "#dc3545";
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
}
}
}
function RcntoggleAccMenu() {
var menu = document.getElementById("accMenu");
if (menu.style.display === "none") {
menu.style.display = "block";
if (isVoiceActive) speakText("Menu aksesibilitas terbuka");
} else {
menu.style.display = "none";
if (isVoiceActive) speakText("Menu aksesibilitas ditutup");
}
}
function changeFontSize(action) {
var elements = document.querySelectorAll("p, span, article, entry-content, post-body, a");
elements.forEach(function(el) {
if (!document.getElementById("accMenu").contains(el)) {
var currentSize = parseFloat(window.getComputedStyle(el, null).getPropertyValue('font-size'));
if (action === 'increase') {
el.style.fontSize = (currentSize + 2) + 'px';
} else if (action === 'reset') {
el.style.fontSize = '';
}
}
});
if (isVoiceActive) {
action === 'increase' ? speakText("Ukuran teks diperbesar") : speakText("Ukuran teks normal");
}
}
function toggleContrast() {
document.body.classList.toggle("high-contrast");
if (isVoiceActive) {
document.body.classList.contains("high-contrast") ? speakText("Mode kontras tinggi aktif") : speakText("Mode kontras tinggi mati");
}
}
document.addEventListener("DOMContentLoaded", function() {
// Memindai seluruh link (a), tombol (button), dan input teks/tombol
var interactiveElements = document.querySelectorAll("a, button, input[type='button'], input[type='submit'], input[type='text']");
interactiveElements.forEach(function(el) {
el.addEventListener("mouseenter", function() {
// Jalankan suara HANYA jika pengguna sudah menyalakan tombol suara
if (isVoiceActive) {
var textToRead = el.innerText || el.textContent || el.getAttribute("aria-label") || el.placeholder;
if (textToRead && textToRead.trim() !== "" && !document.getElementById("accMenu").contains(el)) {
speakText(textToRead.trim());
}
}
});
el.addEventListener("mouseleave", function() {
if (isVoiceActive && 'speechSynthesis' in window) {
window.speechSynthesis.cancel();
}
});
});
});
window.onclick = function(event) {
var menu = document.getElementById("accMenu");
var btn = document.getElementById("accBtn");
if (event.target != menu && event.target != btn && !menu.contains(event.target)) {
if (menu.style.display === "block") {
menu.style.display = "none";
if (isVoiceActive) speakText("Menu aksesibilitas ditutup");
}
}
}
</script>
Konsep Desain
- Pengguna Mengklik tombol merah "Suara Mati ❌" secara teknis dihitung oleh Google/Apple sebagai interaksi pertama yang valid, sehingga sistem suara langsung menyala lancar tanpa hambatan aturan privasi.
- Pengunjung biasa tidak akan merasa terganggu atau berisik karena fitur suara berstatus opt-in (harus dinyalakan sendiri secara sadar bagi yang membutuhkan)
itu merupakan beberapa script yang bisa kita bagikan pada kesempatan kali ini kepada teman teman semuanya dan bisa anda gunakan secara gratis tanpa membayar kita sepeserpun dan yah, di sini kita sudah mendapat penghasilan dari Adsense kalian bisa lihat di beberapa iklan yang ada di blog ini, jadi jika ada yang berkunjung itu akan masuk ke penghitungan RPM yang lumayan kecil, tapi jika ada yang klik, itu masuknya ke CPM yang lumayanlah, hanya saja kalo di region indonesia memang penghasilannya tidak terlalu besar teman-teman dan itu merupakan salah satu sumber penghasilan blog ini untuk memelihara blog dan domain yang ada.
Semoga Bermanfaat!