Voice Over di Web Form

Di tulisan ini saya akan mencoba menggunakan Voice Over (VO) untuk berinteraksi dengan web form (formulir web) tentang konferensi palsu untuk developer (fake conference). Browser-browser yang digunakan yakni Chrome versi 73.0.3683.75, Safari versi 12.0.3 dan Firefox versi 65.0.1 di MacOS. Jika Anda tertarik untuk mencobanya silahkan akses situs ini dan nyalakan Voice Over Anda.

Chrome

Berikut perlakuan VO dan Chrome terhadap web form yang dibuat:

  • Tag input text baik text maupun email dan text area dibaca sebagai edit text.
  • Tag radio button dibaca sebagai radio button.
  • Tag select dibaca sebagai collapsed, pop-up button saat belum dibuka dan dibaca sebagai expanded, pop-up button saat sudah dibuka.
  • Tag checkbox dibaca sebagai Tick box.
  • Tag input file dibaca sebagai button.

Safari

Berikut perlakuan VO dan Safari terhadap web form yang dibuat:

  • Tag input text baik text maupun email dan text area dibaca sebagai edit text.
  • Tag radio button dibaca sebagai radio button.
  • Tag select dibaca sebagai collapsed, pop-up button saat belum dibuka dan dibaca sebagai expanded, pop-up button saat sudah dibuka.
  • Tag checkbox dibaca sebagai Tick box.
  • Tag input file dibaca sebagai file upload button.

Firefox

Berikut perlakuan VO dan Safari terhadap web form yang dibuat:

  • Tag input text baik text maupun email dan text area dibaca sebagai text.
  • Tag radio button dibaca sebagai radio button.
  • Tag select dibaca sebagai pop-up button saat belum dibuka dan sudah dibuka.
  • Tag checkbox dibaca sebagai checkbox.
  • Tag input file dibaca sebagai file upload button.

Pengalaman Yang Didapatkan

  • Saya mengalami kesulitan saat berinteraksi dengan Firefox browser menggunakan (VO) seperti yang bisa Anda lihat pada video di atas.

  • Perlakukan VO pada Chrome saat berinteraksi dengan web form yang dibuat nyaris sama dengan Safari. Hanya saja yang berbeda terletak pada field Type of talk dan pada field checkbox I'm actually available the date of the talk.

  • Saat saya berinteraksi dengan field Type of talk dengan menekan tombol ctrl + option + right arrow key, Safari dan VO mengarahkan keyboard saya lebih ke dalam seperti saat saya berinteraksi dengan radio button Main Stage dan Workshop. Seperti inilah hal yang saya dapatkan saat berinteraksi dengan field ini.

Main Stage, radio button, 1 of 2, Main Stage

Workshop, selected, radio button, 2 of 2, Workshop

  • Saat saya berinteraksi dengan field checkbox I'm actually available the date of the talk dengan menekan tombol ctrl + option + right arrow key, Safari dan VO mengarahkan keyboard saya lebih ke dalam dan menghasilkan reaksi seperti berikut.

I'm actually available the date of the talk, I'm actually available the date of the talk, unticked, tickbox , I'm actually available the date of the talk (saat belum dicentang)

tick I'm actually available the date of the talk, tickbox (saat dicentang)

untick I'm actually available the date of the talk, tickbox (saat tidak dicentang)

Asosiasi antara label dan tag element dalam form

Dengan bantuan kursor atau mouse ketika kita mengklik sebuah label maka akan langsung diarahkan kepada input field tersebut seperti tag input, textarea dan select. Hal ini tentunya akan memudahkan navigasi dan interaksi pengguna terhadap form yang kita buat.

Pada video di bawah, kita akan mengamati perlakuan browser Chrome, Safari dan Firefox terhadap form yang kita buat jika menggunakan asosiasi antara label dan tag element.

Chrome

Safari

Firefox

Hasil Pengamatan

  • Chrome dan Safari menyediakan focus ring pada input field ketika kita mengklik label yang dituju, sebuah kotak dengan border yang berwarna biru muda seperti yang Anda lihat pada video sebelumnya.

  • Pada input type="file", Chrome menampilkan focus ring sedangkan pada Safari dan Firefox tidak.

  • Untuk radio button, ketiga browser di atas tidak menyediakan focus ring ketika kita mengklik label yang dituju.

  • Agar checkbox bisa dicentang dengan mengklik di sekitar kalimat I'm actually available the date of the talk kita perlu membungkus tag input type="checkbox" ke dalam tag label.

Secara umum, agar bisa label berasosiasi dengan tag elemen input form yang disediakan maka kita harus menambahkan atribut for pada label dan id pada tag elemen input form serta nilai dari for dan id nya harus sama.

<!-- It works -->
<label for="username">Username</label>
<input type="text" id="username" name="username">

<!-- It doesn't work -->
<label for="usernam">Username</label>
<input type="text" id="username" name="username">

Jika Anda ingin melihat sumber kodenya Anda bisa lihat di sini: Glitch - Fake Conference.