Showing posts with label Assistive Technology. Show all posts
Showing posts with label Assistive Technology. Show all posts
Cara Membuat Tombol Expand Collapse dengan Jquery

Cara Membuat Tombol Expand Collapse dengan Jquery

Posted by Published on 0 comments

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. Etiam tempor orci eu lobortis elementum nibh tellus. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Tempus egestas sed sed risus pretium. Est velit egestas dui id ornare. Natoque penatibus et magnis dis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Porttitor eget dolor morbi non. Eget egestas purus viverra accumsan in nisl nisi. Felis donec et odio pellentesque diam volutpat commodo sed.

Ultricies lacus sed turpis tincidunt id aliquet. Congue mauris rhoncus aenean vel elit scelerisque. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Suscipit adipiscing bibendum est ultricies integer quis auctor. Id aliquet risus feugiat in ante metus dictum. Risus in hendrerit gravida rutrum quisque non tellus orci. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Feugiat in ante metus dictum at. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Risus sed vulputate odio ut enim. Diam quam nulla porttitor massa id. Massa eget egestas purus viverra accumsan in. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Justo laoreet sit amet cursus sit amet dictum. Aliquet eget sit amet tellus cras. Enim diam vulputate ut pharetra sit amet aliquam. Morbi tristique senectus et netus et. Volutpat diam ut venenatis tellus in metus vulputate. Arcu non sodales neque sodales ut etiam. Curabitur gravida arcu ac tortor dignissim convallis aenean.

Ut tristique et egestas quis ipsum. Gravida dictum fusce ut placerat orci nulla pellentesque. Id aliquet lectus proin nibh nisl. Lorem ipsum dolor sit amet consectetur. Massa id neque aliquam vestibulum morbi blandit. Eget magna fermentum iaculis eu non diam. Laoreet id donec ultrices tincidunt arcu non sodales neque sodales. Id nibh tortor id aliquet lectus. Diam sit amet nisl suscipit adipiscing bibendum est ultricies. Eget felis eget nunc lobortis. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Cras fermentum odio eu feugiat pretium. Ut lectus arcu bibendum at varius vel pharetra vel. Id Semper risus in hendrerit gravida. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Justo nec ultrices dui sapien eget. Purus Semper eget duis at tellus at urna condimentum mattis. Maecenas ultricies mi eget mauris pharetra et ultrices neque.

Rhoncus urna neque viverra justo nec ultrices dui sapien. Et ligula ullamcorper malesuada proin libero. Rutrum quisque non tellus orci ac auctor augue. Id donec ultrices tincidunt arcu non sodales neque. Eget Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Donec et odio pellentesque diam volutpat commodo sed egestas. Curabitur vitae nunc sed velit dignissim. Massa enim nec dui nunc mattis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Feugiat in fermentum posuere urna nec tincidunt. Cursus mattis molestie a iaculis at.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Donec adipiscing tristique risus nec. Est Lorem ipsum dolor sit amet consectetur. Pharetra diam sit amet nisl. Scelerisque viverra mauris in aliquam. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Interdum consectetur libero id faucibus nisl tincidunt eget. Tincidunt id aliquet risus feugiat in ante metus dictum. In hac habitasse platea dictumst quisque sagittis. Pellentesque habitant morbi tristique senectus. Eget arcu dictum varius duis at consectetur Lorem donec. Viverra orci sagittis eu volutpat odio facilisis. Risus feugiat in ante metus dictum. Augue interdum velit euismod in pellentesque. Diam ut venenatis tellus in metus vulputate eu scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. Etiam tempor orci eu lobortis elementum nibh tellus. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Tempus egestas sed sed risus pretium. Est velit egestas dui id ornare. Natoque penatibus et magnis dis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Porttitor eget dolor morbi non. Eget egestas purus viverra accumsan in nisl nisi. Felis donec et odio pellentesque diam volutpat commodo sed.

Ultricies lacus sed turpis tincidunt id aliquet. Congue mauris rhoncus aenean vel elit scelerisque. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Suscipit adipiscing bibendum est ultricies integer quis auctor. Id aliquet risus feugiat in ante metus dictum. Risus in hendrerit gravida rutrum quisque non tellus orci. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Feugiat in ante metus dictum at. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Risus sed vulputate odio ut enim. Diam quam nulla porttitor massa id. Massa eget egestas purus viverra accumsan in. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Justo laoreet sit amet cursus sit amet dictum. Aliquet eget sit amet tellus cras. Enim diam vulputate ut pharetra sit amet aliquam. Morbi tristique senectus et netus et. Volutpat diam ut venenatis tellus in metus vulputate. Arcu non sodales neque sodales ut etiam. Curabitur gravida arcu ac tortor dignissim convallis aenean.

Ut tristique et egestas quis ipsum. Gravida dictum fusce ut placerat orci nulla pellentesque. Id aliquet lectus proin nibh nisl. Lorem ipsum dolor sit amet consectetur. Massa id neque aliquam vestibulum morbi blandit. Eget magna fermentum iaculis eu non diam. Laoreet id donec ultrices tincidunt arcu non sodales neque sodales. Id nibh tortor id aliquet lectus. Diam sit amet nisl suscipit adipiscing bibendum est ultricies. Eget felis eget nunc lobortis. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Cras fermentum odio eu feugiat pretium. Ut lectus arcu bibendum at varius vel pharetra vel. Id Semper risus in hendrerit gravida. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Justo nec ultrices dui sapien eget. Purus Semper eget duis at tellus at urna condimentum mattis. Maecenas ultricies mi eget mauris pharetra et ultrices neque.

Rhoncus urna neque viverra justo nec ultrices dui sapien. Et ligula ullamcorper malesuada proin libero. Rutrum quisque non tellus orci ac auctor augue. Id donec ultrices tincidunt arcu non sodales neque. Eget Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Donec et odio pellentesque diam volutpat commodo sed egestas. Curabitur vitae nunc sed velit dignissim. Massa enim nec dui nunc mattis. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Feugiat in fermentum posuere urna nec tincidunt. Cursus mattis molestie a iaculis at.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Donec adipiscing tristique risus nec. Est Lorem ipsum dolor sit amet consectetur. Pharetra diam sit amet nisl. Scelerisque viverra mauris in aliquam. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Interdum consectetur libero id faucibus nisl tincidunt eget. Tincidunt id aliquet risus feugiat in ante metus dictum. In hac habitasse platea dictumst quisque sagittis. Pellentesque habitant morbi tristique senectus. Eget arcu dictum varius duis at consectetur Lorem donec. Viverra orci sagittis eu volutpat odio facilisis. Risus feugiat in ante metus dictum. Augue interdum velit euismod in pellentesque. Diam ut venenatis tellus in metus vulputate eu scelerisque.

View Article
Cara Menambahkan & Menggunakan Atribut Aria-current di Template Blogspot

Cara Menambahkan & Menggunakan Atribut Aria-current di Template Blogspot

Posted by Published on 0 comments

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:

Page
Mewakili halaman saat ini dalam suatu lembar halaman
Step
Mewakili langkah saat ini dalam suatu proses
Location
Mewakili lokasi saat ini dalam suatu lingkungan atau konteks
Date
Mewakili tanggal saat ini dalam kumpulan tanggal
Time
Mewakili waktu saat ini dalam satu set waktu
True
Mewakili item saat ini dalam suatu set
False
Tidak mewakili item dalam satu set

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>
    5. <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>
    6. <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!

View Article