Pakai hover, Jangan Lupa focus

Noted: Monday, April 5, 2010 at 05:46:18. Words count: 443.
Last updated: Sunday, November 12, 2017 at 21:40:56.

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.

Dani Iswara, [myfirstnamelastname]@gmail.com.

37 comments to "Pakai hover, Jangan Lupa focus"

  1. Cahya

    Saya selalu pusing kalau baca tulisan seperti ini, kenapa Bli Dani tidak membuat dalam bentuk buku atau video belajar saja :)

  2. dani

    Cahya,
    siapa suruh ambil pusing? Ini kan hanya catatan tidak penting. :P

  3. ipul

    hehehehe saya ga pusing tuh ,walaupun saya ga ngerti

  4. aldy

    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 ?

  5. aldy

    ops…
    blockquote-nya salah bli, mohon diedit ( nggak merintah loh )

  6. dani

    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.

  7. rismaka

    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.. :)

  8. rismaka

    OOT dok. Gravatar perlu pake atribut ALT ga? Saat ini saya memakai peramban yg gambar dan javascriptnya dinonaktifkan.

  9. dani

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

  10. aldy

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

  11. dani

    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.

  12. ardianzzz

    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.. .

  13. dani

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

  14. Anis Fahrunisa

    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? :)

  15. dani

    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. :)

  16. Anis Fahrunisa

    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 :)

  17. dani

    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. :)

  18. Planet Orange

    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

  19. dani

    Planet Orange,
    yang objek berpendar bisa make CSS 3 kan?

  20. ardianzzz

    @dani
    Hahaha… saya baru sadar kalau google gak pake html penutup :) memang sih, homepage google cukup nyleneh source nya

  21. Yuda

    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.

  22. dani

    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. :)

  23. Yuda

    Terima kasih Mas dari, untuk sementara saya langsung saja ke “TKP”…

  24. Tabindex tidak Logis - Unessential Weblog

    […] tabindex digunakan untuk menentukan posisi kursor atau efek :focus saat menelusuri dokumen Web memakai tombol Tab. Dengan tabindex, urutan navigasi bisa ditentukan […]

  25. A Reason for Styling Button Customization - Unessential Weblog

    […] previous post titled Do not forget focus while using hover, in bahasa Indonesia, telling that focus affects keyboard accessibility. To resolve the above […]

  26. Tinjauan Blog Cekerholic.com - Unessential Weblog

    […] Kecuali melihatnya di status bar. Tetapi jika diakses dengan tetikus, efek hover cukup membantu. Pakai hover, jangan lupa focus (Dani Iswara […]

  27. iskandaria

    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.

  28. dani

    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. :)

  29. dani

    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. :)

  30. iskandaria

    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 :)

  31. dani

    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’.

  32. Membiasakan Penggunaan Tombol TAB Saat Mengisi Form | KafeGue.com

    […] untuk hal ini bagi para narablog dan web desainer silakan baca artikel Pakai Hover, Jangan Lupa Focus (di blog […]

  33. Link, Hyperlink yang Aksesibel | Rudy Azhar

    […] Pakai hover, Jangan Lupa focus […]

  34. Meningkatkan Keterbacaan List Link pada Sidebar | KafeGue.com

    […] active (saat dieksekusi/diklik), dan visited (telah dikunjungi). Silakan baca Pakai Hover Jangan Lupa Focus (di situs Dani […]

  35. Perbandingan Efek Link Focus pada 5 Browser Utama | KafeGue.com

    […] terkait silakan simak Pakai Hover, Jangan Lupa Focus (Dani Iswara. […]

  36. Endi

    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:)

  37. dani

    Endi,
    Sependek yang saya tahu, anjurannya seperti itu. :)