Teks Pranala yang Aksesibel dan Usable

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, maka border-bottom dapat digunakan.

  Garis bawah pada content juga 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?

Share on: Delicious™ | Digg™ | Facebook™ | Twitter™.

Last updated: Sunday, December 20, 2009 at 6:30