Sure, they are links

Posted: June 14, 2009 at 21:00:36 by Dani Iswara. Words count: 307.
Last updated: June 16, 2009 at 13:07:13.

Text which is visually distinct in web content, probably link. But, in some cases, colored and/or underlined texts are not links. I meant, in common cases. Not that kind of ebook-selling web pages. I think they have a different best practices. Back to the topic. The default blue color is too old, maybe. But it is still usable. Someone may also says, text-decoration:underline is annoying. Especially related to g, j, y fonts. Not fancy? The border-bottom might help. Do-not-make-users-think have a place in here, again.

Accessible and usable link

Several questions for your links:
  1. Do you really think users may see the color? There are visually impaired (e.g. color blind or partially blind) people.
  2. Users should find the link easily, right?
  3. You want users to click the link, don't you?
  4. Where is the visited link?
  5. On keyboard/keypad tabbing. Touchscreen user. No mouse instead. Press your tab. Jump into some links. Where is the cursor position now?
  6. The anchor text should be descriptive enough. Do you agree?
Make it accessible and usable for users. You may see hover and focus will help web usability-accessibility.

Solution

Use Cascading Style Sheet (CSS) to customize the link: a:link, a:visited, a:hover, a:focus (may not work on old version of Internet Explorer without the hack), a:active. Here are my solution:
  • put a border-bottom, then
  • give some background-color, and/or
  • outline style,
which is match with the whole design. For example, on white background page, I have: 

*{ text-decoration:none; background:#fff; line-height:1.5em; }
a:link { color:#039; border-bottom:1px solid #999; }
a:visited { color:#306; border-bottom:1px solid #ccc; }
a:hover { color:#000; background:#ddd; border-bottom:2px solid #000; }
a:focus, a:active { color:#222; background:#eee; border-bottom:2px solid #009; outline:1px dashed #000; }
Be creative! Use "colour contrast analyser" to check the accessibility of its color combination. Are they really links? If you are interested, view Hearing web page link and 6 forgotten things of accessibility (both in bahasa Indonesia). Note: this is another scheduled post. I may not respond to comments quickly. Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.

Posted in category: Web Usability
Tags: ,
55 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Sure, they are links by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

55 Responses to post titled: Sure, they are links

  1. Comment by nomercy on June 15, 2009 at 03:58:13
    using Firefox 3.0.11 on Linux Mint 7

    seperti theme saya gara-gara position fixed itu jadi tabbing header gak kelihatan ya mas ...
    juga ada di bagian content bawah gitu juga

    /* sekalian minta check ... dah bisa masuk belum ke blog saya mas ... ymnya mas Dani offline melulu sama seperti saya :D */

  2. Comment by rismaka on June 15, 2009 at 06:39:48
    using Firefox 3.0.10 on Windows XP

    Apakah teks berwarna pengganti icon sociable di blog saya usable mas? Itu kombinasi antara warna dan text-decoration:underline. Klo warnanya saya lakukan secara manual:

  3. Comment by rismaka on June 15, 2009 at 06:40:53
    using Firefox 3.0.10 on Windows XP

    Ups, kenapa sniplet code ga berfungsi di komentar mas? Komen saya di atas padahal membubuhi sniplet (code)

  4. Comment by rismaka on June 15, 2009 at 07:18:16
    using Firefox 3.0.10 on Windows XP

    OOT:
    Maaf mas, ada ga tool offline yg bisa mengkonversi kode2 php menjadi bentuk yg ter-"escape". Contohnya: < menjadi & l t;

  5. Comment by d3ptzz on June 15, 2009 at 07:39:25
    using Google Wireless Transcoder on Windows 2000

    Kalau linknya bukan berupa text, tapi berupa gambar/image yang 'bener' bagaimana mas?

    kalau defaultnya kan juga ada border biru.. Dan itu yang selalu saya hilangkan..hehe. Apa itu 'salah'?

  6. Comment by Dani Iswara on June 15, 2009 at 15:35:09
    using Firefox 3.0.11 on Gentoo

    nomercy,
    bukan bermaksud menyinggung lho, pak. saya sendiri juga masih sering salah. buktinya tema blog ini versi beta terus. :mrgreen:

    memangnya kenapa pak..oooh pindah hosting itu ya..

  7. Comment by dani on June 15, 2009 at 15:41:15
    using Konqueror 4.2 on GNU/Linux

    rismaka,
    belum sempat merhatiin, mas..tapi saya yakin mas adi pasti ngerti maksud tulisan saya di atas.

  8. Comment by dani on June 15, 2009 at 15:46:17
    using Opera 10.00 on GNU/Linux

    rismaka,
    dari catetan di email, kode yang ditulis mas rismaka itu: <a></a> ya? karena dianggap empty, di-strip otomatis ama kses.php + purifier untuk xhtml 1.1 kayaknya, mas.

    pasti ada orang kreatif yang dah bikin..

  9. Comment by dani on June 15, 2009 at 17:22:00
    using Unknown on Unknown

    d3ptzz,
    iya ya, kalo gambar gemana ya best practice-nya..mungkin yang lain punya saran? [berkelit..]

  10. Comment by Dani Iswara on June 15, 2009 at 17:35:02
    using Firefox 3.0.11 on Gentoo

    rismaka,
    nanti kalo dah ketemu orang yang kreatif dan baik hati, bagi infonya ya mas.

    saya masi make manual find-replace.

  11. Comment by ganda on June 16, 2009 at 15:03:17
    using Internet Explorer 8.0 on Windows XP

    sudah saya tuliskan di blog saya pak dokter. Semoga berguna. *narsis dan promosi mode on*

  12. Comment by ganda on June 16, 2009 at 15:13:53
    using Internet Explorer 8.0 on Windows XP

    mungkin sah-sah aja ya dok? menurut saya gak masalah klo menghapus border pada link image. Dapat merusak desain. Kecuali jika image tersebut dalam keadaan hover, di beri custom border seperti hanya border-bottom saja?

  13. Comment by ganda on June 16, 2009 at 15:15:21
    using Internet Explorer 8.0 on Windows XP

    seperti yang ada di http://html.cita.uiuc.edu/text/links/link-example.php

    di situ saya liat bordernya di set = 0

  14. Comment by Dani Iswara on June 16, 2009 at 16:58:11
    using Firefox 3.0.11 on Gentoo

    ganda,
    ya it works. makasi. sepertinya saya ada sedikit masukan. saya tulis di Ganda's post about chars escape aja.

  15. Comment by Dani Iswara on June 16, 2009 at 17:03:00
    using Firefox 3.0.11 on Gentoo

    ganda,
    yang di icita kayaknya hanya fokus ke makna atribut alt pada gambar dan tautan teks di sekitarnya yang berpeluang pengulangan informasi.

    menurut saya, gemana dengan melihat saja, kita sudah tau bahwa gambar itu bisa diklik? tapi tidak merusak desain.

    saya pun masih ambigu menerapkannya di blog ini. ada clickable gambar yang pake border-bottom, ada yang tidak. :)

  16. Comment by ganda on June 16, 2009 at 17:05:26
    using Internet Explorer 8.0 on Windows XP

    makasih buat masukannya pak dokter. akan saya kerjakan. Tapi saya akan lama mulai memperbaikinya lagi, ada kerjaan Flex yang masih nanggung. Ini dari perusahaan. Untuk next releasenya saya akan masukkan seluruh escaped character yang di perlukan.

    terimakasih masukannya pak

  17. Comment by ganda on June 16, 2009 at 17:09:44
    using Internet Explorer 8.0 on Windows XP

    apakah boleh menerapkan satu metode seperti gambar yang clickable misalnya memiliki bottom border berwarna biru sedangkan lain memiliki border abu2 di sekilingnya, sedangkan gambar untuk smiley tidak ada border..

    gambar mana tuh pak? dari halaman ini saya cuman liat gambar sertifikasi dari HonCode yang tidak ada border. itu maksudnya?

  18. Comment by Dani Iswara on June 16, 2009 at 17:38:35
    using Firefox 3.0.11 on Gentoo

    ganda,
    haiyah..itu kan cuman saran buat yang mau ngembangin..sante aja. :)

  19. Comment by Dani Iswara on June 16, 2009 at 17:44:39
    using Firefox 3.0.11 on Gentoo

    ganda,
    ya seperti itulah. konten dan sidebar dibedakan juga bole kayaknya.

    yang logo d [nama saya] keliatan pake border-bottom kan. clickable image di konten body juga sama kayaknya. selain itu css-based (foto saya di header) dan clickable image lainnya tanpa penanda. [ngga konsisten kan]

  20. Comment by ganda on June 16, 2009 at 17:49:42
    using Internet Explorer 8.0 on Windows XP

    saya yang mau ngembangin pak. hehehe.. thanx buat sarannya

  21. Comment by ganda on June 16, 2009 at 17:58:00
    using Internet Explorer 8.0 on Windows XP

    kayaknya pak dokter menggunakan gambar wajah pribadi tersebut sebagai background blogtitle ya? Hmm... apa bila di paksa memiliki border, apakah bisa tampil bordernya di bawah image pak?

  22. Comment by Dani Iswara on June 16, 2009 at 18:18:23
    using Firefox 3.0.11 on Gentoo

    ganda,
    bisa, tapi itu satu kesatuan dengan teksnya. entah kalo ada tricky lain.

  23. Comment by rismaka on June 16, 2009 at 23:40:11
    using Firefox 3.0.1 on Windows XP

    Ternyata orang yg kreatif dan baik hati serta pandai menabung itu bernama bang gandamanurung.

    Thanks buat bung ganda :)

  24. Comment by Dani Iswara on June 17, 2009 at 02:18:13
    using Firefox 3.0.11 on Gentoo

    rismaka,
    mas adi dah sempet nyoba plugin lainnya juga ngga?

  25. Comment by ganda on June 17, 2009 at 09:26:59
    using Internet Explorer 8.0 on Windows XP

    kalau text dan imagenya berada dalam satu kontainer div, namun text tersebut dalam sebuah tag div lagi, apakah itu bisa pak?

  26. Comment by ganda on June 17, 2009 at 09:28:37
    using Internet Explorer 8.0 on Windows XP

    menabung apa nih bang? hahahahaha....

  27. Comment by Dani Iswara on June 17, 2009 at 09:35:24
    using Firefox 3.0.11 on Gentoo

    ganda,
    div yang untuk teks apakah seperlu itu? apa ngga divitis jadinya?

    nebak aja, kalo untuk logo+teks di header kayaknya banyak tutorial untuk membuatnya semantik dan aksesibel.

  28. Comment by Dani Iswara on June 17, 2009 at 09:49:14
    using Firefox 3.0.11 on Gentoo

    ganda,
    kalimat 'serta pandai menabung' itu sebenarnya ditulis mas rismaka dalam tag del. entah kenapa ngga muncul. padahal it termasuk tag legal. apa karena ngga isi del datetime="..."?

    tes, tulisan ini dicoret sesuai tanggal posting

  29. Comment by dani on June 17, 2009 at 09:58:01
    using Opera 10.00 on GNU/Linux

    argh..CSS problem..fixed, sorry.

  30. Comment by ganda on June 17, 2009 at 14:34:45
    using Internet Explorer 8.0 on Windows XP

    kan div bisa di ganti dengan span [ngelak]

    Dari berbagai tutorial yang saya pelajari, banyak yang pakai span pak..

  31. Comment by ganda on June 18, 2009 at 16:43:59
    using Internet Explorer 8.0 on Windows XP

    [OOT]
    Klo saya lihat, saya, pak dani, bang rismaka, bang nomercy dan akang uwiuw aktif berdiskusi tentang hal ini. Hehehehe...

  32. Comment by Arie Putranto on June 20, 2009 at 03:55:48
    using Firefox 3.0.11 on Windows XP

    Gee .. I forgot that some people might not see the color. I guess i have to underline my links right away.

    Anyway, if you use border-bottom, it might affect your style if you use margin a lot, for an instance.

    If any layer below your link-which is using border-bottom-is using margin-top, than it could be disaster in particular browser.

    Another example, if you set the border-bottom properties for "a", than it could not be easy to get rid the border from image links.

  33. Comment by Dani Iswara on June 24, 2009 at 09:54:38
    using Firefox 3.0.11 on Gentoo

    Arie Putranto,
    agree, underline is enough, except for some fonts.

    yes, border-bottom needs some extra space, larger line-heght maybe.

    I think clickable images need a distinct links too.

  34. Comment by a! on June 24, 2009 at 20:12:16
    using Firefox 3.0.11 on Windows XP

    mm, aku kok ra mudeng ya basa2 coding begini. :)

  35. Comment by anton on June 25, 2009 at 09:06:33
    using Firefox 3.0.11 on Windows XP

    saya pake theme baru, ngga valid. Sulit sekali ngopreknya mas. Stylenya berubah ubah..

  36. Comment by putri on June 25, 2009 at 14:35:28
    using Firefox 3.0.3 on Linux Mint 6

    ooo link nya jadi gitu ya.... wah bisa deh dipraktekin buat post selanjutnya... thanks doc!

  37. Comment by ganda on June 25, 2009 at 16:01:27
    using Internet Explorer 8.0 on Windows XP

    what font did you talking doc?

  38. Comment by Kuliah Gratis on June 25, 2009 at 17:26:42
    using Firefox 3.0.11 on Windows XP

    Wach sebenarnya gak mudeng nich maaf ya inggris saya memang buruk

  39. Comment by Dani Iswara on June 25, 2009 at 22:17:52
    using Firefox 3.0.11 on Gentoo

    ganda,
    I meant g, j, y fonts (see on post).

  40. Comment by Dani Iswara on June 25, 2009 at 22:29:54
    using Firefox 3.0.11 on Gentoo

    putri,
    kirain buat lab selanjutnya..

  41. Comment by ganda on June 26, 2009 at 11:46:59
    using Internet Explorer 8.0 on Windows XP

    you mean georgia for g?

  42. Comment by Dani Iswara on June 26, 2009 at 19:52:37
    using Firefox 3.0.11 on Gentoo

    ganda,
    fonts with lower characters (g, j, y and/or p, q) will look terrible on underlined.

  43. Comment by ganda on June 29, 2009 at 10:26:24
    using Internet Explorer 8.0 on Windows XP

    seperti yang saya duga dok. :D masalah di css nya. :D

  44. Comment by ganda on June 29, 2009 at 10:32:33
    using Internet Explorer 8.0 on Windows XP

    now i get it. But underline is enough for me. :D

  45. Comment by Giulia Relation on June 29, 2009 at 14:27:00
    using Firefox 3.0.11 on Windows XP

    Is your article meant as a warning? Should readers stay away from the links? :)

  46. Comment by ganda on June 30, 2009 at 09:31:32
    using Internet Explorer 8.0 on Windows XP

    Nope,i think. Actually this is just a best practices, you can follow it if you want. There is no strict rule for designing a web.

  47. Comment by Dani Iswara on July 1, 2009 at 05:11:00
    using Firefox 3.0.11 on Gentoo

    Giulia,
    it should be easy to find and use links without the hard think. :)

  48. Comment by rismaka on July 12, 2009 at 10:06:46
    using Firefox 3.5 on Windows XP

    Hanya melongok dok, ternyata lama ga ada update-an. Semoga Pad dokter sehat-sehat saja.

  49. Comment by Didien on July 26, 2009 at 13:28:35
    using Firefox 3.0.11 on Windows XP

    Wuihhhh ada ilmu baru neh disini..
    salam kenal

    Ikutan 4th IBSN award yuk..
    Informasi dan ketentuan silahkan baca di sini
    IBSN= Karena Berbagi Tak Pernah Rugi..

    Trimakasih...^_^

  50. Comment by sulumits retsambew on July 28, 2009 at 10:49:50
    using Firefox 3.0.12 on Windows XP

    mantaf dok sharingnya.

  51. Comment by the fachia on July 29, 2009 at 20:01:46
    using Firefox 3.0.12 on Windows XP

    Thanks bagt nih method yg very useful for me..

    thanks salam kenal mas.. ;)

  52. Comment by Yeni Setiawan on August 15, 2009 at 11:34:23
    using Opera 10.00 on Windows XP

    Very nice article, it brighten my day :)

Trackbacks/Pingbacks

  1. Pingback by Teks Pranala yang Aksesibel dan Usable - Dani Iswara .Net on October 27, 2009 at 14:14:54
    WordPress abc

    [...] border outline, perubahan warna latar dan warna teks. Versi bahasa Inggrisnya bisa dilihat di Sure, They are Links dan Usability-Accessibility on Hover and Focus (Dani Iswara [...]

  2. Pingback by Web Blog Navigation Menu - Dani Iswara .Net on November 14, 2009 at 02:13:57
    WordPress abc

    [...] or clearly marked. Easy to find and use menu. You may read again about Distinct Links on Dani Iswara [...]

  3. Pingback by Self-linking Post Title - Dani Iswara .Net on December 17, 2009 at 21:19:40
    WordPress abc

    [...] to make Distinct Link–my previous post on Dani Iswara [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Evaluasi Aksesibilitas Web
‹‹ Newer entries: Narablog Dokter sudah Punya Etika