Teks Pranala yang Aksesibel dan Usable
October 18, 2009 – 23:06 by Dani Iswara. Words count: 948.Membuat teks pranala atau tautan/link text dalam suatu konten web menjadi lebih aksesibel dan usable sebenarnya bukanlah hal yang sulit. Aksesibel lebih ditujukan bagi pengguna (terutama difabel–different ability people) yang memakai alat bantu atau mesin tertentu. Misalnya screen reader, voice browser, layar kecil, dan mesin telusur Internet/Internet search engine. Usable lebih lekat ke kemudahan antarmuka untuk dipakai oleh pengguna/manusia.
Pranala yang disinggung di sini adalah terkait dengan teks/anchor text, bukan gambar. Tulisan ini cukup panjang.
Pranala pada konten web mempunyai fungsi:
- Memudahkan navigasi.
- Merujuk ke sumber tertentu.
- Membantu membentuk suatu jejaring.
- Identitas (situs web).
Bagaimana membuat teks pranala yang lebih aksesibel dan usable?
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.
Menurut pengalaman pribadi saya, beberapa hal di bawah terkait dengan teks pranala:
- Deskriptif.
- Saat
focus,active,visited. - Jumlah.
- Deretan pranala.
- Open in new window.
- Self-linking.
- Broken link.
Berikut penjelasannya:
Deskriptif
Teks pranala sebaiknya mampu menjelaskan:
- Apa isi halaman dimaksud.
- Apa yang akan diperoleh pengguna.
Sebagai tambahan, teks di sekitar pranala sebaiknya membantu mendeskripsikan:
-
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.
Belakangan, blog Dani Iswara .Net memilih memakai teks biasa untuk deskripsi pranala.
Bingung dengan tautan pada navigasi previous vs next? Silakan baca kembali Usability of Previous/Next vs Older/Newer Links (bahasa Inggris) di Dani Iswara .Net.
Atribut 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.
Jika digunakan berupa modifikasi tooltip, sering terjadi duplikasi informasi.
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 fitur a:active dan a:visited tidak tersedia.
Baca juga tulisan saya tentang Self-linking post title.
Broken links
Periksa tautan. Apakah (masih) valid atau tidak. Ada beberapa perangkat daring/online yang bisa digunakan. Juga ada perangkat yang memberi laporan via surat elektronik jika ditemukan pranala yang bermasalah.
Ada tambahan?
Last updated: Sunday, December 20, 2009 at 6:30
Comment by rismaka on October 23, 2009 at 13:03:22
using Mozilla 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
Comment by Dani Iswara on October 23, 2009 at 13:58:28
using Mozilla Firefox 3.5.3 on openSUSE Linux
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 Mozilla 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 Mozilla Firefox 3.5.3 on openSUSE Linux
Cahya,
legawa.com/blog ama blog.legawa.com sama ya?
risiko. walau ada teknik redirect.
Comment by Lho Wong Kok on October 25, 2009 at 13:01:12
using Mozilla 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 Mozilla Firefox 3.5.3 on openSUSE Linux
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?