Web Usability-Accessibility on Hover and Focus
Posted: June 1, 2009 at 23:35:13 by Dani Iswara. Words count: 381.
Last updated: June 7, 2009 at 04:47:04.
:link:visited:hover:focus:active
outline CSS property, will tell users where is the current position of the pointer or tab order. It often used on links, input forms, buttons, and some essential elements.
Make it easy to find and use while moving the mouse and keyboard on web pages. Not only for disable person.
Problems with links
I do not why some users/bloggers made their links staticly blended within the content. Do they want visitors not to find or click the links? Which one is a visited link? And sometimes it is difficult to find my cursor position when tabbing web page elements. It should not that hard. A little pieces might be an essential too.Variations of pseudo-class style
As a clue for the users, pseudo-class CSS may be vary based on these styles:text-decoration:[underline|none]. Underline should be available for clickable links only. Not for a common plain text. Remember that sometimes underline style is annoying on g, j, and y fonts. Especially for the small fonts.- Changing color or contrast
background(if using images) orbackground-color,color.
border:[size|medium] [none|dotted|dashed|solid|double|groove|ridge|inset|outset] [color]May on top, right, bottom, or left.
Problems with outline
And outline CSS property, by default, works on selected or focused elements. It is seen as dotted lines surrounding elements. Except, some browsers put their custom styles. When browser changes the size and color of an element, web developers/designers start worrying their page would break in some area. For example: dismatch color, break the grid or pixel precision, etc. Sometimes, it is annoying feature for them. They often remove it usingoutline:0 or outline:none. [Updated May 6, 2009] Read more on How to get rid textinput blue border in Safari. Based on usability and accessibility reason, I would not suggest you to completely remove the outline. Adjust it with your design look.
Comment by nomercy on June 5, 2009 at 05:21:53
using Firefox 3.0.10 on Linux Mint 7
saya bikin mirror aja di komputer lokal saya blognya mas Dani ya ... jadi ngecron sendiri updatenya :D ... isinya top2 banget begini ... biar tenang bacanya ... hehehe :D canda mas ... gaklah, ntar dikira saya mau bikin buku dari blognya mas Dani ... *kapan dijadiin buku mas?*
mengenai artikel:
1) mungkin link yang blend itu iklan tersembunyi yg kalau diklik justru tidak boleh (ada gak ya yg kayak gitu?) :D
2) mengenai kalimat biasa yg ada garis bawah itu kebiasaan sewaktu sekolah bikin catatan biar mudah diingat kata kuncinya ...
saya mau cek theme lagi apakah mengenai hal ini sudah bagus atau belum ...
Comment by Dani Iswara on June 5, 2009 at 08:01:25
using Firefox 3.0.10 on Gentoo
haiyah..ini cuman catatan kecil aja kok, pak..
1) kayak kuis aja, jadi tebak-tebakan. :)
2) entah jika google memang menganggapnya spesial. kalo iya, berarti bertentangan dengan aksesibilitas.
Comment by Mardianto on June 6, 2009 at 21:00:44
using Opera 10.00 on Windows XP
Beberapa kali saya ketemu teks non link yang digaris bawahi. Apakah itu salah satu trik SEO? Katanya sih iya. Tapi aku percaya kalau Google (yang slogannya Don't be evil) nggak akan memberi nilai banyak buat teks semacam itu. Emphasize harusnya cukup pakai em atau strong saja.
Do not make visitors think, except when they fill comment box :D
Comment by Mardianto on June 6, 2009 at 21:03:31
using Opera 10.00 on Windows XP
Hehehe.. Kedetek WinXP. habisnya... barusan pake Ubuntu lambat banget. Maklum, RAM 256-32=224 MB
Ngeles mode: ON :D
Comment by Dani Iswara on June 7, 2009 at 01:57:17
using Firefox 3.0.10 on Gentoo
entahlah apa memang teks model itu dapet poin lebih di mata google. :D
Comment by Dani Iswara on June 7, 2009 at 01:58:51
using Firefox 3.0.10 on Gentoo
[OOT] selama make RAM segitu dulu, slackware ama gentoo atau turunannya yang masi lancar jaya :)
Comment by nomercy on June 7, 2009 at 14:42:53
using Firefox 3.0.10 on Linux Mint 7
hahaha ... saya setuju dengan mas Dani ... yang tahu hanya orang Google ... secara teori (yg banyak diberikan di internet) hal tersebut tidak memberikan nilai ... beda kalau memakai teks berwarna putih (tetapi ini sudah dikoreksi google sejak tahun lalu) ...
saya lebih condong kepada pemikiran mas Dani yang lebih diposisikan sebagai pengguna/pengunjung bukan pemilik blog/situs ...
Comment by nomercy on June 7, 2009 at 14:45:02
using Firefox 3.0.10 on Linux Mint 7
xfce sih ... coba pakai kde ... hahaha :D
Comment by Dani Iswara on June 7, 2009 at 15:19:46
using Firefox 3.0.10 on Gentoo
[OOT] Slackware kernel 2.6+ --saya pernah lama make yang Slackware 12.1-- kan make KDE by default sampe sekarang.. :) walau di DVD instalasinya ada opsi lain (XFCE, Blackbox, dll), kecuali --justru-- GNOME yang harus dipasang terpisah. :)
Gentoo sejak 2008 memang make XFCE by default di liveCD/installer-nya. :)
Comment by rismaka on June 9, 2009 at 12:01:55
using Firefox 3.0.10 on Windows XP
Dulu saya sempat mengekor (Ikut2an aja) para master SEO dengan menebalkan, garisbawahi, serta mewarnai keywords yang akan ditembak. Tapi pada kenyataannya justru hal tersebut tidak terlalu berpengaruh terhadap SERP, justru penebalan, garisbawah, atau perlakuan yang lain itu dapat menimbulkan kebingungan di mata pembaca.
Sejak saat itu saya berhenti utk berbuat layaknya anak-anak TK seperti itu, toh dengan tanpa warna-warni, tebal, ataupun garisbawah, tetap saja saya bisa menempati puncak teratas SERP :)
Comment by Dani Iswara on June 9, 2009 at 14:40:59
using Firefox 3.0.10 on Gentoo
Mas Adi,
untuk ungkapan ekspresif visual sepertinya masih bisa dimaklumi mas. karena best practice beliau-beliau mungkin berbeda [sambil membayangkan halaman internet marketer dan jualan e-book-nya..]