Aksesibilitas pada Soal Pilihan Ganda Online

Tabel Konten
  1. Selalu Ingat untuk Menambahkan Elemen Label 
  2. Kursor 
  3. Efek Timbal Balik 
  4. Demonstrasi 
    1. HTML 
    2. CSS 
    3. jQuery 
  • Kesimpulan 
  • Example of Accessible QA Form

    Berbicara mengenai elemen formulir, umumnya elemen radio dan checkbox akan menjadi jenis elemen yang cukup sulit untuk ditangani oleh pihak pengguna karena ukurannya yang sangat kecil. Contoh sederhana:

    <input type="radio" name="o"> Pilihan 1
    <br>
    <input type="radio" name="o"> Pilihan 2

    Formulir di atas memang bekerja, tetapi tidak cukup nyaman untuk digunakan. Area yang bisa diklik hanya terfokus pada elemen radio saja yang ukurannya sangat kecil:

    Aksesibilitas elemen radio yang kurang baik tanpa adanya elemen label.
    Area pengecekan hanya terbatas pada elemen radio yang berukuran sangat kecil.

    Mungkin tidak masalah jika orang yang mengisi formulir tersebut adalah orang-orang yang masih muda. Tetapi bagaimana jika yang mengisi formulir tersebut adalah para orangtua dan lanjut usia? Karena bagi mereka, mengarahkan mouse saja sudah kewalahan, apalagi mengeklik elemen radio yang ukurannya kecil seperti itu!

    Selalu Ingat untuk Menambahkan Elemen Label 

    Untuk memperluas area pengecekan, kita bisa membungkus setiap opsi formulir dengan elemen label seperti ini:

    <label><input type="radio" name="o"> Pilihan 1</label>
    <br>
    <label><input type="radio" name="o"> Pilihan 2</label>

    Cara ini memungkinkan teks (atau elemen apa saja) yang berada di dalam elemen label tersebut untuk bisa bekerja sebagai pemicu perubahan kondisi radio yang merupakan anak dari label tersebut:

    Aksesibilitas elemen radio yang lebih baik dengan penambahan elemen label.
    Area pengecekan menjadi lebih luas, meliputi radio dan teks di sampingnya.

    Kursor 

    Berikan elemen label dan semua jenis tombol dengan kursor jari telunjuk untuk meningkatkan kenyamanan:

    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    button,
    label {cursor:pointer}

    Efek Timbal Balik 

    Perubahan warna saat opsi disentuh dan saat opsi terseleksi, semua itu akan memberikan rasa keyakinan kepada setiap pengguna yang sedang mengisi formulir Anda:

    label:hover {background-color:whitesmoke}
    label:active {background:none}
    label.selected {background-color:forestgreen} /* Kelas `.selected` akan diciptakan oleh JavaScript */

    Demonstrasi 

    Berikut ini adalah sebuah demonstrasi soal pilihan ganda online dengan akses jawaban yang mudah untuk kenyamanan pengguna:

    HTML 

    <form class="qa-form" id="qa-form" action="...">
        <ol>
            <li>
                <p>Uraian pertanyaan di sini ...</p>
                <label><input type="radio" name="a-1"> Jawaban 1</label>
                <label><input type="radio" name="a-1"> Jawaban 2</label>
                <label><input type="radio" name="a-1"> Jawaban 3</label>
                ...
            </li>
            <li> ... </li>
        </ol>
    </form>

    CSS 

    .qa-form {padding:1em 1em 2em}
    
    .qa-form ol,
    .qa-form li,
    .qa-form p,
    .qa-form input,
    .qa-form label {
      margin:0;
      padding:0;
    }
    
    .qa-form ol {
      list-style:decimal outside;
      margin:0 0 2em 3em;
    }
    
    .qa-form p {
      margin:1em 0;
      clear:both;
    }
    
    .qa-form label {
      display:block;
      width:300px;
      cursor:pointer;
      overflow:hidden;
      padding:5px 10px 5px 6px;
      margin:0 0 2px;
      line-height:100%;
      border-radius:20px;
    }
    
    .qa-form label input {
      outline:none;
      vertical-align:top;
      cursor:inherit;
    }
    
    .qa-form button {cursor:pointer}
    .qa-form label:hover {background-color:whitesmoke}
    .qa-form label:active {background:none}
    
    .qa-form label.selected {
      background-color:forestgreen;
      color:white;
    }

    jQuery 

    // Fungsi ini digunakan untuk menambahkan/menyingkirkan
    // kelas `.selected` pada elemen `<label>`
    // berdasarkan kondisi radio di dalamnya
    $(document).ready(function() {
        $('#qa-form :radio').on("change", function() {
            $(this).parent()[this.checked ? "addClass" : "removeClass"]('selected').siblings().removeClass('selected');
        });
        $('#qa-form :reset').on("click", function() {
            $(this).closest('form').find('label').removeClass('selected').children().prop('checked', false);
        });
    });

    Lihat Demo

    Kesimpulan 

    Selalu pastikan bahwa pengguna bisa merasa nyaman dengan apa yang Anda berikan untuk mereka gunakan. Berikan efek timbal balik yang tegas kepada pengguna agar mereka yakin dengan apa yang telah mereka putuskan, sehingga hal-hal seperti kegagalan tes karena kesalahan antarmuka pengguna tidak akan terjadi.

    5 Komentar

    • wonkdjava

      Makasih tipsnya,sangat membantu.. Akan langsung saya aplikasikan_^

    • Unknown

      label memang yg paling diperlukan kalau untuk checkbox bisa dibilang pasangannya kalau untuk masalah seperti ini

    • Nurohman

      kenapa setelah saya praktekkan javascriptnya tidak dapat mengubah class selected ya... jadi setelah di klik label tidak berubah menjadi class selected. mohon pencerahannya...

      • Taufik Nurrohman

        JavaScript di atas hanya bisa bekerja jika JQuery sudah dipasang.

        • Nurohman

          sudah jadi mas, ternyata saya harus masang jquery terbaru.. karena yang sebelumnya saya pasang itu yang lama... hehehehe... makasih mas, sangat bermanfaat ilmunya..

    Komentar telah ditutup.