Cara Membuat

Cara Pasang Software Pembaca Layar NVDA untuk Tunanetra. Dengan kemajuan teknologi sekarang ini, utamanya teknologi digital baik untuk komputer maupun smartphone, bisa membantu tunanetra dalam mengoperasikan beberapa perangkat modern seperti laptop, komputer dan juga smartphone. Untuk mendukung aktifitas tunanetra dalam mengoperasikan berbagai perangkat modern tersebut, maka digunakan aplikasi khusus, yaitu software pembaca layar khusus untuk tunanetra.

Software pembaca layar yang banyak digunakan tunanetra pengguna laptop dan komputer di Indonesia adalah NVDA (Non Visual Desktop Access). Software pembaca layar NVDA ini bisa didapatkan secara gratis dan bisa menggunakan speech syntesizer ID Damayanti Bahasa Indonesia. Dengan menggunakan speech syntesizer Damayanti Bahasa Indonesia tentunya akan sangat membantu buat tunanetra yang tidak menguasai Bahasa Inggris sama sekali.

Buat yang ingin tahu cara pasang software pembaca layar NVDA di laptop atau komputer supaya tunanetra turut bisa menggunakan laptop/komputer tersebut, caranya adalah sebagai berikut:

Cara Pasang NVDA di Laptop atau Komputer

Untuk cara pasang software pembaca layar NVDA untuk tunanetra ini tidaklah sulit. Silakan buka https://www.nvaccess.org/download/ lalu download NVDA versi terbaru, kemudian instal sampai selesai. Setelah software screen reader NVDA ini terpasang, software pembaca layar NVDA tersebut sudah siap digunakan.

Untuk mengaktifkan program pembaca layar NVDA ini ada 2 cara, yaitu secara manual dan secara otomatis.

Cara Mengaktifkan NVDA Secara Manual

Untuk mengaktifkan screen reader NVDA ini secara manual bisa menggunakan shortcut Control + Alt + N. Sedangkan untuk menonaktifkan pembaca layar NVDA ini bisa menggunakan shortcut NVDA + Q lalu klik OK.

Note: Tombol NVDA yang dimaksud adalah tombol capslock pada laptop dan tombol Insert numpad pada keyboard komputer/PC.

Cara Mengaktifkan NVDA Secara Otomatis Setelah Masuk Windows

Jika ingin screen reader ini bisa langsung aktif saat laptop/komputer dioperasikan, maka perlu merubah setelan dari NVDA tersebut. Silakan ikuti langkah-langkah tentang bagaimana merubah setelan NVDA agar pembaca layar NVDA yang digunakan bisa secara otomatis aktif saat laptop/komputer dihidupkan:

Buka menu NVDA dengan menggunakan shortcut NVDA + N, kemudian klik Pilihan→Settings→General, lalu centang pada “NVDA berjalan otomatis setelah masuk ke Windows”, setelah itu klik OK.

Cara Pasang NVDA ID Damayanti Bahasa Indonesia

Buat yang ingin menggunakan speech syntesizer Bahasa Indonesia ID Damayanti, silakan ikuti cara memasang NVDA ID Damayanti Bahasa Indonesia berikut ini:

1. Kunjungi https://vocalizer-nvda.com/downloads kemudian pilih add-on ID Damayanti Bahasa Indonesia dan silakan download.
2. Aktifkan screen reader NVDA, lalu silakan install add-on ID Damayanti yang sudah di download tadi sampai selesai.

Cara Mengganti Suara NVDA ID Damayanti Bahasa Indonesia

Untuk cara merubah suara default NVDA dengan suara NVDA ID Damayanti, caranya adalah sebagai berikut:

1. Aktifkan screen reader NVDA, jika program pembaca layar NVDA sudah aktif, abaikan baris ini.
2. Lalu masuk ke menu NVDA dengan menggunakan shortcut NVDA + N kemudian klik Pilihan→Settings→Speech dan klik “Change”.
3. Pada “Mesin Suara”, pilih “Nuance Vocalizer Expressive” lalu klik OK.
4. Setelah itu pada “Suara” pilih “ID Damayanti Indonesia”, kemudian klik OK.
5. Selanjutnya masuk ke menu NVDA sekali lagi, lalu “Simpan Konfigurasi”, dan selesai.

Dengan memasang software pembaca layar untuk tunanetra pada laptop atau komputer tentunya akan sangat membantu tunanetra dalam mengenal perangkat modern, khususnya komputer, sehingga diharapkan tunanetra bisa melakukan kegiatan yang lebih bermanfaat di kemudian hari.

Cara Menggunakan Aria-current Attribute. Sudah umum saat ini dalam hal untuk menyajikan beberapa informasi penting di blog atau website kepada pengguna secara visual, tetapi juga memberi alternatif bagi tunanetra pengguna pembaca layar untuk juga mengetahui informasi tersebut. Apalagi sekarang ini hampir semua browser telah mendukung Assistive Technology bagi pengguna tunanetra pengguna screen reader seperti NVDA dan JAWS.

Ada beberapa pola umum yang sering kali digunakan pengembang untuk menyoroti beberapa informasi umum yang ingin diberi penekanan khusus secara visual, contohnya:

• Current page/link untuk menunjukkan halaman/tautan saat ini di dalam menu navigasi;
• Current step untuk menunjukkan langkah dalam proses/progress;
• Current date untuk menunjukkan tanggal saat ini di kalender;
• Current time untuk menunjukkan waktu saat ini dalam jadwal
• Current location untuk menunjukkan lokasi saat ini di peta.

Biasanya ini dibedakan secara istimewa dari informasi lainnya menggunakan CSS. Sebagai contoh:

<nav>
  <ul class="example-menu">
     <li><a class="current-page" href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Product</a></li>
     <li><a href="#">Privacy Policy</a></li>
     <li><a href="#">Contact</a></li>
  </ul>
</nav>

Pada contoh di atas, link yang sedang dibuka dalam skenario kali ini adalah halaman “Home”, diberi class=“current-page”

Lalu untuk membedakannya dengan link lainnya maka diberi warna yang berbeda dengan menambahkan CSS seperti ini:

<style type="text/css">
  .current-page{
     background-color:#fff;
     color:#000;
  }
</style>

Jika dibuka pada browser, tampilannya kira-kira akan seperti ini:

Pada contoh di atas terlihat tautan “Home” tampak berbeda dengan tautan lainnya. Hal ini bisa ditangkap dengan baik secara visual. Tetapi masalahnya, CSS merupakan media visual, dan informasi ini tidak bisa ditangkap oleh tunanetra pengguna pembaca layar.

Bermaksud untuk memecahkan masalah khusus ini, beberapa pengembang berinisiatif menjadikan link tersebut tidak aktif atau dengan menggunakan atribut title dengan alternatif teks seperti “current page” yang menyampaikan informasi yang relevan kepada tunanetra pengguna pembaca layar. Bahkan ada beberapa pengembang yang mencoba menggunakan gambar latar dan menggunakan alternatif text untuk menyampaikan informasi tersebut kepada tunanetra pengguna pembaca layar. Ada beberapa alasan mengapa sebaiknya para pengembang tidak menggunakan salah satu dari solusi seperti ini. Pertanyaan baru Muncul, bagaimana jika informasi yang disampaikan tersebut bukan merupakan sebuah tautan, atau bukan elemen interaktif sama sekali? Sebagai misal adalah elemen yang menampilkan keterangan hari dan tanggal di bawah ini:

Assistive Tecnology Dengan Aria-Current Attribute

Atribut aria-current dimaksudkan untuk memecahkan masalah ini. Beberapa value yang bisa digunakan antara lain:

Jadi aria-current atribut ini dapat digunakan untuk menyelesaikan beberapa masalah penyampaian informasi kepada tunanetra pengguna pembaca layar. Agar solusi Assistive Technology ini bisa diterima pula secara visual, maka bisa juga ditambahkan css khusus untuk menyoroti item tersebut dengan menggunakan aria-current sebagai property CSS. Berikut CSS untuk hal tersebut:

<style type="text/css">
  [aria-current] {
     background-color:#fff;
     color:#000;
  }
</style>

Cara Menggunakan Aria-current Attribute

Coba hapus class=“current-page” pada contoh di atas, dan gantilah dengan attribute aria-current=“page”, sehingga kode lengkapnya menjadi seperti ini:

<nav>
  <ul class="example-menu">
     <li><a aria-current="page" href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Product</a></li>
     <li><a href="#">Privacy Policy</a></li>
     <li><a href="#">Contact</a></li>
  </ul>
</nav>

maka tampilannya kira-kira akan seperti ini:

Sekilas memang tampak tidak ada perubahan apa-apa, tetapi yang membedakannya, sekarang tunanetra pengguna screen reader bisa membedakan bahwa link “Home” di atas sedang terbuka karena aplikasi pembaca layar yang digunakan oleh tunanetra akan berbunyi “current page Home”.

Begitu juga ketika ditambahkan attribute aria-current=“date” pada contoh tanggal di atas, setelah ditambahkan atribut aria-current maka screen reader seperti JAWS atau NVDA akan mengatakan “current date” setelah membacakan informasi tanggal yang ditampilkan. Di bawah ini contoh setelah ditambahkan aria-current pada contoh tanggal tersebut:

Script Jquery Javascript untuk Menambahkan Aria-Current secara Otomatis pada Link

Untuk memberi informasi kalau sebuah tautan sedang dibuka kepada tunanetra pengguna pembaca layar pastinya akan sangat merepotkan jika itu ditambahkan satu demi satu secara manual. Solusi terbaik adalah menambahkan fungsi script Javascript khusus untuk melakukan hal tersebut secara otomatis.

Cara menambahkan aria-current attribute secara otomatis ke dalam Blogspot caranya tidak terlalu sulit. Ikuti langkah-langkah berikut ini untuk menerapkannya ke dalam blog Blogspot:

1. Buka blogger.com lalu login.
2. Kemudian pada menu “Tema”, klik “Edit HTML”
3. Karena script ini menggunakan Jquery, maka pastikan tema Blogspot yang Anda gunakan sudah menggunakan Jquery. Jika belum menggunakan Jquery, maka tambahkan Jquery pada template blog yang Anda gunakan. Untuk menambahkan Jquery di template Blogspot, silakan ikuti langkah demi langkahnya pada postingan tentang Cara Pasang jQuery di Blogspot. Kalau sudah ada Jquery di template yang digunakan, maka abaikan saja baris ini.
4. Kemudian salin script di bawah ini dan letakkan di atas tag </body>

<script type='text/javascript'>//<![CDATA[
  $(document).ready(function() { 
     $('a').each(function(){ 
       var current = window.location.href;

       if ($(this).attr("href") == current) $(this).attr("aria-current", "page" );
     });
  });
//]]></script>

5. Lalu tambahkan CSS berikut ini dan letakkan di atas tag </head>

<style type="text/css">
  [aria-current] {
     background-color:#fff;
     color:#000;
  }
</style>

Ganti property background-color:#fff; dan color:#000; dengan warna yang diinginkan.

6. Setelah itu simpan template dan lihat hasilnya.

Setelah menambahkan script Javascript tersebut, maka semua link yang sedang dibuka akan ditambahkan attribute aria-current dan lihatlah perubahan warnanya. Selamat mencoba!