Kategori
Web Accessibility

Pakai hover, Jangan Lupa focus

Diperbarui 12 November 2017 oleh Dani Iswara

Pemakaian elemen CSS 'pseudo-class' hover, focus dan properti outline akan membantu meningkatkan aksesibiltas dan kebergunaan atau usability halaman Web.

Lengkapnya, pemakaian elemen berikut:

:link, :visited, :hover, :active, :focus

dianjurkan berurutan. Lihat kembali catatan lama di Web Usability and Accessibility on hover and focus.

Apakah elemen hover saja tidak cukup?

Elemen 'hover' bisa disetel agar memberi tampilan yang berbeda pada elemen X/HTML saat tetikus diarahkan di atasnya. Elemen mana saja? Misalnya teks pranala, blok teks, kolom 'input', tombol, dan lainnya.

Berbeda hanya pada warnanya? Bagaimana dengan pengguna yang menyandang gangguan kontras warna? Cek kontras warna konten Web.

Disarankan, perubahan yang terjadi bisa berupa alternatif berikut:

  • pemberian/perubahan warna latar.
  • perubahan warna objek.
  • perubahan warna batas bawah (border-bottom).
  • kombinasi semua di atas.

Perubahan ukuran objek saat di-'hover' tidak disarankan jika akhirnya hanya mengganggu ruang yang ada. Atau malah menggeser posisi objek di dekatnya. Merusak tampilan yang ada.

Elemen 'hover' bermaksud lebih memudahkan pengguna pemakai tetikus untuk menemukan dan memakai elemen tertentu. Bagaimana dengan pengguna yang:

  • tidak punya tetikus?
  • tidak mampu memakai 'touchpad'?
  • hanya memiliki papan ketik/'keyboard'.
  • tidak memiliki jari-jari untuk mengoperasikan tetikus?
  • tidak terampil memakai tetikus karena penurunan fungsi otot tangan (penuaan)?
  • buntung tangan?
  • memakai layar sentuh/'touchscreen'?
  • memakai papan ketik virtual/'on-screen keyboards'?
  • memakai 'keypad' di layar kecil/'small screen'?
  • memakai tombol ‘scrolling’ untuk navigasi?

Intinya, elemen 'hover' memiliki ketergantungan akan keberadaan tetikus. Serupa juga halnya dengan atribut title yang tidak mudah diakses tanpa 'mouse'.

Untuk memenuhi hak akses bagi para pengguna dengan kondisi-kondisi di atas, elemen focus menjadi solusinya.

Sejauh mana elemen focus bermakna?

Coba telusuri tiap objek (teks pranala, kolom 'input', tombol, dan sebagainya) di suatu situs Web/blog dengan papan ketik. Bagi pengguna peramban Web Firefox (Fx) dan Google Chrome, bisa memakai tombol TAB. Bagi pengguna Opera di Linux, silakan cek 'keyboard shortcuts' Opera. Biasanya, di Opera, fungsi ‘tab’ bisa digunakan dengan memakai kombinasi tombol ctrl + panah atas/bawah.

Efek yang ditampilkan elemen fokus bisa dibuat serupa dengan 'hover'. Kalau 'hover' ditujukan untuk pengguna tetikus, maka 'focus' lebih ditujukan bagi selain pengguna tetikus. Dulu, standarnya bawaan tiap peramban Web, elemen 'focus' akan tampak memiliki nilai outline berupa titik-titik mengelilingi objek (‘dotted border’). Hanya saja, beberapa peramban Web hanya memahami elemen 'focus' jika halaman Web memiliki deklarasi DOCTYPE di awal dokumen. Lihat kode sumber halaman Web (misal dengan kombinasi tombol CTRL+U di Fx).

Ringkasan

Jadi, halaman Web direkomendasikan untuk mudah pula diakses dan dikontrol via papan ketik, bukan hanya tetikus. Jika semua fungsi Web bisa diakses via papan ketik, berdasarkan best practices, bahwa pengguna papan ketik virtual, layar sentuh, dan pengguna perangkat lainnya akan mudah pula mengakses konten Web.

Aksesibilitas Web bukan hanya untuk penyandang cacat, tapi juga untuk pengguna non-difabel, lanjut usia, dan pelbagai perangkat modern.

Sumber bacaan yang bisa dipercaya: Keyboard Accessible: Understanding Guideline 2.1 dari WCAG 2.0.

37 tanggapan untuk “Pakai hover, Jangan Lupa focus”

OOT dulu, ini saudara mudanya daniiswara.net ya bli ?

Kayaknya harus belajar lagi saya,
Bli Dani,

Hanya saja, beberapa peramban Web hanya memahami elemen ‘focus’ jika halaman Web memiliki deklarasi DOCTYPE di awal dokumen.

pernyataan memiliki declarasi doctype masih sedikit gak mudheng bli, maksud saya ada penambahan baris perintah baru selain pernyataan doctype yang ada ?

aldy,
ya pak, yang lama itu sadar diri karena ada HONcode-nya. Ternyata label HONcode itu bisa muncul di SERPs untuk pengguna yang masang ekstensi HONcode. Jadi yang baru ini niche-nya dibuat beda aja, di luar kesehatan.

Tentang doctype itu, ngga ada yang baru, standar doctype W3C aja. Kasus itu terjadi di IE8. Entah jika ada peramban Web lain juga.

Oleh Penulis Artikel

Trims dok, saya terinspirasi sama penggunaan focus ini setelah baca tulisan ini.

Dulu saya mikir “buat apa susah2 bikin web buat org yg menyandang gangguang penglihatan, cacat, dll (bikin susah aja)”, ternyata saya baru mengalami susahnya saat memakai laptop punya kakak saya di kampung, yg sangat terbatas navigasi lewat mousnya.. :)

rismaka,
kita ngga perlu menjadi tua atau difabel dulu untuk berempati, kan? :)
Untuk gravatar dan smiley, menurut saya, cukup memakai alt yang dekoratif. cmiiw

Boleh share dikit bli,
dengan peramban yang bli gunakan sekarang (Google Chrome ), masalah terkait dengan “focus” apakah menimbulkan masalah seperti pada IE8 ?

aldy,
di peramban Web Chromium 5 (Google Chrome versi Linux) dan Google Chrome 5 versi beta untuk Linux yang saya pakai, berkas XSL untuk menampilkan MathML tidak/belum mampu terbaca. Tapi, doctype tetap terdeteksi. Jadi fungsi focus tidak masalah. Hanya, style border default bawaan peramban bukan berupa dotted/titik-titik, tapi solid berwarna biru.

yeah, selama ini saya telah mengetahui fungsi2 tsb tapi sangat jarang saya aplikasikan.. mungkin saya terlalu malas hehe…
tapi saya setuju dengan argumen tersebut. memang dalam membuat desain interface, segmentasi user kita harus jelas. mungkin seperti halnya google. hampir tidak ada kesulitan diakses dengan browser terbaru ataupun browser macam lynk yang ‘primitif’ itu.. .

ardianzzz,
nah kalau Google, segmentasinya sejelas apa ya? Saking sederhana/rumitnya, sampai merasa tidak perlu memakai html penutup. :)

Oleh Penulis Artikel

Kalo google pasti segmentasinya bisnis. hehehe…

Dalam salah satu tulisannya Lee Munroe (leemunroe dot com/how-important-is-valid-html-web-standards/), memperlihatkan bagaimana situs-situs besar (web’s biggest sites) seperti FB, Digg, dan Google ternyata tidak begitu hirau dengan standar web yang direkomendasikan W3C, misalnya dalam segi valid (X)HTML. :). Boleh dicek! Yang punya blog ini juga ngasih komen untuk posting tersebut, kalo gak salah!

Di IE v.6, properti outline tidak muncul ya, Mas! Ada alternatif? :)

Anis Fahrunisa,
eh ada di sana ya..ya begitulah, asal usable dan aksesibel, yakin situsnya berfungsi, dan kode error tidak mengganggu pengguna, validasi sepertinya tidak perlu lagi.

Untuk MSIE, saya sudah mengabaikannya sejak lama. Toh, blog ini dibuat untuk tidak sepenuhnya mudah diakses (karena menyajikan XHTML, XSL, MathML, dan SVG). Tapi, pasti ada hacks-nya. :)

Oleh Penulis Artikel

Bukan, Mas! Saya tidak sedang membicarakan blog Mas Dani. Maksud saya, bagaimana supaya properti outline muncul di IE v.6, karena kebetulan saya juga mengunakan properti tersebut. Barangkali Mas Dani punya alternatif, atau diabaikan saja karena sudah ada IE versi terbaru yang support properti terrsebut :)

Anis Fahrunisa,
jika outline kurang bisa dihandalkan karena memang dukungan peramban lawas (sepertinya bukan hanya MSIE, tapi Fx dan peramban lawas lain juga), logikanya, border-bottom dan background-color bisa sebagai trik yang membantu. :)

Oleh Penulis Artikel

Dapat tambahan pengetahuan nih, coba deh saya implementasikan diblog saya…

Selama ini saya emang agak kesulitan jika mengakses web via bb storm karena terkadang link yang tersedia sulit utk dklik…

Maaf OOT dikit, mo tanya bli, ada solusi gak utk bikin link berpendar jika on hover atau focus, tanpa penggunaan image…

thx

Sampai saat ini blogging hanya sekedar hobi saya tetapi “I’m crazy about it”, maaf sebelumnya kalau tulisan saya ini salah tempat, yang jelas saya sangat sulit untuk mengomentari tulisan elegan Mas Dani, maklum newbie tulen yang sekedar numpang keren (Mas Anis bilang).
Satu pertanyaan yang belum pernah saya mendapat jawaban yang memuaskan adalah : Bagaimana caranya supaya blog yang dibangun dengan Blogspot dapat lulus W3C minimal valid HTML dan CSS.
Terma kasih.

Yuda,
tentang hover dan focus, sebenarnya banyak pertanyaan nakal yang masih mengganjal.
a) Apakah benar outline dianggap mengganggu, dilihat dari sisi estetis dunia desain grafis?
b) Apakah memang lebih berguna memberi ‘outline’ dengan garis solid dibanding dotted saat ‘focus’ dan ‘active’?
c) Bagaimana membedakan img yang bisa diklik (berupa pranala) dan tidak, via pemanfaatan ‘hover’/’focus’?

[OOT] Untuk Blogspot, silakan mengikuti tulisan Choen di Trik Markup Validation W3C untuk Blogspot. :)

Oleh Penulis Artikel

Tampilan outline saat tabbing via Google Chrome menurut pengalaman saya sih berupa garis solid berwarna kuning bli. Bukan biru. Mungkin setelan warna biru untuk versi lama yach. Ternyata shortcut opera ada di postingan ini. Saya kelewatan :)

Oya, efek focus ada baiknya disetel sama dengan efek hover. Minimal harus bisa membantu pengguna untuk membedakan/menggunakan pranala, menu, atau form input yang ada di suatu web.

iskandaria,
warna ‘outline’ saat fokus di tiap peramban itu mungkin tergantung setelan ‘desktop theme’ masing-masing? Seperti juga warna saat teks+latar di konten disorot (untuk Firefox sudah saya ubah)?

Mengenai efek ‘focus’ baiknya disetel sama dengan efek ‘hover’, saya belum menemukan dokumen yang pas menganjurkan itu. Mas Is ada sumbernya?
Setidaknya, ‘border outline’ berupa titik-titik saat ‘focus’ itu sudah bentuk standar. :)

Oleh Penulis Artikel

iskandaria,
isunya untuk tiap peramban Web itu: seberapa banyak setelan bawaan vendor memengaruhi aksesibilitas Web (saya belum memperbarui Google Chrome ini).
Misal: teks alt yang muncul saat gambar tidak ditampilkan, warna ‘border outline’ saat ‘tabbing’, warna teks+latar saat disorot, dan lainnya ada lagi…saya lupa. Beberapa konsultan aksesibilitas Web luar negeri sudah ada yang membahas beberapa diantaranya. :)

Mengenai efek ‘focus’ baiknya disetel sama dengan efek ‘hover’, itu cuma pendapat pribadi saya saja kok. Memang sih, efek outline saja sudah cukup membantu. Tapi kadang efek outline saja masih kurang cukup menurut saya ketika melakukan tabbing dalam kondisi peramban dan setelan tertentu.

Nah, biar pranala/menu navigasi/form input/tombol submit lebih mudah dikenali saat tabbing, menurut saya kita bisa berikan efek lain (selain efek standar berupa outline). Seperti yang tekah bli Dani jelaskan di atas. Misalnya perubahan warna teks anchor, perubahan warna batas/garis bawah, dan perubahan warna latar (jika berupa pranala), Jika berupa form input dan tombol submit, bisa berupa perubahan warna latar. Begitu pula jika berupa menu navigasi. Minimal berubah warna latar :)

Btw, versi terbaru google chrome (chromium) untuk linux itu 5.0.375.70 atau 5.0.375.86 ya bli? Jika mengacu pada angka terakhir, sepertinya yang 86 itu terbaru. Cuma dugaan saya :)

iskandaria,
ya setuju. Efek ‘outline’ saja memang kadang dirasa kurang. Sehingga ditambah dengan kombinasi warna latar dan lainnya jika memungkinkan.

Kalau mau kompilasi manual ‘source code’ yang berukuran besar itu, bisa mengikuti yang terbaru. Seperti Firefox ‘nightly-build’.

Oleh Penulis Artikel

jadi ada baiknya kita make dua-duanya yah?

sayabaru tahu kalau :focus ini memudahkan pengguna yang hanya memakai keyboard, selama ini saya cuma menjadikannya pelengkap:)

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.