Aksesibilitas pada Soal Pilihan Ganda Online

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:

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:

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.