Teks Pranala yang Aksesibel dan Usable
Posted: October 18, 2009 at 23:06:57 by Dani Iswara. Words count: 948.
Last updated: December 20, 2009 at 06:30:22.
- Memudahkan navigasi.
- Merujuk ke sumber tertentu.
- Membantu membentuk suatu jejaring.
- Identitas (situs web).
Acuan umum
Menurut Rekomendasi/Panduan Aksesibilitas Konten Web (Web Content Accessibilty Guidelines atau WCAG) 2.0, acuan umumnya:Teks dengan garis bawah umumnya bisa diklik.
Pengguna dengan gangguan penglihatan warna akan sulit mengenali teks yang hanya berbeda warna, tanpa garis bawah. Jika garis bawah/
underline(CSS) dianggap mengganggu untuk huruf-huruf g, j, p, q, dan y, makaborder-bottomdapat digunakan.Garis bawah pada
contentjuga membantu menentukan mana yang berupa suatu kesatuan teks paranala dalam suatu baris kalimat.Hal ini menjadi tidak berlaku pada penyebutan genus+spesies dalam bahasa latin. Biasanya tidak berlaku juga pada menu navigasi, menu samping/sidebar, dan catatan kaki/footer karena alasan estetika.Bukan sekadar 'klik di sini'.
Ini hal yang paling klasik. Terdengar tidak deskriptif bagi pengguna screen reader. Sulit untuk dimengerti saat pengguna melakukan scan/membaca cepat. Apalagi jika terdapat banyak 'klik di sini' dalam satu halaman web.
Teks pranala unik.
Teks pranala yang sama pada satu halaman web, harusnya menuju ke alamat yang sama. Misalnya pranala Dani Iswara .Net akan selalu mengarah ke laman/halaman depan blog ini. Bukan ke halaman-halaman web lainnya.
- Deskriptif.
- Saat
focus,active,visited. - Jumlah.
- Deretan pranala.
- Open in new window.
- Self-linking.
- Broken link.
Deskriptif
Teks pranala sebaiknya mampu menjelaskan:- Apa isi halaman dimaksud.
- Apa yang akan diperoleh pengguna.
Tipe berkas yang diunduh. Misalnya zip, rar, pdf (portable document format), doc, ppt, odt (open document text), odp (open document presentation), jpg, mpg, ogg, mp3.
Ukuran berkas yang diunduh. Misal dalam KB (kilobyte), MB (megabyte), GB (gigabyte), TB (terabyte).
Informasi apa yang ada pada alamat dimaksud? Terutama jika teks pranala dirasa terlalu panjang. Akan membingungkan bagi pengguna dengan hendaya/disfungsi pengetahuan.
Kemana pranala menuju? Berupa tautan eksternal atau internal? Menuju halaman web di luar situs yang sedang dibaca atau masih dalam situs yang sama? Pengguna komputer desktop bisa melihatnya di status bar peramban. Bagaimana dengan pengguna small screen seperti personal digital assistant (PDA)?
Di sisi kode X/HTML dapat memakai
<a href="..." rel="external">. Lalu dikombinasikan dengan CSS. Menghasilkan ikon kecil seperti di halaman Wikipedia. Ini pun tidak sepenuhnya aksesibel, karena bergantung pada gambar dan CSS. Bagaimana jika tampilan gambar dan CSS dimatikan?Umumnya, jika tidak disebutkan berbeda, pranala akan menuju halaman dalam situs web yang sama. Jadi berupa tautan internal.
Untuk identifikasi tautan eksternal, bisa disebutkan dalam bentuk teks biasa bahwa pranala akan menuju ke situs tertentu atau situs milik seseorang. Tergantung mana yang lebih dikenali. Atau sebutkan keduanya.
Kelemahannya, akan terdengar duplikasi informasi bagi pengguna screen reader. Karena pengguna mesin pembaca tersebut juga mendengar informasi sebagai berikut: link href http colon slash slash example dot com slash .... Lihat kembali Mendengar Pranala Halaman Web dan Mendengar Halaman Web di Dani Iswara .Net.
Pilih taut yang mengarah ke halaman kategori, tag, atau langsung menuju posting? Berharap menemukan tulisan dimaksud tanpa harus mampir ke halaman kategori atau tag? Jika mengacu ke halaman kategori atau tag, sebaiknya disebutkan dalam deskripsi tambahan.
title mungkin masih aksesibel bagi pengguna screen reader tertentu. Terutama bagi mesin pembaca yang mampu menyuarakan title atau mengaktifkan setelan fitur tersebut.
Atribut ini tidak aksesibel bagi pengguna:
- layar kecil,
- hanya papan ketik/keyboard,
- tanpa tetikus/mouse.
Saat focus, active, visited
Fitur a:focus (dengan CSS) sangat membantu pengguna papan ketik mengetahui posisi kursornya saat tabbing. a:active menandakan halaman web tersebut sedang dalam proses terbuka. a:visited menunjukkan jika halaman tersebut sudah dikunjungi/dibuka.
Umumnya ditandai dengan kombinasi dotted/dashed 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 .Net).
Jumlah
Saya pribadi menganggap cukup kondisi berikut:- Maksimal 2 teks pranala dalam satu kalimat. Jika lebih, sebutkan dalam bentuk daftar/list.
- Lima (5) teks pranala dalam satu paragraf. Kecuali memang berupa daftar yang mengharuskannya.
Deretan teks pranala
Deretan pranala horisontal seperti pada menu paging sebaiknya mudah dikenali dan diklik. Area cukup besar dan tidak menyulitkan bagi pengguna dengan hendaya kognitif/pengetahuan dan hendaya alat gerak/motorik (misal pada kasus tremor--tangan bergetar tanpa kontrol). Lebih baik lagi jika dipisahkan dengan karakter yang tidak berupa teks pranala. Misal sebelumnya | 1 | 2 | ... | 9 | 10 | berikutnya .
Open in new window?
Beri peringatan -- berupa teks biasa -- pada pengguna bahwa taut akan terbuka di jendela baru. Selain menghalangi fungsi tombol 'back' di sisi peramban, open in new window (target="_blank") seharusnya tidak perlu lagi digunakan. Di sisi peramban sudah berkembang fitur open in new tab. Serahkan pilihan pada pengguna. Bukan memaksanya sesuai kehendak pengelola web.
Self-linking
Perlukah memasang judul tulisan/posting yang berupa live/clickable link? Perlukah memasang pranala yang menuju ke halaman yang sedang aktif terbuka atau halaman yang sedang dibaca? Sering terjadi pada beberapa teks pranala yang berbeda, tapi mengacu ke halaman web yang sama--yang sedang/sudah terbuka. Pengguna mungkin terkecoh membuka halaman web yang sama. Apalagi jika fitura:active dan a:visited tidak tersedia.
Baca juga tulisan saya tentang Self-linking post title.
Comment by rismaka on October 23, 2009 at 13:03:22
using Firefox 3.5.3 on Windows XP
Penjelasan yang bagus dok, penggabungan antara medical informatics dan aplikasinya. Semoga saya bisa mempelajarinya dan sekaligus mempraktikannya tanpa ada unsur ego utk mencapai posisi tertinggi di search engine :D
Comment by Dani Iswara on October 23, 2009 at 13:58:28
using Firefox 3.5.3 on SuSE
rismaka,
tidak ada yang salah dengan target search engine. apalagi jika memang ada isinya, kan, mas Adi. toh nantinya pengunjung juga yang merasakan manfaat dan sekaligus menilainya. :)
Comment by Cahya on October 23, 2009 at 14:07:30
using Firefox 3.5.3 on Windows Vista
Gara-gara pindah blog, jadi banyak taut yang rusak deh :(
Comment by Dani Iswara on October 23, 2009 at 20:43:12
using Firefox 3.5.3 on SuSE
Cahya,
risiko. walau ada teknik redirect. :) legawa.com/blog ama blog.legawa.com sama ya?
Comment by Lho Wong Kok on October 25, 2009 at 13:01:12
using Firefox 3.5.3 on Windows XP
Pelajaranku baru sampai sistem navigasi sebuah website mas.
Sedikit membaca tentang anchor text, saya melihatnya tidak ada yang lebih berarti kecuali sebagai sebuah bagian dari navigasi website.
Makin banyak belajar dari mas, makin memperbesar kemaluanku eh merasa malu karena punyaku halah halamanku masih banyak cacat disana sini berhubungan dengan accessibility.
Segera saya benahi styling text yang terlalu berlebihan yang saya gunakan. (rasa-rasanya yang buta warna tidak akan pernah lihat anchor text-ku)
Anyway,..
Sepertinya saya semakin keracunan dengan point accessibility yach ?!?.
Selalu menggabungkan disiplin ilmu dengan hobi, adalah ide cemerlang. its yours.
Salam
Comment by Dani Iswara on October 25, 2009 at 14:03:30
using Firefox 3.5.3 on SuSE
Lho Wong Kok,
Ah, pakdhe terlalu berlebihan. Ini mumpung mengalir begitu saja. Belum banyak yang berbagi tentang hal ini di Indonesia. Terutama yang di luar sistem (non desainer web). Jika desainer/pengembang web mungkin malah jadi konflik kepentingan.
Tidak ada yang mengharuskan untuk memperbaikinya kan, pakdhe? :)